I want to do something like this:
I want a border-radius, transparency (to see the background), and the possibility to fill from 0% to 100% the border.
For the moment, I have this code:
body{
background: lightgrey;
}
.avatar{
padding: 10px;
display: inline-block;
position: relative;
z-index: 0;
}
.avatar:before{
width: 180px;
aspect-ratio: 1;
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: 8px;
border-radius: 100%;
background: linear-gradient(to top, transparent 25%, blue 25%, blue);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: clear;
mask-composite: clear;
}
<html>
<body>
<div class="avatar"></div>
</body>
</html>
How is it possible to fill X% of the border?
Thank you!
here is an idea based on my previous answer:
.box {
width: 100px;
aspect-ratio: 1;
display:inline-block;
border-radius :50%;
padding: 10px;
background: conic-gradient(from -136deg, blue calc(var(--p)*.76),#f3f3f3 0);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
clip-path:polygon(0 0,100% 0,100% 100%, 50% 50%,0 100%);
}
body {
background:linear-gradient(to right,red,yellow);
}
<div class="box" style="--p:5%;"></div>
<div class="box" style="--p:20%;"></div>
<div class="box" style="--p:50%;"></div>
<div class="box" style="--p:60%;"></div>
<div class="box" style="--p:75%;"></div>
<div class="box" style="--p:100%;"></div>
This is called a radial progress bar is case you want to search for more examples. Here is a small example:
div {
display: flex;
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(red var(--progress), gray 0deg);
font-size: 0;
}
div::after {
content: attr(data-progress) '%';
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
margin: 10px;
border-radius: 50%;
background: white;
font-size: 1rem;
text-align: center;
}
<div data-progress="80" style="--progress: 80%;"></div>
Here is a better solution based on what you asked.
Hope that helps.
try like below,
body{
background: lightgrey;
}
.avatar{
padding: 10px;
display: inline-block;
position: relative;
z-index: 0;
}
.avatar:before{
width: 180px;
aspect-ratio: 1;
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: 8px;
border-radius: 100%;
background: linear-gradient(to top, transparent 25%, blue 25%, blue);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: clear;
mask-composite: clear;
}
.mainside{
display: inline-block;
position: relative;
z-index: 0;
}
.mainside:before{
width: 180px;
aspect-ratio: 1;
content: "";
position: absolute;
z-index: 9;
inset: 0;
padding: 8px;
border-radius: 100%;
background: linear-gradient(to right, transparent 90%, #878789 25%, #adadad);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: clear;
mask-composite: clear;
}
<html>
<body>
<div class="mainside">
<div class="avatar"></div>
</div>
</body>
</html>
Related
So, I'm trying to fade out an image that has border-radius: 50% but I can't seem to get it down.
<section id="main">
<h1>Non-Important-Text</h1>
<h4>
it's all fun and games until you can't find a damn solution....
</h4>
<div id="img-container">
<img src="./assets/1.jpg" />
</div>
</section>
/* ... */
#main #img-container {
border-radius: 50%;
display: inline-block;
position: relative;
}
#main #img-container img {
width: 30em;
border-radius: 50%;
display: block;
border: 1px solid white;
}
#main #img-container img::after {
content: "";
display: block;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
); /* This doesn't work! */
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
My Image, is circle, and does have a border. But it doensn't get faded out( in a circular way). How can I achieve that
Goal:
What I Get:
I tried everything from, radial-gradient, -webkit-gradient, to even, -webkit-radial-gradient. But they all produce the same result!
you need to use mask-image
div{
background: skyblue;
padding: 20px;
}
img{
-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0, rgba(0,0,0,0) 70%);
mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0, rgba(0,0,0,0) 70%);
display: block;
margin: 0 auto
}
<div><img src='data:image/jpeg;base64,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' /></div>
I am trying to make some HTML and CSS look like a receipt. I want the bottom of this receipt to look like it was torn off. I have gotten an ::after style that looks close to what I want, however on mobile devices it is showing up with some weird lines. I need a responsive design that looks good on mobile screen sizes.
Here is the design I am looking for:
Here is my attempt that is showing up with weird lines:
Here is my code I am using:
body {
background: black;
}
.StyledReceipt {
background-color: #fff;
width: 22rem;
position: relative;
padding: 1rem;
box-shadow: 0 -0.4rem 1rem -0.4rem rgba(0, 0, 0, 0.2);
}
.StyledReceipt::after {
background-image: linear-gradient(135deg, #fff 0.5rem, transparent 0),
linear-gradient(-135deg, #fff 0.5rem, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 1rem;
content: '';
display: block;
position: absolute;
bottom: -1rem;
left: 0;
width: 100%;
height: 1rem;
}
<div class="StyledReceipt">Test</div>
I have a generator for this kind of shapes (https://css-generators.com/custom-borders/) and it works with any background as well. One gradient and no pseudo element needed.
body {
background: black;
}
.StyledReceipt {
background: linear-gradient(45deg,#aaa,#fff);
width: 22rem;
padding: 1rem 1rem 2rem;
--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/30px 100%;
-webkit-mask: var(--mask);
mask: var(--mask);
}
<div class="StyledReceipt">Test</div>
If you want shadow you can do like below:
body {
background: black;
}
.StyledReceipt {
width: 22rem;
padding: 1rem 1rem 2rem;
filter: drop-shadow(0 0 .2rem red); /* update the shadow here */
position: relative;
z-index: 0;
}
.StyledReceipt:before {
content:"";
position:absolute;
z-index:-1;
inset:0;
background: linear-gradient(45deg,#aaa,#fff);
--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/30px 100%;
-webkit-mask: var(--mask);
mask: var(--mask);
}
<div class="StyledReceipt">Test</div>
I am trying to create a custom button with a gradient border. At this point I got the button to work in both Chrome and Firefox.
I have followed an online guide on how to create custom borders with a gradient which are also rounded. The link to the guide can be found here: documentation.
But for some reason the same styling does not work in Safari. I do not know why this is the case.
Here is the CSS code I use in order to create the button. I have also included a snippet with the same style at the bottom. Note that the snippet has a few extra classes and CSS properties just to get it to show properly.
.rainbow-gradient-border {
position: relative;
border-radius: 0.25rem;
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.rainbow-gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
padding: 0.1rem;
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
body, .container{
width: 100%;
height: 100%;
background-color: black;
}
.container{
background-color: black;
}
.rainbow-gradient-border {
position: relative;
color: white;
width: 10rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.25rem;
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.rainbow-gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
padding: 0.1rem;
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
<div class="container">
<div class="rainbow-gradient-border">
<p>Log In</p>
</div>
</div>
try using -webkit-mask-composite: source-out;
instead of destination-out.
This worked for me and they have the same description on https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite
You can achieve this in a more simple way, without using masks. I used this tool to add the prefixes.
body, .container{
width: 100%;
height: 100%;
background-color: black;
color: white;
}
.rainbow-gradient-border {
position: relative;
}
.outie{
display: inline-block;
background: -webkit-gradient(
linear,
left top, right top,
from(#4d3d8f),
color-stop(23%, #df67ed),
color-stop(65%, #e24c26),
color-stop(84%, #f18823),
to(#3aa6c2)
);
background: -o-linear-gradient(
left,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
background: linear-gradient(
90deg,
#4d3d8f 0%,
#df67ed 23%,
#e24c26 65%,
#f18823 84%,
#3aa6c2 100%
);
border-radius: 4px;
padding: 2px;
width: 10rem;
border-radius: 0.25rem;
-webkit-box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
box-shadow: 0 2px 10px 0 rgba(142, 57, 255, 0.29);
}
.innie{
display:inline-block;
width: 100%;
background: black;
padding: 15px 0px;
text-align: center;
}
<div class="container">
<div class="rainbow-gradient-border">
<span class="outie">
<span class="innie">
Log In
</span>
</span>
</div>
</div>
I have a project where I try to draw a circle with a gradient border. I have made it so it works in Chrome. But the styling doesn't work in safari. I don't know why it wouldn't work. I have added a mask: version for safari.
.gradient-circle {
height: 10rem;
width: 10rem;
--b: 5px;
/* border width*/
display: inline-block;
margin: 10px;
z-index: 0;
position:relative;
}
.gradient-circle:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
mask: linear-gradient(0deg, #fff, transparent 96%), radial-gradient( farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
-webkit-mask: linear-gradient(0deg, #fff, transparent 96%), radial-gradient( farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
mask-composite: intersect;
-webkit-mask-composite: destination-in;
border-radius: 50%;
padding: 1px;
}
<span class="gradient-circle"></span>
Here is a different idea without mask-composite which is the culprit I guess. Simply consider an extra layer to be able to apply both mask independently
.gradient-circle {
height: 10rem;
width: 10rem;
--b: 5px; /* border width*/
display: inline-block;
margin: 10px;
z-index: 0;
position: relative;
}
.gradient-circle div,
.gradient-circle div:before {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.gradient-circle div {
-webkit-mask: linear-gradient(0deg, #fff, transparent 96%);
}
.gradient-circle div:before {
content: "";
background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
border-radius: 50%;
padding: 1px;
}
<span class="gradient-circle">
<div></div>
</span>
I'm currently designing a website, and for the footer I've created a "zigzag" border on top.
To create some depth in the website, I wanted to add a drop shadow on the triangles in the "zigzag", and this is where I'm currently stuck.
Here is an example of the footer as I have it right now: http://jsfiddle.net/CwXp4/
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 21px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 40px, 40px 40px;
}
<div id="footer"></div>
Is there someone out there with some tips for me on how to add a drop shadow?
You can somehow make the shadow with the same gradients that you are using to make the zigzag.
CSS
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0,
linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
}
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0, linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
}
<div id="footer"></div>
fiddle
You could also get the shadow with a webkit-filter shadow, but this has limited support
CSS
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0,
linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
-webkit-filter: drop-shadow(red 0px -5px 5px);
}
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
-webkit-filter: drop-shadow(red 0px -5px 5px);
}
<div id="footer"></div>
fiddle with filter