Related
Is there a way to make gradient like this with css only?
I've tried to use background-position tag
But it didn't work for me probably because I don't know how sprites work.
It's a straightforward radial gradient. This should put you on the right track.
circle 150px says it's a circular gradient with radius 150px
at 25% 33% defines the origin (I've eyeballed it 1/4 from the left and 1/3 from the top) You can also use px or other lengths.
Finally give the colors from the center out.
div{
height: 200px;
border: 1px solid;
background-image: radial-gradient(circle 150px at 25% 33%, white, yellow, lightyellow, aqua);
}
<div></div>
Radial gradients are quite easy. Here's an example -
#gradient {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
Documentation here - http://www.w3schools.com/css/css3_gradients.asp
three{
width:100%;
height:300px;
border:1px solid white;
background-image:radial-gradient( circle 80px at 25% 25% , rgb(255,255,255) 10%,rgba(251, 255, 185, .7), rgb(255,255,255) 60% 70%,rgb(2,153,218) 200%);}
If you want , change its position as your wish.
I ran into a problem using a linear-gradient on a particularly large element.
On smaller elements, a hard edge can be achieved with the following:
background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);
However when the element has a very large height, the edge is soft. You can see in the following image and example below, the second version has a soft edge when the element is very large and the same gradient is applied.
I have tried many variations on the linear gradient and have been unable to achieve a hard edge on the large version. Is there a way to apply a gradient with a hard edge on a large element?
HTML example:
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
height: 100px;
}
<div></div>
<div></div>
Edit
The goal of this gradient is for use with another background image, so I prefer techniques that are compatible with the following (don't cover the image):
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
<div></div>
Edit 2
Thanks to #Tarun, this appears to be browser related. The above image is a screenshot from Chromium 45. Safari and Firefox appear to render correctly.
Edit 3
There is an open bug report for chromium about this issue.
I've found an alternative using gradients to achieve the same effect, however I think it should be possible to achieve this with 1 gradient, so I consider this a work-around.
The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the working snippet:
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
background-size: 100% 20px, 100%;
}
div:first-child {
height: 100px;
}
<div></div>
<div></div>
This works for me.
background: linear-gradient(to bottom, black 0% ,black 20% ,green 20% ,green 100%);
edit: I've tried to do exactly what you're doing in the question, and I'm getting a hard edge on both boxes. Your problem must be related to your browser.
edit 2: confirmed
You could use box shadow for the same effect.
div {
height: 5000px;
}
div {
background: #0f0;
box-shadow: inset 0 100px 0 0 #000;
}
<div></div>
You need to repeat each color, and each percent rate of linear-gradient in a tricky, but expressive way. Let's see it in a six colors sample to understand the principle.
This approach works for any size of block.
div {
height: 100px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image:
linear-gradient(90deg,
red,
red 17%,
orange 17%,
orange 34%,
yellow 34%,
yellow 51%,
black 51%,
black 68%,
green 68%,
green 85%,
blue 85%);
}
<div></div>
You could use a bit more codespace and set up your gardient like following:
background: #4c4c4c;
background: linear-gradient(to bottom, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
The solid background setting is there to make sure your page is showing some color if the browser somehow fails to support this type of gardient or its filter.
It is also preferred to include -moz, -o and other browser-based fixups to make sure.
Wired's mobile view (set your user-agent to iOS Safari to see it on desktop) features an elegant twist to the standard underlined hyperlink style:
I assumed this was achieved purely by CSS without external graphics, but no:
background-image: url(http://cdn.mobify.com/sites/wired/production/i/link-bg.png);
background-size: 5px 24px;
I'm well aware of using the border property to create custom weighted underlines but am unable to create the line undercut as a margin-bottom offset cuts off when reaching the baseline of the text.
Can this style be achieved using only CSS?
You can apply an inset box-shadow property:
a {
text-decoration: none;
color: #000;
box-shadow: inset 0 -4px 0 #c0e6f7;
}
jsFiddle demo
The first value is inset, which makes the box-shadow go inward, opposed to outwards (for the lack of a better way to put it) and the second value 0 is the x-value (the box shadow from side to side). The next -4px is the y-value (from top to bottom). The third is 0 so that there is no "blur" effect on the shadow (thus giving you a solid border effect) and then the color value comes next. :)
You can do this with a linear gradient and background size.
Demo
a {
text-decoration: none;
color: inherit;
background: linear-gradient(to bottom, rgb(227,244,251), rgb(175,221,243)) bottom repeat-x;
background-size: 25%;
}
I like #JaceCotton's answer but it is lacking some small details that WIRED has in their image version. Details such as a slightly darker blue line along the bottom on the underline and a soft top to the underline.
These details may not be important or that noticeable but I think the tiny details really help along the marker underline effect of the original WIRED version.
Just add this css to any a tag to see the effect (demo):
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(198,232,248,0) 75%, rgba(192,230,247,1) 83%, rgba(192,230,247,1) 94%, rgba(184,226,245,1) 95%, rgba(184,226,245,1) 97%, rgba(184,226,245,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(75%,rgba(198,232,248,0)), color-stop(83%,rgba(192,230,247,1)), color-stop(94%,rgba(192,230,247,1)), color-stop(95%,rgba(184,226,245,1)), color-stop(97%,rgba(184,226,245,1)), color-stop(100%,rgba(184,226,245,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00b8e2f5',GradientType=0 ); /* IE6-9 */
I'm trying to wrap my website differently so that the background is divided in 2. The gray part which is the main background but also a white part which is smaller and wrap the main-content.
Basically I'd like this to look like this.
I'm not quite sure how to add the images to create that shadow effect and I also don't know how to create that white wrapper.
Right taken a look. Let me know the outcome.
.main-content{
background:#FFFFFF;
width:90%;
margin:0% 4% 0% 5%;
}
easy solve method:
.main-content{
-webkit-box-shadow:0px 0px 3px 5px #000000;
-moz-box-shadow:0px 0px 3px 5px #000000;
-o-box-shadow:0px 0px 3px 5px #000000;
box-shadow:0px 0px 3px 5px #0000000;
}
Or the gradient you asked for:
.main-content:before{
background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
content:'';
z-index:98;
position:relative;
width:105%;
height:400px;
left:-2%;
}
But this gradient method only really works for browsers that support the 'webkits' and their updated counter parts. But I haven't really tested it so you might want to play around with it etc. And if you don't like it try the box-shadow method :)
You'll need to adjust the element div.bann to correct some positioning errors. theres a in the element because the element is taller than the image.
.bann{
width:90%;
height:auto;/*probably can remove this*/
margin:0% 4% 0% 5%;
padding:0px;
}
.bann>img{/*not required if you haven't adjusted the image. You can remove this completely.*/
width:100%;
height:auto;
}
I wouldn't recommend using an image. Too large. Heres two methods. Don't forget that rgba() doesn't work in [lte ie 8] (I think?). Also I've used the :before pseudo so that it's placed before the element but you may find this wouldn't be necessary. But using the pseudo element you can then position your effect.
#element:before{
background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
content:'';
}
#element{
background:#CCCCCC;
}
And for ie (I would really recommend it. To be honest I wouldn't bother with ie lol) use only hex colours using your background colour for the body.
#element{
background:linear-gradient(top,#000000 0%, #CCCCCC 100%);
}
Besides lte ie 9 can't use the linear-gradient property anyway!
Another method is to use box-shadow but this wouldn't achieve the transparent gradient you're looking for.
#element{
box-shadow:0px 0px 3px #000000;
}
I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can't simply be a graphic (even stretched one), since the width of elements may vary significantly.
The desired effect:
What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right"> </div></div> to every element to be underlined.
The CSS is following
#navmenu li div
{
height: 1px;
background-image: url('images/1000glight.png');
background-repeat: no-repeat;
}
#navmenu li div.right
{
width:35px;
float: right;
background-position: -965px 0;
background-image: url('images/1000glight.png');
background-color: #212121;
}
This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.
Any ideas how could I improve it, keeping pure CSS?
Using an approach similar to this, with the gradient being the background image of a wrapping div with padding-bottom to show only the lower part of the background:
<div class="wrap">
<div class="content">Some Text!</div>
</div>
And CSS:
.wrap {
float: left;
padding-bottom: 5px;
/* IE10 */
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Opera */
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}
.content {
background-color: #fff;
}
Works, but does omit IE<10; which might be do-able with some kind of filter, but that'll take more reading before I can post such.
JS Fiddle demo of current implementation.
Unfortunately the DX.transform option doesn't appear able to allow for multiple stops that the above uses, reference: Simulating color stops in gradients for IE
So, perhaps you'd have to use a background-image fallback for IE<10, which is far less than ideal.
Use the border-image gradient CSS3.
div {
width:200px;
border-style:solid;
border-width:15px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}
Demo here.
This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.
You can use an empty div with a CSS3 Gradient... check out the presets here: http://www.colorzilla.com/gradient-editor/ - of course you'll have to change the orientation of the gradient. I use this a lot for similar issues. It's a great alternative to images.