I want a radiant gradient background that is a circular, not ovoid. I want it to scale to the fit the container, which may not be square.
Cover/contain don't treat radial-gradient like a square image, which I suppose makes sense.
Setting background width to 100% operates X and Y independently still.
Setting a fixed px size doesn't allow it to scale to the container.
Are there any pure-CSS ways to make this happen? Maybe a special property value to make the radial gradient act "square" for cover/contain sizing?
.gradier{
height:200px;
width: 300px;
background-image: radial-gradient(rgba(0,255,255, 0.2) 55.5%, rgba(0,255,255,1) 56%, rgba(0,255,255,1) 57%, rgba(0,255,255, 0) 57.5% );
background-size: 100px 100px;
background-size: contain;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="gradier"></div>
Use circle closest-side
.gradier {
height: 200px;
width: 300px;
border: 1px solid;
background: radial-gradient(circle closest-side, rgba(0, 255, 255, 0.2) 96%, rgba(0, 255, 255, 1) 97% 98%, #0000);
}
<div class="gradier"></div>
Or circle farthest-side
.gradier {
height: 200px;
width: 300px;
border: 1px solid;
background: radial-gradient(circle farthest-side, rgba(0, 255, 255, 0.2) 96%, rgba(0, 255, 255, 1) 97% 98%, #0000);
}
<div class="gradier"></div>
Related
I'm trying to replicate the google map's marker that shows user facing direction. It has got a cone/light beam/flash light type of shape where it fades from a color to transparent.
When I google css shapes, this is one of suggested methods for creating a cone shape :
.cone {
height: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #07CAF3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<div class="cone"></div>
But because it's made of borders, I cannot apply a gradient to it.
Any ideas ?
Use conic-gradient combined with mask:
.box {
width:200px;
height:100px;
border-radius:50%;
background:conic-gradient(from -45deg at bottom,#0000, blue 1deg 90deg, #0000 91deg);
-webkit-mask:linear-gradient(#0000,#000);
}
<div class="box"></div>
OR a radial-gradient one and the conic applied to mask:
.box {
width:200px;
height:100px;
background:radial-gradient(farthest-side at bottom,blue ,#0000);
-webkit-mask:conic-gradient(from -45deg at bottom,#0000, #000 1deg 90deg, #0000 91deg);
}
<div class="box"></div>
The mask idea from #temaniafif is probably the best idea, but you could also have two background-images, and in the radial one play around with the color and the percentage offsets/opacities to get the effect you want:
div {
background-image: conic-gradient(transparent 0deg, transparent 45deg, white 45deg, white 315deg, transparent 315deg, transparent 360deg), radial-gradient(rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.2) 30%, rgba(0, 0, 0, 0.1) 70%, transparent 80%);
background-size: 100% 100%;
width: 75vmin;
height: 75vmin;
border-radius: 50%;
}
<div></div>
Instead of falling back on SVG, I'd love to accomplish this with pure CSS.
There are a number of tutorials on clipped edges using a series of Linear Gradients, i.e.
background: linear-gradient(135deg, transparent 15px, blue 0) top left,
linear-gradient(-135deg, transparent 15px, blue 0) top right,
linear-gradient(-45deg, transparent 15px, blue 0) bottom right,
linear-gradient(45deg, transparent 15px, blue0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
And a diagonal "linear gradient" can also be accomplished quite easily, i.e.
background: linear-gradient(290deg, blue 50%, darkblue 50%);
Is there a way to combine these two techniques to get something like the box pictured below?
Edit: Internet Explorer compatibility would be great.
-webkit-clip-path
clip-path
Are not IE compatible to my knowledge.
You can define one transparent corner via background gradient. However, when you declare more than one, they paint over the transparency defined by the previous rule. In essence, they paint over each other.
A better solution is to use clip-path. For simple shapes, you can use clippy.
body {
background: black;
}
#gradients {
width: 200px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top right, linear-gradient(-45deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) bottom right, linear-gradient(45deg, rgba(255, 255, 255, 0) 15px, blue) bottom left;
}
#gradientsPaintover {
margin: 30px 0 0 0;
width: 200px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 255, 0, 0.4) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 0, 255, 1) 0) top right;
}
#clip {
background: red;
margin: 30px 0 0 0;
width: 200px;
height: 50px;
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
<div id="gradients"></div>
<div id="gradientsPaintover"></div>
<div id="clip"></div>
Serg's answer was helpful in solving the problem, but I thought'd I'd post a complete solution.
background: linear-gradient(290deg, blue 50%, darkblue 50%);
-webkit-clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
A note that this will not work at all in IE and you should pursue the SVG option in that case.
Edit: spending some more time with this, there's no reason you couldn't create pseudo elements before and after your div that contains a linear-gradient to add the 'cut edge' look.
See codepen here or CSS below.
/*div and interior BG*/
div {
width: 80%;
height: 300px; /*Make sure your content has a height specified*/
display: inline-block;
background: linear-gradient(290deg, blue 50%, darkblue 50%);
position: relative;
margin-left: 10%;
}
/*Shared styles across pseudo elements*/
div:before, div:after {
content: '';
width: 20%;
min-height: 300px; /*Fits psuedo element height to content*/
position: absolute;
display:inline-block;
}
/*Position and cuts for left side*/
div:before {
left: -9.9%;
background: linear-gradient(135deg, transparent 15px, darkblue 0) top left,
linear-gradient(45deg, transparent 15px, darkblue 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;
}
/*Position and cuts for left right*/
div:after {
right: -9.9%;
background:
linear-gradient(-135deg, transparent 15px, blue 0) top right,
linear-gradient(-45deg, transparent 15px, blue 0) bottom right;
background-size: 100% 51%;
background-repeat: no-repeat;
}
I want to create the background image of the attached div element with CSS (or SVG).
div.target {
background-image: linear-gradient(
to right bottom,
transparent 50%,
#00BCD4 50%
);
Background image of the div element I want to create with CSS (or SVG)
We can do this using multiple background image gradients like in the below snippet. The darker shade is assigned as the background color to the element. Then two background image layers created using gradients are placed in such a way that they produce the desired effect. Adding a partially transparent layer of white color above the darker shade will produce a lighter shade.
The background-size of the second layer should be smaller and its background-position should be at the left-bottom side of the element.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%);
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
Angled CSS gradients are known to produce slightly jagged (or uneven or rough) edges and that can be avoided by offsetting the color stop point a bit like in the below demo.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px)), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px));
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
You can do this with :before and :after pseudo elements.
div {
position: relative;
width: 500px;
height: 100px;
background: #0BC7BE;
}
div:after {
position: absolute;
border-style: solid;
border-width: 0 0 100px 500px;
border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
right: 0;
top: 0;
content: "";
}
div:before {
position: absolute;
border-style: solid;
border-width: 50px 0 0 70px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
left: 0;
bottom: 0;
content: "";
}
<div></div>
I have tried applying a color overlay with transparency to a background image, the background image is displaying and hopefully the code is okay for this, but if someone has a more efficient way of doing this please share.
When I try and apply the background-color with rgba values and transparency, nothing shows...
Any suggestions?
.call-to-action {
color: #fff;
background: url(images/cta-bg.jpg) no-repeat center center fixed;
background-color: rgba(255, 255, 255, 0.5) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 18px;
padding: 48px 12px;
text-align: center;
}
http://i.stack.imgur.com/8iNun.png
Use a non-changing gradient as a second background image
JSfiddle Demo
CSS
div {
width 200px;
height:200px;
margin: 25px;
border:1px solid grey;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 100%), url(http://lorempixel.com/output/city-q-c-200-200-1.jpg);
}
U also need to blend it :
background-blend-mode: multiply;
I'm trying to get a background for some text that is dual-tone, or the top half is one color and the bottom half is another. I have attached a link to a picture of what this should look like. Any ideas on how I can achieve this? Thanks, in advance, for the help!
Michael
http://michaelphillips.dropmark.com/12339/296433
Three ways come to mind:
One: Most Cross Browser (CSS1): Make a 1px wide image of the two colors, probably about 30px tall for each color, then
<span class="duoTone">wrap your text in a span</span>
and set the
.duoTone {background-image: url(path/to/your/img.jpg) left center repeat-x;}
Two: Less friendly to older browsers (CSS2): Same span wrapper as above but with this css (see fiddle).
.duoTone {
position: relative;
}
.duoTone:before,
.duoTone:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: -1;
background-color: #bbbbbb;
}
.duoTone:after {
top: auto;
bottom: 0;
background-color: #888888;
}
Three: Sleek, but only for newer browsers (CSS3): Same span code as #1 (see fiddle).
.duoTone {
background-color: #888888 ;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .4)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
}