I have a LESS Mixin defined as follow, to obtain a gradient background
.gradient ()
{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, rgba(245,246,246,0) 0%, rgba(236,237,239,0) 10%, rgba(219,220,226,0.22) 30%, rgba(184,186,198,0.5) 55%, rgba(221,223,227,0.78) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,0)), color-stop(10%,rgba(236,237,239,0)), color-stop(30%,rgba(219,220,226,0.22)), color-stop(55%,rgba(184,186,198,0.5)), color-stop(80%,rgba(221,223,227,0.78)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-8 */
}
I need to be able to call this Mixin passing a parameter that can mantain color stops but apply a different direction of gradients, to obtain something like this (in CSS code):
background: linear-gradient(135deg, rgba(245,246,246,0), rgba(236,237,239,0) );
How to set Mixin in order to reach this result?
Thank you
To use a mixin with parameter, add your parameters starting with #, comma separated between the () after the mixinname. mixin(#paramter1:defaultvalue, #paramter2:defaultvalue).
So in your case:
.gradient (#degrees:0)
{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(#degrees, rgba(245,246,246,0) 0%, rgba(236,237,239,0) 10%, rgba(219,220,226,0.22) 30%, rgba(184,186,198,0.5) 55%, rgba(221,223,227,0.78) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,0)), color-stop(10%,rgba(236,237,239,0)), color-stop(30%,rgba(219,220,226,0.22)), color-stop(55%,rgba(184,186,198,0.5)), color-stop(80%,rgba(221,223,227,0.78)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#degrees, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#degrees, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(#degrees, rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient((#degrees - 90deg), rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-8 */
}
The second link of # seems useful to correct the degrees i use here background: linear-gradient((#degrees - 90deg).
The old -webkit-gradient() doesn't support degrees (AFAIK, see: https://www.webkit.org/blog/175/introducing-css-gradients/) and the filter doesn't too.
Related
There is a something i've wondered. I am using less my project and i wonder is it possible to do something like;
i want to do like this css result below;
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: #ffffff;
background-color: #3DA857;
background-image: -moz-linear-gradient(top, #3DA857, #3DA857);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3DA857), to(#3DA857));
background-image: -webkit-linear-gradient(top, #3DA857, #3DA857);
background-image: -o-linear-gradient(top, #3DA857, #3DA857);
background-image: linear-gradient(to bottom, #3DA857, #3DA857);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
i used like this with less
.menuFocusHover(#fontColor, #bgColor) {
text-decoration: none;
color: #fontColor;
background-color: #bgColor;
background-image: -moz-linear-gradient(top, #bgColor, #bgColor);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bgColor), to(#bgColor));
background-image: -webkit-linear-gradient(top, #bgColor, #bgColor);
background-image: -o-linear-gradient(top, #bgColor, #bgColor);
background-image: linear-gradient(to bottom, #bgColor, #bgColor);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
.dropdown-menu{
& > li {
> a {
&:hover, &:focus {
.menuFocusHover(#white,#baseColor);
}
}
}
}
.dropdown-submenu {
&:hover, &:focus {
> a {
.menuFocusHover(#white,#baseColor);
}
}
}
but result is;
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
color: #ffffff;
background-color: #3da857;
background-image: -moz-linear-gradient(top, #3da857, #3da857);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3da857), to(#3da857));
background-image: -webkit-linear-gradient(top, #3da857, #3da857);
background-image: -o-linear-gradient(top, #3da857, #3da857);
background-image: linear-gradient(to bottom, #3da857, #3da857);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: #ffffff;
background-color: #3da857;
background-image: -moz-linear-gradient(top, #3da857, #3da857);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3da857), to(#3da857));
background-image: -webkit-linear-gradient(top, #3da857, #3da857);
background-image: -o-linear-gradient(top, #3da857, #3da857);
background-image: linear-gradient(to bottom, #3da857, #3da857);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
How can i do as i want with less ?
You don't have to use a parent reference for .dropdown-menu{ & > li and you could also wonder why you nest the .dropdown > li > a selector.
But beside the above you could solve your question by using the extend feature:
#white: white;
#baseColor: blue;
.menuFocusHover(#fontColor, #bgColor) {
text-decoration: none;
color: #fontColor;
background-color: #bgColor;
background-image: linear-gradient(to bottom, #bgColor, #bgColor);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
.dropdown-menu{
> li {
> a {
&:hover, &:focus {
.menuFocusHover(#white,#baseColor);
}
}
}
}
.dropdown-submenu {
&:hover, &:focus {
> a {
&:extend(.dropdown-menu > li > a:hover);
}
}
}
Compiles into the CSS code like that shown beneath:
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: white;
background-color: blue;
background-image: linear-gradient(to bottom, blue, blue);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
You can read more about this kind of stuff at: https://github.com/less/less.js/issues/1075 and finally you should consider to not prefix your properties, but use the autoprefixer instead, see also: LESS transition mixin with prefixes
for some reason my body background gradients aren't showing up in IE10 except when the browswer is in quirks mode. IE9 and lower behave as expected. Code is below:
body {
font-family: 'Ubuntu', sans-serif;
background: rgb(252,254,252);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmNmZWZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlZjZmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg, rgba(252,254,252,1) 20%, rgba(222,246,254,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(20%,rgba(252,254,252,1)), color-stop(100%,rgba(222,246,254,1)));
background: -webkit-linear-gradient(45deg, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
background: -o-linear-gradient(45deg, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
background: -ms-linear-gradient(top, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
background: linear-gradient(45deg, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfefc', endColorstr='#def6fe',GradientType=1 );
-webkit-font-smoothing: antialiased;
}
The site is built using Zurb Foundation 4. Any help would be appreciated! I'm stumped.
I have used the following gradient background in CSS:
body {
margin:0px;
padding:0px;
border:0px;
font-family: Helvetica, Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
height:100%;
width:100%;
background: #f89623; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#150d03, endColorstr=#f89623); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#150d03), to(#f89623)); /* for webkit browsers */
background: -moz-linear-gradient(top, #150d03, #f89623); /* for firefox 3.6+ */
}
It works fine in IE, FF Chrome etc. on desktop computers, but the gradient stops when viewed on mobile devices.
The web address is: http://byoma.org/
Any advice would be appreciated. Thanks.
First of all, check out the browser compatibility:
But anyway, you should use the example below:
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}
Documentation: Mozilla doc
If it doesn't work, I use to resort to this web application: http://www.colorzilla.com/gradient-editor/
Just a (hopefully) quick question about LESS Mixins:
Could these two mixins be combined somehow?, since they share a lot of the same information, just one adds an extra color.
.gradient-top(#color-1, #color-2){
background-color: #color-2;
background: -webkit-linear-gradient(top, #color-1, #color-2);
background: -moz-linear-gradient(top, #color-1, #color-2);
background: -ms-linear-gradient(top, #color-1, #color-2);
background: -o-linear-gradient(top, #color-1, #color-2);
background: linear-gradient(top, #color-1, #color-2);
}
.gradient-middle(#color-1, #color-2, #color-3){
background-color: #color-2;
background: -webkit-linear-gradient(top, #color-1, #color-2, #color-3);
background: -moz-linear-gradient(top, #color-1, #color-2, #color-3);
background: -ms-linear-gradient(top, #color-1, #color-2, #color-3);
background: -o-linear-gradient(top, #color-1, #color-2, #color-3);
background: linear-gradient(top, #color-1, #color-2, #color-3);
}
LESS supports accessing all the arguments passed to a mixin via the #arguments variable:
.gradient(#color-1, #color-2, ...) {
#gradient-stops: ~`"#{arguments}".slice(1, -1)`;
background-color: #color-2;
background: -webkit-linear-gradient(top, #gradient-stops);
background: -moz-linear-gradient(top, #gradient-stops);
background: -ms-linear-gradient(top, #gradient-stops);
background: -o-linear-gradient(top, #gradient-stops);
background: linear-gradient(top, #gradient-stops);
}
We need the selector interpolation (~) and the inline JavaScript evaluation (using backticks) to preserve the commas - otherwise, we would get background: linear-gradient(top, #color-1 #color-2 #color-n);, which is, of course, incorrect.
The other thing this mixin does is accept 2 or more arguments via the "rest" symbol (...) - this lets us call the mixing with three colors as well as two:
.gradient(#FFF, #CCC, #000) // A valid invocation of the mixin
I want my page to have a gradient color, going from dark on the left age to bright in the middle, and back to dark at the right edge. I've seen some examples for creating gradients, but I don't know see where in the CSS the size of the pattern is being set, and the pattern is repeating too quickly for my taste.
As an example, here's some CSS:
html {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
...that I found here: http://css-tricks.com/css3-gradients/
And here's a jsfiddle you can run that has that:
http://jsfiddle.net/clayshannon/VLXbu/
It can't be a fixed size, because of the variance is screen sizes, between phones and desktops, in particular. Is there a way to accomplish this using %s of screen width?
Try
html {
background: #2f2727; /* Old browsers */
background: -moz-linear-gradient(top, #2f2727 0%, #1a82f7 49%, #1a82f7 49%, #2f2727 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2727), color-stop(49%,#1a82f7), color-stop(49%,#1a82f7), color-stop(100%,#2f2727)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* IE10+ */
background: linear-gradient(to bottom, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2727', endColorstr='#2f2727',GradientType=0 ); /* IE6-9 */
min-height: 100%; height: auto !important; height: 100%;
}
http://jsfiddle.net/pepean/hSjdg/2/