I want to nest "background" property. Can I do this in SCSS ?
background:{
#efefef;
linear-gradient(top, $backcolor 0%, #bbbbbb 100%);
-moz-linear-gradient(top, $backcolor 0%, #bbbbbb 100%);
-webkit-linear-gradient(top, $backcolor 0%,#bbbbbb 100%);
}
I'm not quite clear on what you mean by "nest", but i'm going to assume that means adding prefixed versions of background: linear-gradient. You can accomplish that with a simple mixin, or using Compass:
mixin
#mixin gradient ($solid, $start, $stop) {
background: $solid;
background: -moz-linear-gradient(top, $start 0%, $stop 100%);
background: -webkit-linear-gradient(top, $backcolor 0%, $stop 100%);
background: linear-gradient(top, $start 0%, $stop 100%);
}
body {
#include gradient(#efefef, $backcolor, #bbbbbb);
}
compass
body {
#include background(linear-gradient(top, $backcolor 0%, #bbbbbb 100%), #efefef);
}
I'd highly recommend compass if you are going to be doing a lot of work in SASS.
Related
Hello everybody I have a problem with my code under, background-attachment fixed work only when I remove transform: rotate() in Firefox and IE instead working great in Chrome.
This is my HTML
<div class="para">
</div>
This is my css
.para{
z-index: -100;
height: 160vh;
width: 100%;
margin-top: -40rem;
background: url("back1.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
-webkit-clip-path: polygon(0 22%, 100% 0, 100% 79%, 0% 100%);
clip-path: polygon(0 22%, 100% -800px, 100% 60%, 0% 100%);
transform: rotate(10deg);
}
So for being clear when I remove translate property is working everywhere when I add it is working only in chrome.
SCSS
.footer-color{
#include linear-gradient(lighten(black, 20%), black);
}
#mixin linear-gradient($fromColor, $toColor) {
background-color: $toColor;
background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor));
background-image: -webkit-linear-gradient(top, $fromColor, $toColor);
background-image: -moz-linear-gradient(top, $fromColor, $toColor);
background-image: -ms-linear-gradient(top, $fromColor, $toColor);
background-image: -o-linear-gradient(top, $fromColor, $toColor);
background-image: linear-gradient(top, $fromColor, $toColor);
}
its not specifying where it is coming from but i believe it has something to do with the .footer-color. Not 100% sure how to fix as i said this is my first attempt at anything using it.
Place your mixin before your .footer-color class and it should work fine
See image:
The grayed out area is actually an image.
How do i find the closest colors to create a similar color using css3?
I find the following colors the closest but not sure if they are a match since I don't know how to use them in CSS3:
5A5757 - Top
585555 - Bottom
Put this code into your css and set height.
background: #5a5757; /* Old browsers */
background: -moz-linear-gradient(top, #5a5757 0%, #5a5757 15%, #2b4244 15%, #2b4244 31%, #585555 31%, #585555 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5757), color-stop(15%,#5a5757), color-stop(15%,#2b4244), color-stop(31%,#2b4244), color-stop(31%,#585555), color-stop(100%,#585555)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5a5757 0%,#5a5757 15%,#2b4244 15%,#2b4244 31%,#585555 31%,#585555 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5a5757 0%,#5a5757 15%,#2b4244 15%,#2b4244 31%,#585555 31%,#585555 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5a5757 0%,#5a5757 15%,#2b4244 15%,#2b4244 31%,#585555 31%,#585555 100%); /* IE10+ */
background: linear-gradient(to bottom, #5a5757 0%,#5a5757 15%,#2b4244 15%,#2b4244 31%,#585555 31%,#585555 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5757', endColorstr='#585555',GradientType=0 ); /* IE6-9 */
If you look at http://jsfiddle.net/q2cFb/1/, you can see that both #b and #a is not working on Firefox (13.0.1). Why is that? It works on Chrome (with different syntax, but same colors).
Do I need to have some specific colors for gradient to work? Both #a and #c are using two colors, but #a isn't working.
HTML:
<div id='c'></div>
<div id='b'></div>
<div id='a'></div>
CSS:
#c {
background-image: -moz-linear-gradient(center bottom , #131315 37%, #272727 75%);
}
#b {
background-image: -moz-linear-gradient(center bottom , #242424 80%, #1E1E1E 58%, #191919 20%);
}
#a {
background-image: -moz-linear-gradient(center bottom , #242424 80%, #191919 20%);
}
The problem is that your percentages aren't in increasing order. See the MDN docs:
Color-stops must be specified in order.
try colorzilla it automatically does the css gradient coding for you.
example format for gradient for multibrowser
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
http://jsfiddle.net/nicktheandroid/PXdXr/1/
I would like to animate between 2 different gradients, have one fade in on hover.
My example shows what should happen, but it happens instantly, i want it to fade between them.
Just for reference here on SO(this is all in the jsfiddle):
.outerBorder {
display:inline-block;
/*border: 3px solid #4d4d4d;*/
background: #4d4d4d; /* Old browsers */
background: -moz-linear-gradient(top, #4d4d4d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* W3C */
-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;
}
.outerBorder:hover {
display:inline-block;
/*border: 3px solid #4d4d4d;*/
background: #d6f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6f9ff), color-stop(100%,#9ee8fa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* W3C */
}
.innerBox {
width:300px;
height:200px;
margin:5px;
background-color:#fff;
}
As Rick mentioned, there is no support for gradient animation yet.
However, you can still apply a semitransparent gradient on top of the CSS transition and then just animate the background color (the effect will be very similar):
.outerBorder {
display:inline-block;
/*border: 3px solid #4d4d4d;*/
-webkit-transition: background-color 1000ms ease-in-out;
-moz-transition: background-color 1000ms ease-in-out;
-o-transition: background-color 1000ms ease-in-out;
transition: background-color 1000ms ease-in-out;
background-color: #4d4d4d;
}
.outerBorder:hover {
background-color: #b4d7dd;
}
.innerBox {
width:300px;
height:200px;
padding:15px;
background-color:#fff;
background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255, 0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */
}
JSFiddle: http://jsfiddle.net/NAVYX/
There isn't support for gradient animations yet. As you are using jQuery you could write this functionality using cssHooks, or simpler, have one gradient on top of the other, then animate the opacity to simulate the fade.