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>
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 want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?
body {
background: #eee;
}
.darker {
position: fixed;
top: -94%;
left: -10%;
width: 150%;
height: 150%;
background: #dd4f39;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
<div class="darker"> </div>
I found an interesting way to do this from here, which uses clip-path
.Answering my own question so that everyone can use it.
html,
body {
margin: 0;
}
body {
background: #eee;
}
.box {
width: 100vw;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
<div class="box"></div>
This is one way of doing it. But this use case is strictly with respect to vw. Just make sure to give the same value to these elements
div and it's pseudo element should have same width and border-left respectively.
div and it's pseudo element should have same height and border-top respectively.
html, body {
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: white;
}
.box::after {
content: ' ';
border-top: 100vh solid #dd4f39;
border-left: 100vw solid transparent;
width: 0;
position: absolute;
}
<div class="box"></div>
JS fiddle
https://jsfiddle.net/kqsrmrss/2/
You can do that with a skewed pseudo element. The main trick is to keep the aspect ratio the same or else the sloped angle will fail
Fiddle demo
Stack snippet Note 1
body {
background: #eee;
}
.darker {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 50%;
background: #dd4f39;
overflow: hidden;
}
.darker::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: gray;
transform: skewY(26.5deg);
transform-origin: left top;
}
<div class="darker"></div>
Optionally, you can add media query to control the angle at different screen sizes
Fiddle demo 2
With a tiny script running when window resize's, you can control the angle and make it fully responsive both horizontally and vertically.
Note 1 Based on a comment, the Stack snippet might not work properly, and if, try the fiddle demos.
Please Use this code snippet.
div {
width: 100%;
height: 100px;
}
.diagonalRising {
border: 1pt solid black;
background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalFalling {
background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalCross {
position: relative;
background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}
.diagonalCross:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}
<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>
Try this,
.box::after {
background: #E52A35
content: '';
position: absolute;
width: 100%;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}
I want to remove the corners of borders like this picture.
You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border:
.bordery {
border: 1px solid teal;
padding: 20px;
position: relative;
}
.bordery::after,
.bordery::before {
background-color: white;
content: "";
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.bordery::after {
bottom: -1px;
right: -1px;
}
.bordery::before {
top: -1px;
left: -1px;
}
<div class="bordery">This is just some sample content.</div>
You can use :before and :after pseudo elements to create this.
.el {
position: relative;
width: 200px;
height: 50px;
margin: 50px;
}
.el:after,
.el:before {
content: '';
position: absolute;
height: 90%;
width: 100%;
}
.el:before {
top: -5px;
left: -5px;
border-top: 1px solid orange;
border-left: 1px solid orange;
}
.el:after {
bottom: -5px;
right: -5px;
border-bottom: 1px solid orange;
border-right: 1px solid orange;
}
<div class="el"></div>
You can use css3 linear-gradient to draw this background to just a single <div> element and without using any pseudo elements.
div {
background-image: linear-gradient(to left, transparent 20px, orange 20px),
linear-gradient(to bottom, transparent 20px, orange 20px),
linear-gradient(to right, transparent 20px, orange 20px),
linear-gradient(to top, transparent 20px, orange 20px);
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
}
div {
background-color: #eee;
background-image: linear-gradient(to left, transparent 20px, orange 20px),
linear-gradient(to bottom, transparent 20px, orange 20px),
linear-gradient(to right, transparent 20px, orange 20px),
linear-gradient(to top, transparent 20px, orange 20px);
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
height: 100px;
width: 80%;
}
<div></div>
You can do it by following:
#rectangle{
width:400px;
height: 200px;
border-style: solid;
color:orange;
position: absolute;
}
#eraser1{
position: absolute;
width: 50px;
height: 50px;
background-color:white;
margin: -10px 0px 0px 374px;
}
#eraser2{
position: absolute;
width: 50px;
height: 50px;
background-color:white;
margin: 175px 0px 0px -13px;
}
Use clip-path property to clip corner
div{
width: 15em;
height: 5em;
border: 2px solid red;
clip-path: polygon(0 0, 91% 0, 100% 12%, 100% 100%, 12% 100%, 0 89%);
}
<div></div>
I am doing a gradient border of a div in css3. So far now I have done my coding like this
in css
.bot-left {
position: relative;
}
.bot-left:before, .bot-left:after {
content: "";
position: absolute;
bottom: -3px;
left: -3px;
}
.bot-left:before {
top: -3px;
width: 3px;
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));
background-image: -webkit-linear-gradient(transparent, #000);
background-image: -moz-linear-gradient(transparent, #000);
background-image: -o-linear-gradient(transparent, #000);
}
.bot-left:after {
right: -3px;
height: 3px;
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
background-image: -webkit-linear-gradient(left, #000, transparent);
background-image: -moz-linear-gradient(left, #000, transparent);
background-image: -o-linear-gradient(left, #000, transparent);
}
in html
<div class="bot-left" style="width: 200px; height: 200px"></div>
But still I am not getting the exact match as reference. The reference image for the gradient border is attached with this
UPDATE
I want the background-color should be transparent.
I would recommend you to use the gradients as background instead of border images. The reason I am suggesting you to use this method is because border-image isn't supported by IE10. Where as you can implement this method to support IE9 as well, by using base64 encoded gradients.
Now, here am using two absolute positioned elements along with :before and :after pseudo elements which are positioned absolute.
Demo
Here, you can refactor this to a great extent, I've not done that so that you can figure out how this works.
Also, if you want, you can wrap this inside a position: relative; container with a negative z-index set on the elements having class of .frame1 and 2 respectively.
Demo 2
body {
background: #000;
}
.frame1,
.frame2 {
position: absolute;
top: 25px;
left: 25px;
bottom: 25px;
right: 25px;
}
.frame1:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
width: 1px;
}
.frame1:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
height: 1px;
}
.frame2:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 100%;
background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
width: 1px;
}
.frame2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
height: 1px;
}
For younger browser , you may use one single gradient, box-shadow and transparent border : DEMO
CSS used for demo:
.bot-left {
background:
linear-gradient(
to bottom right,
#777,
#555,
#333,
#111,
#333,
#555,
#777) center;
background-size:105% 105%;/* needs to lay under borders */
box-sizing:border-box;/* keep borders inside width and height setted */
border:1px transparent solid;/* background will show through */
box-shadow:inset 0 0 0 500px black, 0 0 0 5px black;/* inset shadow will hide background gradient */
margin:5px;/* optionnal: includes ouside box-shadow in space needed by element */
}
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