I have a background image for a hero element on a website that I'm working on. I want to make the background image in the .hero div be on a gradient from transparency to complete opacity on the edges so the backgrounds of both divs blend into each other.
To illustrate, here's the code that I'm using right now in the body of my index.html:
<div class="hero">
<div class="hero-inner">
<h1>My awesome hero element</h1>
</div>
</div>
... and this is what's in my style.css
.hero {
background-color: black;
width: 800px;
}
.hero-inner {
width: 700px;
height: 200px;
margin: auto;
background-image: url('http://i.imgur.com/PXzVXmR.png');
}
.hero-inner h1 {
position: absolute;
font-family: Arial, sans-serif;
color: white;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
left: 50px;
top: 20px;
font-size: 48px;
}
Here's the jsFiddle. How would I make the background image in .hero-inner blend in with the background color of .hero on the edges? I've got a similar effect on Photoshop that does the job but I'd like to know if this could be done with CSS3 gradients
You can draw radial background gradient, but code is really ugly and looks heavy.
Here is a gradient editor that may be useful: http://www.colorzilla.com/gradient-editor/
background: -moz-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%, rgba(205,57,71,1) 40%, rgba(80,79,130,0) 83%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(23%,rgba(255,48,48,1)), color-stop(40%,rgba(205,57,71,1)), color-stop(83%,rgba(80,79,130,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3030', endColorstr='#001e5799',GradientType=1 );
Related
I'm struggling to find a nice way to fade a vertical gradient at its left and right sides. Basically a top-bottom gradient with the left-right ends faded to 0% opacity.
I need it to be a Transparent fade out so that it can be on top of images/videos.
Here is a quick visual of what I am aiming for:
Any suggestions?
Pretty Simple, You just need to add transparent in a linear gradient.
div {
background:linear-gradient(to right, transparent, #00F5CB, transparent);
width: 100%;
height:64px;
}
<div></div>
Use multiple backgrounds. The first one is on top.
div {
width: 100%;
height: 100px;
background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
linear-gradient( to bottom, Lightgreen, Aquamarine);
}
<div></div>
You can try multiple background like this:
.box {
width: 500px;
height: 80px;
margin:auto;
background:
radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
background-repeat:no-repeat;
color: ;
color: ;
}
body {
background:pink
}
<div class="box"></div>
I have two divs on top of each other. I need the bottom div to have a slanted angle like this:
I only need help with slant of the top of the blue div, I can handle to bottom slant myself.
I could create a psuedo element and skew it, but the issue is that the blue div has a gradient and making a psuedo element with the same gradient makes the two elements not flow together with their gradients.
I think my only solution is to create a transparent div, skew it and place it on top of the blue div. I was wondering if this is even possible to create a skewed transparent div and have it cut into the blue div, slanting the blue div while showing the image in the background.
I'm open to any other ideas to achieve this slanted div.
Ive created a simple jsfiddle with the divs for anyone to mess around with.
Here is the basic mark up:
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
position: relative;
top: -150px;
}
Thanks
It is in fact very easy if you use this site
http://bennettfeely.com/clippy/
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
position: relative;
top: -150px;
-webkit-clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
}
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
I've got this working using a static black background on my games splash screen:
[
If too small: http://i.imgur.com/VzLViDB.png
As you can see it works on a black background, but when we are on any other background, we simply see black instead of the actual background.
This makes sense, because I'm using a gradient like:
#waves::before {
left:0;
background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
#waves::after {
right:0;
background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
Soo... technically it's working as intended. I just can't figure out how to do it like I want it to work.
My goal: fade out the div so that the waveform corners appear to fade out.
How i attempted it: waves is a div, so I leveraged before and after psuedo-elements, and gave it a width LARGER than required (so there is some overlap), and then used a gradient to fade.
If anyone knows how to do this, that would be great!
I did search, which is where I got the idea of a gradient from. I couldn't find anything that would suit this use case (multiple backgrounds)
To clarify, this is my goal:
Since your image is mostly black, You can use a mix mode to overlay it over the background.
And keep the way you mask it with black on the sides
.bkg {
width: 100%;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
}
.overlay {
width: 100%;
height: 100px;
position: absolute;
top: 200px;
background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png);
background-size: 20% 100%, 20% 100%, cover;
background-position: left center, right center, center center;
background-repeat: no-repeat;
mix-blend-mode: screen;
}
<div class="bkg"></div>
<div class="overlay"></div>
I have a website with body containing fix background image and a div class containing transparent radial-gradient layer. How do I make the elements within the class to not be transparent and appear on top of the background gradient and background image?
CSS:
$body-color1: #f2009f;
$body-color2: #218bdb;
// Solution 1. However, unable too get content on top of gradient and backgourn image
html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */
body {
background: $body-color2;
background: url('http://i.huffpost.com/gen/964776/thumbs/o-CATS-KILL-BILLIONS-facebook.jpg') no-repeat center center fixed;
background-attachment: fixed;
// background-size: cover;
}
.bg-img {
background: -moz-radial-gradient(center, ellipse cover, $body-color1 0%, $body-color2 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0 $body-color1), color-stop(100%,$body-color2)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* W3C */
opacity: 0.5;
z-index: 0;
}
HTML:
<div class="bg-img">Insert large body of text here or elements.</div>
http://codepen.io/anon/pen/NPeqMJ
Change your body colors to:
$body-color1: rgba(242, 0, 159, 0.5);
$body-color2: rgba(33, 139, 219, 0.5);
and remove opacity from .bg-img
Demo
for putthe element on the top, you can use the z-index property. Be sure that the value is large enough to preventother element to come at top
z-index: 99999;
I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.
I was able to create a gradiet with a cross
background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%),
linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.
The below is the way I had tried to create it:
background: linear-gradient(to bottom, transparent 50%,#ff0 100%),
linear-gradient(to right, transparent 50%,#f00 100%);
But the yellow part is full! How can I fix this situation?
This is what I want:
It is very much possible to achieve this using a single element and a single background rule. Just give each of the gradients 50% size of the container in the X-axis, position one gradient on the left side and the other on right side using background-position and stop the gradient from repeating by setting the value for background-repeat as no-repeat.
div {
height: 100px;
background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
/* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
background-size: 50% 100%, calc(50% + 1px) 100%;
background-position: 0% 0%, 100% 0%;
background-repeat: no-repeat;
}
<div></div>
Edit: It is possible with one background, see Harry's answer.
It's not directly possible with a single background rule on your element, but you can utilize the ::before and ::after pseudo elements.
div {
width: 100%;
height: 50px;
border: 1px solid black;
position: relative;
background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
content: "";
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, #ff0 100%);
}
<div></div>