Related
I just wanted to create a two color gradient using bootstrap mixin functions. So my gradient should be like this:
when using bootstrap gradient mixin I found there is no any function to match with my requirement. So I tried making my own gradient mixin and added it to bootstrap/less/mixins/grandients.less. But my function didn't do my job..
This is the gradient mixin I added to gradients.less
.vertical-custom(#start-color: #ed3537; #start-percent: 0%; #mid-color: #ed3537; #color-stop: 50%; #mid-color-2: #fb3e40; #color-stop-2: 50%; #end-color: #fb3e40; #end-percent: 100%) {
background-image: -webkit-linear-gradient(top, #start-color #start-percent, #mid-color, #color-stop, #mid-color-2, #color-stop-2, #end-color #end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, #start-color #start-percent, #mid-color, #color-stop, #mid-color-2, #color-stop-2, #end-color #end-percent); // Opera 12
background-image: linear-gradient(to bottom, #start-color #start-percent, #mid-color, #color-stop, #mid-color-2, #color-stop-2, #end-color #end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
//filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(#start-color),argb(#end-color))); // IE9 and down
}
I call it like this
#gradient.vertical-custom(#start-color: #ed3537; #start-percent: 0%; #mid-color: #ed3537; #color-stop: 50%; #mid-color-2: #fb3e40; #color-stop-2: 50%; #end-color: #fb3e40; #end-percent: 100%);
When I directly add pure CSS to my LESS file it working for me. But I am looking for a solution of creating a gradient mixin.
This is the pure CSS for my gradient:
background: #ed3537;
background: -moz-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3537), color-stop(50%,#ed3537), color-stop(50%,#fb3e40), color-stop(100%,#fb3e40));
background: -webkit-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%);
background: -o-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%);
background: -ms-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%);
background: linear-gradient(to bottom, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3537', endColorstr='#fb3e40',GradientType=0 );
Hope somebody may help me out.
Thank you.
Bootstrap's gradients are namespaced (see: http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors) and can be found in the less/mixins/gradients.less file.
A namespaced mixin should be called as follows:
#namespace > mixin();
The > is optional in this call.
Bootstrap provides you a .vertical-three-colors() mixin in the #gradient namespace which best matches your pure CSS.
You should calls this mixin as follows (for instance at the end of your bootstrap.less file):
div.gradient {
#gradient > .vertical-three-colors(#ed3537; #fb3e40; 50%; #fb3e40;);
}
The preceding outputs:
div.gradient {
background-image: -webkit-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-image: -o-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=0);
}
Demo: http://codepen.io/bassjobsen/pen/ogjeJE
Notice that your pure CSS has support for more browsers than Bootstrap's mixin. The out depends on the way you compile bootstrap. The default build process generate the above output.
When you compile the following Less code with lessc --autoprefix="last 20 versions" grsdient.less:
div.gradient {
background-color: #ed3537;
background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=0);
}
that will output:
div.gradient {
background-color: #ed3537;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ed3537), color-stop(50%, #fb3e40), to(#fb3e40));
background-image: -webkit-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-image: -moz-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-image: -o-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=0);
}
The -ms-linear-gradient prefix only targets the developers version of IE10 and there is no need to use that in your production code.
Of course you can also write your own mixins which outputs exactly the same as your pure CSS:
.vertical-custom(#start-color: #ed3537; #start-percent: 0%; #mid-color: #ed3537; #color-stop: 50%; #mid-color-2: #fb3e40; #color-stop-2: 50%; #end-color: #fb3e40; #end-percent: 100%)
{
background: #start-color;
background: -moz-linear-gradient(top, #start-color, #mid-color #color-stop, #mid-color-2 #color-stop-2, #end-color #end-percent);
background: -webkit-gradient(linear, left top, left bottom, color-stop(#start-percent,#start-color), color-stop(#color-stop,#mid-color), color-stop(#color-stop-2,#mid-color-2), color-stop(#end-percent,#end-color));
background: -webkit-linear-gradient(top, #start-color #start-percent,#mid-color #color-stop,#mid-color-2 #color-stop-2,#end-color #end-percent);
background: -o-linear-gradient(top, #start-color #start-percent,#mid-color #color-stop,#mid-color-2 #color-stop-2,#end-color #end-percent);
background: -ms-linear-gradient(top, #start-color #start-percent,#mid-color #color-stop,#mid-color-2 #color-stop-2,#end-color #end-percent);
background: linear-gradient(to bottom, #start-color #start-percent,#mid-color #color-stop,#mid-color-2 #color-stop-2,#end-color #end-percent);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(#start-color),argb(#end-color)));
}
now the following code:
div.gradient {
.vertical-custom();
}
outputs:
div.gradient {
background: #ed3537;
background: -moz-linear-gradient(top, #ed3537, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed3537), color-stop(50%, #ed3537), color-stop(50%, #fb3e40), color-stop(100%, #fb3e40));
background: -webkit-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);
background: -o-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);
background: -ms-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);
background: linear-gradient(to bottom, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=1);
}
Demo: http://codepen.io/bassjobsen/pen/LEpzEm
Make sure that the .vertical-custom mixin had been added inside the #gradient namespace in the gradients.less file when called with #gradient > .vertical-custom();
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've following image and trying to create gradient for that. I'm very beginner to gradient learning so please help me to get the css for this image. The work is more appreciated.
How about this?
Demo
background: #2ea2f5;
background: -moz-linear-gradient(top, #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3));
background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: -o-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: -ms-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: linear-gradient(to bottom, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0 );
If you want to create more gradients, refer to this source, will make your life much much easier
http://www.colorzilla.com/gradient-editor/
Is it possible to add gradiency on hover? I want to avoid images and use pure css3.
I have a simple box with
backgroundc-color: blue whihc has an icon.
I want to add a gradient effect on mouse over.
How can i get that gradient glow effect as the screen grab?
I am trying to get this effect below:
You can do gradients in CSS, although the definitions can get a bit verbose. Here's a solid CSS3 gradient creator.
Then just add a :hover to your link.
.your-link:hover {
// gradient here
}
This is how I would do it:
.link:hover {
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd));
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%);
}
Thats a complete example, you can just copy and paste and it should work :) enjoy!
Note that has your colours in there and its radial :)
Is this the kind of thing you are looking for?
Obviously use your own colors.
DEMO
This is the css:
.blah:hover {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF);
background-image: -moz-linear-gradient(top, #0198E1, #00FFFF);
background-image: -ms-linear-gradient(top, #0198E1, #00FFFF);
background-image: -o-linear-gradient(top, #0198E1, #00FFFF);
}
For best practices for css3, you can go to css3please.com. Just adding :hover to the class will give you what you need:
.box_gradient:hover {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
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