Question, if I wanted to create gradient lines that fade out on the top and bottom, similar to the lines seen on AT&T's drop down menu that separate the menu items, how would I go about that? I want to create a similar effect on a menu that I am coding, and I would prefer not to use images. Is there a way to achieve this in CSS? Help much appreciated! Thanks.
Microsoft CSS Gradient is a GUI you can use. just copy the CSS into your code:
Example:
#div {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}
You can create a div with 1px width then assign a gradient on it. Like that :
.line{
width:1px;
height : 25px;
margin : 0 5px;
background: rgb(125,185,232);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );
}
Fiddle : http://jsfiddle.net/jPnXz/
Here a CSS gradient generator (i used it for the CSS) : http://www.colorzilla.com/gradient-editor/
Great documentation on CSS3 Gradients
http://www.css3files.com/gradient/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
Gradient Generators
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com
http://www.cssmatic.com/gradient-generator
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
You have repeating-gradient as well for this :
http://codepen.io/anon/pen/zbLkl
background:repeating-linear-gradient(
top ,
white 0,
white 1em,
turquoise 1em,
turquoise 1.2em) 0 2.4em;
line-height:1.2em;
Set equal line-height to gradient , so gradient will follow font-size.
the time to dig it, an old example with squares. and background-size.http://dabblet.com/gist/4750827
background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>
Related
I have an image on which I have added a top border of 20px.
I want to color that top-border in a way that it shows a linear gradient.
I have tried in different ways without success.
Could you guys help me out? This is the code (html and css):
<div class="logo"><img src="images/tiger.jpg"></div>
.logo img {width:100%;top-border:20px solid;}
Please try this. I have made border to use before class.
.logo{position:relative;width:200px;}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.logo:before{
/* IE10+ */
background-image: -ms-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Opera */
background-image: -o-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffb76b), color-stop(51, #FF7C00), color-stop(100, #ff7f04));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
/* W3C Markup */
background-image: linear-gradient(to right, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
position:absolute;
content:"";
left:0;
right:0;
width:100%;
height:20px;
top:0;
}
<div class="logo"><img src="https://dummyimage.com/200x200/000/fff&text=sample+image" alt=""></div>
You can add a colored top border like this;
border-top: 20px solid #cccccc;
Instead of #cccccc, you can give the desired color
PROBLEM
I am trying to combine the CSS3 gradient feature along with a background-image sized specifically and placed specifically in the div. Strange thing is that the background-size property not only applies the size to the image, but also the gradient. However I need to keep the image 30px and apply the graident all the way. Any help would be welcomed?
Thanks in advance
CSS
.accordian-head {
height: 50px;
padding: 10px 10px;
background: #ADADAD;
background-image: url(../img/plus-icon.png) 97% 50%;
background-position:97% 50%;
background-repeat:no-repeat; /* fallback */
background-size:30px;
background-image: url(../img/plus-icon.png), -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD)); /* Saf4+, Chrome */
background-image: url(../img/plus-icon.png), -webkit-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Chrome 10+, Saf5.1+ */
background-image: url(../img/plus-icon.png), -moz-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* FF3.6+ */
background-image: url(../img/plus-icon.png), -ms-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* IE10 */
background-image: url(../img/plus-icon.png), -o-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Opera 11.10+ */
background-image: url(../img/plus-icon.png), linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* W3C */
}
You have two layers, one for the image and one for the gradient. When you specify one background-size value, it applies to both layers.
To stretch the gradient you need to explicitly give it its own size:
background-size:30px, 100%;
What you could do is use nested divs, and apply the gradient on top.
<div class="gradient">
<div class="image" style="background-image:url(../img/plus-icon.png)">
</div>
</div>
.gradient {
background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD));
/* etc */
}
.image {
background-size: 30%;
}
I have created a simple css bar with colour stops using the following:
#testing{
width:100%;
height:40px;
background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%);
background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: linear-gradient(top, #034a96 50%, #eab92d 51%);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
What I would like to do is have the first 80% of the bar is have a gradient that goes from the top with colour #034a96 to #0663c7 and then just that gradient colouring 50% of the bar. Then with the other 51% I have another gradient from the top with #eab92d to #c79810. What I'm asking is if it is possible to have multiple gradients with in each other eg:
background-image: -webkit-linear-gradient(left, top #034a96 to #0663c7 50%, top #eab92d to #c79810 51%);
Or something along those lines. I hope I'm being clear with everything. Thanks in advance
Yes, you can.
One simple example (not exactly your colourset, but it shows the plan):
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
This code doesn't create multi-step gradients in IE.
Up to IE9, these aren't possible at all (only simple gradients), but IE9 supports SVG data. It's a bit complicated to write, but you should have a look at http://www.colorzilla.com/gradient-editor. It's an online-tool for creating CSS code for gradients. It also supports SVG gradients for IE9.
I got it to display exactly how I want it in Firefox, but with every other browser there seems to be some problems. This website isn't exactly public (as in, no one knows of it) yet as I'm still trying to get things to display properly, but the URL is: http://www.mixbin.net (just view:source for the code - there's nothing server side interfering)
Firefox: Perfect.
Chrome: Perfect except the bottom margin is being ignored in the .content class.
Opera: Perfect except the bottom margin is being ignored in the .content class.
Safari: Displays gradient properly but forces a refresh as soon as you scroll halfway down the page.
Internet Explorer: Displays gradient properly but .content div is cut off where the gradient stops.
background:linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background:-moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background:-ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background:-o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background:-webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /*IE6-9*/
No images wanted. So please don't reply with, "just make a background image".
Update 2: Everything (including IE), is now working. I switched these two lines from:
background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));
To:
background:-webkit-linear-gradient(top, #000000, #353535);
background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
If your CSS for the gradient is:
background: linear-gradient(top, #000000 0%, #353535 512px);
there will be no need for a <div> with height 512px. Unfortunately, this solution works for every browser except IE.
Back to your extra background <div> approach. I copied and modified your code a little. This works for all browsers.
body {
background: #353535;
}
.content {
background-color: white;
height: 1000px;
margin: 20px auto;
width: 300px;
z-index: 2;
position: relative;
}
#background {
position: absolute;
top: 0;
height: 512px;
width: 100%;
background: linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background: -ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background: -o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0); /*IE6-9*/
}
<body>
<div id="background"></div>
<div class="content"></div>
</body>
This might not be the solution you are looking for but, since you will have to use hacks to make it looks the same on different browsers, why wont you use an image of the gradient and repeat it in the background.
If your background gradient is 300px, make the image with 300px height and 1px width (image size wont be over 1KB), and repeat it in your background
background: url('bg_gradient.jpg') repeat-x 0px 0px;
It will work on all the browsers without any hassle;
Is there any way to create a gradient background using nothing but CSS?
You can see an example of what I want to achieve on this website.
Use this in your CSS:
background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
See also:
The specification
The MDN documentation
Simple and easy to make. Try this link
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%);
Use background-image with linear-gradient() or radial-gradient().
.linear-gradient {
background-image: linear-gradient(to bottom, #000077, #65A5FF);
}
.radial-gradient {
background-image: radial-gradient(#000077, #65A5FF);
}
div {
width: 100%;
height: 200px;
}
<h1>Linear gradient</h1>
<div class="linear-gradient"></div>
<h1>Radial gradient</h1>
<div class="radial-gradient"></div>
According to caniuse.com, CSS gradients are supported by all major browsers. If you have to support IE <= 9, use plain-color or image background fallback. If you have to support Android Browser <= 4.3, also use prefixed version (-webkit-linear-gradient).
.bckgrnd {
background-color:Green;
background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
background-image: -webkit-linear-gradient(top, Green, Yellow);
background-image: -moz-linear-gradient(top, Green, Yellow);
background-image: -ms-linear-gradient(top, Green, Yellow);
background-image: -o-linear-gradient(top, Green, Yellow);
}
Try this website.
http://www.colorzilla.com/gradient-editor/
But there are also images and other things on this website, so if you want to copy the style, look how they have done it and try to implement it on your own ! There is also a website which has pretty neet background pattern's which, combined with gradients look absolutely rich and beautiful:
http://subtlepatterns.com/
A simple sample code for gradients which will be displayed in every browser:
background: rgb(243,226,199);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)));
background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );
background-image: linear-gradient(to bottom, #FFFFFF, #FAFAFA);
or
background: linear-gradient(#FFFFFF, #FAFAFA);
Add two div tag and give background color link this
<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>
This is not exact syntax this is an idea that how u can do