How can I apply a gradient over a background with CSS? - html

I'm getting my feet wet with CSS3 and I'm doing my best to convert a Photoshop comp to HTML.
I have multiple instances of a background (using background url) with differing heights and I'd like to apply a gradient on top of that background using rgba gradients (using the alpha channel). I'd obviously like to stay away from a static background image with the gradient built into the pixels.
Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?
I'm guessing if I can't do it in one element, I would put a container inside my background element, float it and make the width and height fill the background element, but that seems pretty messy.
Any advice is appreciated! Thanks for your time!
Here are two examples of the same background and gradient but at different heights: a nav and a footer
The code would look something like this:
<nav>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</nav>
style:
nav {
background : url('repeating-background-image.png') repeat;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
}

Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?
Yes: CSS3 allows multiple background images, separated by commas.
As gradients behave like images, you can use them in conjunction with background images:
div {
width: 400px;
height: 400px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome10+,Safari5.1+ */
}
http://jsfiddle.net/kReNL/
This doesn't work in IE 8 or earlier, but then neither do CSS gradients. (Although Microsoft's filter property works in IE 8 and earlier, and that does support gradients with alpha transparency - see Can you use rgba colours in gradients produced with Internet Explorer’s filter property?).

http://jsfiddle.net/8gvZM/
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
and make a div above it with the background url on a lower opacity.
Is that what you mean?

Use CSS :before to create an additional (pseudo) element sitting on top of the original element.
The original element would have the image background, and the :after element would have the gradient, with an opacity setting so that the original element shows through it.
div {
width: (whatever size you want to set it to)
height: (ditto)
position:relative;
background:url('mainImage.jpg');
z-index:5;
}
div::before {
content:'';
width: .... (same as main div)
height: .... (same as main div)
position:absolute;
z-index:-3;
display:block;
opacity:0.5;
background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}
I've done a jsFiddle for you to demonstrate: see here
Hope that helps.
[EDIT] Changed the details of the answer above slightly in response to OP's comment. Now using :before rather than :after, and using z-index to layer things so that the actual text content is visible on top of both backgrounds.

Related

Put some content before or after a bootstrap container

