I'm having a heck of a time trying to combine a diagonal linear gradient and regular background-image together plus apply it only to the second h3 element; here is what I've got:
HTML
<div id="something">
<div><h3>...</h3></div>
<div><h3>...</h3></div>
<div><h3>...</h3></div>
<div><h3>...</h3></div>
</div>
CSS
#something h3:nth-child(2) {
background: linear-gradient(135deg, rgba(221,221,221,1) 0%,
rgba(221,221,221,1) 95%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%),
#ddd url(/assets/img/bullet.png) left 12px no-repeat;
}
I've had the nth-child selector working on other stuff previously before and this gradient is from an online generator, what am I missing here?
Looks like the selector should be:
#something > div:nth-child(3) > h3
https://jsfiddle.net/db2n5r63/1/
linear-gradient() takes the place of url(). In fact they are two delarations for the same background. One will be chosen. So define more precisely what you want and perhaps chose a span inside H3 to achieve the effect you want.
Your nth-childwont work beacuse the h3 tags are wrapped in a div so can you do something like this:
#something div:nth-child(2) h3
Now to make the background work we combine the background image url and the gradient. You can define the background url first then do a comma and define the gradient:
This stackoverflow question answers that in more depth.
#something div:nth-child(2) h3{
background: url("http://lorempixel.com/300/300/") no-repeat,linear-gradient(135deg, rgba(221,221,221,1) 0%,
rgba(221,221,221,1) 95%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%);
background-position-x: 12px;
}
I've made an Example for you to see this in action.
Related
I'm trying to set up a select element with multiple backgrounds (one image, and one linear-gradient). It worked while I was developing, but for some reason it stopped working when it was pushed to production.
Here's the code I started with (in SCSS):
$select-arrow-uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=';
select{
background-color: #f5f5f5;
background-image: url("#{$select-arrow-uri}");
background-image: url("#{$select-arrow-uri}"), -webkit-linear-gradient(bottom, #e5e5e5 0%, #f5f5f5 100%);
background-image: url("#{$select-arrow-uri}"), linear-gradient(#e5e5e5 0%, #f5f5f5 100%);
background-position: 95% center;
background-repeat: no-repeat;
}
and this is how it is appearing in the browser:
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=) 95% center no-repeat,
linear,to bottom,#e5e5e5,#f5f5f5;
When I remove the background-image rule with linear-gradient, it works fine. It doesn't have any problems with the -webkit-linear-gradient line, just the linear-gradient line.
Is there a syntax issue? Could Sass be compiling weird? Is it trouble with the URI string?
Please help! Thanks!
Figured it out. I have the Bourbon library loaded, and there is a function for linear-gradient that is made to work with the background-image mixin, and that was being used without using the background-image mixin. I switched to the background-image mixin to get it to work, but I'll probably report this to them. Not cool Bourbon.
HTML :
<div class="blue red"></div>
Blue : If a gradient background from transparent to blue
Red : If a gradient background from red to transparent
Why we can't do something like :
.blue {
background: inherit , background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}
.red {
background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%) , inherit;
}
Instead of :
.blue {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}
.red {
background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}
.blue.red {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%) , linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}
Thats ok if i use only 2 multiple classes, but if I have blue,red,yellow,black,white, bla bla bla.... so you know it bored.
I wonder how to use multiple background with multiple classes ?
Any CSS trick ?
Playground : http://jsfiddle.net/5gJyr/
Expand :
I will use inherit property, gives slot(s) for them
If i have more colors I will add them after like
.red {background: red,inherit,inherit;}
.blue {background: inherit,blue,inherit;}
.yellow {background: inherit,inherit,yellow;}
so I can add given multiple classes like
<div class="red yellow">
Simply put, there is no 'easier way'
inherit works by taking the parent property
The inherit CSS-value causes the element for which it is specified to
take the computed value of the property from its parent element. It is
allowed on every CSS property.
The only way to apply multiple background values is to concatenate them with a comma,
More from MDN
With CSS3, you can apply multiple backgrounds to elements. These are
layered atop one another with the first background you provide on top
and the last background listed in the back. Only the last background
can include a background color.
.myclass {
background: background1, background 2, ..., backgroundN;
}
You cannot add an additional background with an additional class. CSS properties have exactly one value, and they do not accumulate. Even with properties like background where multiple values are permitted, those multiple values are not harvested and aggregated from all applicable classes, they are the ones specified in the one, specific rule that defines background according to the cascade.
I am trying to overlay a white-black linear gradient to an existing image. I have it set up like below; however, only the gradient layer is showing. Can someone point out where I went wrong?
JS Fiddle: http://jsfiddle.net/6nJJD/
HTML
<div>hello</div>
CSS
div {
background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
color:#544a46;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
height:500px;
width:500px
}
try to change your gradient colours using RGBA values
background:
linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(0,0,0, 1) 100%),
url(...);
Example fiddle: http://jsfiddle.net/J7bUd/
Try also changing rgba(255,255,255, 0) with transparent: the result is slightly different but probably it's exactly what you're trying to achieve
You can accomplish this using RGBA in the gradient.
http://jsfiddle.net/6nJJD/3/
CSS:
linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)
You can modify the "0.65" value to attain the desired transparancy.
For Creating More Gradients as you like you can visit Ultimate Css
Gradient Generator
Hope This HElps
like this?
http://jsfiddle.net/6nJJD/2/
linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, #000000 100%)
I've styled some list items (li) using CSS. The style's applied to the a selector within the li. It works great in Chrome, IE and Safari but not Firefox:
<ul class="organisations">
<li class="community-care"><a href="http://adviceglos.org.uk/organisation-type/community-care/" title="View all posts in Community Care" >Community Care</a></li>
</ul>
Here's the CSS:
ul.organisations li.community-care a {
background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#5CBCC4),color-stop(100%,#38939B));
background-image: -webkit-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -moz-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -o-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -ms-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: linear-gradient(#5CBCC4 0,#38939B 100%);
background-color: #5CBCC4;
border: 1px solid #318188;
border-bottom-color: #245E63;
}
You have a syntax error in your stylesheet. In particular, line 529 is:
background-image: -o-linear-gradient((#eeeeee 0,#ccc 100%) !important;
Note that you have one more open paren than close paren. In a spec-compliant CSS parser (which excludes WebKit), this causes the UA to treat everything up to the matching close paren as part of the background-image value. In this case, that's all the rest of the stylesheet, so all the rules after this point are ignored.
Further note that Firefox did report this problem in its error console, which is how I found it...
Apply -moz for firefox like this:
background: -moz-linear-gradient(#BF698C 0px, #93506D 100%) repeat scroll 0 0 transparent;
This sass snippet:
$red: #f00
$lightred: lighten($red, 50%)
body
background: $lightred
Is parsed to:
body {
background: white; }
If you instead do 45% instead of 50%, it seems to work as expected:
$lightred2: lighten($red, 45%)
...
background-color: #ffe5e5
Why is this turning into white instead of the expected 50% of red?
You can see it in action here http://tinkerbin.com/OefelPoi
(Note - the save function seems to have a bug, on the css area, select Sass Old Syntax again, and rerun)
Update -
Ends up what I wanted was to mix in white with the original color to get a tinted shade:
mix($color,white, 10%)
Because lighten function is described on HSL colors and your red color #f90 is translated as hsl(0, 100%, 50%)
so lighten($lightred, 50%) is equal to hsl(0, 0, 100%), or white