I need to have a bootstrap container of one color (let's say red) and then I need to color the space on the right with a different color and the space on the left with another one (actually my situation is more difficult because I have an image behind the container and on the right side of the container I should have a transparent effect, while on the left side I should have a solid color).
Do you have any idea on how to achieve it? I did a simple plunker to show what I'm trying to achieve (I tried with :after and :before but with no success)
http://plnkr.co/edit/rvD9ndy2OfY7kCxn0scP?p=preview
.myDiv{
background-color : red;
}
.myOuterDiv:after{
background-color : green;
content : " ";
}
.myOuterDiv:before{
background-color : yellow;
content : " ";
}
While unclear what you're going for, maybe you can consider using a background gradient with the two center stops right on each other.
Like so . . .
http://plnkr.co/edit/OMAfdVi3mK50M1nXNaR7?p=preview
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fff000+1,fff000+50,00ff00+51,00ff00+100 */
background: #fff000; /* Old browsers */
background: -moz-linear-gradient(left, #fff000 1%, #fff000 50%, #00ff00 51%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#fff000), color-stop(50%,#fff000), color-stop(51%,#00ff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* IE10+ */
background: linear-gradient(to right, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */

set 80% of background color of a div to one color

I have a div and background color is red. Now I'd like to make left 80% remain red, rest 20% on the right part to no color or transparent. Is it possible to alter css only without adding more divs or changing the padding of the div? I'd like div to remain it's original size.
.myClass
{
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 20%, rgba(255,48,48,1) 21%, rgba(255,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(20%,rgba(41,137,216,0)), color-stop(21%,rgba(255,48,48,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* W3C */
}
result:
i don't think you can set multiple background colors for one div, but you could try:
div.twocolorish {
background-color: blue;
border-left: 20px solid green;
}
This would only work if you didn't need text (or other) to go over the part with the green border
You cannot use padding to achieve the partial coloring. A div can be colored in the background which makes the whole div to be colored with the given color. But you can use an outer div to achieve your desired result or use css3pie to achieve your desired result (especially in IE 8 and below). It has gradient options also.
<div style="width:500px; height:400px; ">
<div style="width:80%; height:100%; background-color:blue;">
</div>
</div>
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
(index):6770 crbug/1173575, non-JS module files deprecated.
(anonymous) # (index):6770
(index):6770 crbug/1173575, non-JS module files deprecated

How to generate CSS3 gradient background

I'm working on a website from a PSD. In a section, I've seen that there are a mixed background color. I think It'll be a best way to match the color if I can use CSS3 gradient. But, I can't use CSS3 gradient. So, I took a help of "online CSS3 gradient background generator from image". Look, I want code for this background image:
But, from the online generator I've got this:
Look, the two images aren't same. There are a huge white color on the 1st image at the almost left to right which is absent in the 2nd image. Take a look please, the first image again:
I've used this online generator by uploading image and copy-paste the CSS code which it provided:
You can check the result at this link test link too: http://abidhasan.zxq.net/test/
So, how can I get the perfect CSS3 and cross-browser compatible code for the first image of this question?
The actual section of the PSD is:
Isn't the CSS3 gradient best and shortest way to make the background of that section?
I used ColorZilla's Gradient Editor and the ColorZilla Chrome extension in order to find the upper and lower bounds of the gradients you posted. Then I used the CSS rule sets generated by the gradient editor to make two div elements. I nested one inside of the other, and gave the inner div opacity: .5.
HTML:
<div class="gradient" style="width: 400px; height: 100px;">
<div class="topGradient" style="width: 400px; height: 100px; opacity: 0.5"></div>
</div>
CSS:
.topGradient {
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradient {
background: rgb(224,224,224); /* Old browsers */
background: -moz-linear-gradient(left, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
The end result was this:
Here's a JSFiddle.

Fade JPG image to transparency using CSS3

I have a solid image, a .JPG, with no transparency (seeing as .JPG's cannot have an alpha layer). However, since the client would not have the ability to create an image that fades one image edge to transparency, they want to input a solid .JPG and have it fade via code. It should be noted that I've got this image set to be the background right now, it's not the src of a <img> tag. Is this possible in CSS3 and if so, how would it be accomplished?
Example image:
Desired result:
I believe you can do something with the CSS3 mask-image attribute along with CSS3 linear-gradient background:
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0))
Here is a sample that I created to you. Since it's a new CSS3 thing compatible browsers are Chrome and Safari at this moment (Webkit browsers).
You can get true transparency via CSS masking:
http://www.webkit.org/blog/181/css-masks/
Support for it is still quite limited, though. However, in Webkit browsers, you can use something like:
.masked {
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
<div class="masked">Your content here</div>
This will work with all the content in any div (including the background), but this won't work in most browsers.
You could use a slice-and-animate approach similar to Nivo Slider, but that is an awful lot of work for what may not end up being a useful effect.
img,.over{
width:100px;
height:100px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
position:absolute;
}​
<div >
<img src="http://ts1.mm.bing.net/th?id=I.4763892546143716&pid=1.1" alt="test"/>
<div class="over"></div>
</div>
DEMO

Multiple background colours on 1 DIV

I have a div, and I would like to apply 2 backgrounds horizontally onto it using CSS3, but I can't figure it out, and so I would appreciate any help!
background: blue top no-repeat 10%;
background: yellow bottom no-repeat 10%;
I want the top half to be one color, and the bottom half to be a different colour.
I know it can be done quite easily with images, but I just can't figure out how to do this without using them.
A gradient is a reasonably simple way to do this using CSS3 and only one div:
http://jsfiddle.net/thirtydot/8wH2F/
Yes, I lied. It's not very simple at all due to the myriad different vendor prefixed versions of the same thing that you need to use:
div {
background: #000fff; /* Old browsers */
background: -moz-linear-gradient(top, #000fff 0%, #000fff 50%, #ffff00 50%, #ffff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(50%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */
background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */
}
I generated the CSS here, and removed the filter property since it will result in an actual gradient in IE6-9.
Another way to achieve this, apart from the gradients, is to use pseudo-element:
http://jsfiddle.net/kizu/S3LXB/
Add position: relative and some positive z-index to the element and the negative z-index to the pseudo-element, and it would be placed over the element's background, but under the element's content. And then you can position in just how you want.
This way is not as flexible as the one with gradients, but! You can for sure use the gradients for the pseudo-element and so achieve even more effects more easily.