Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to create the following Banner:
http://schuub.net/banner.png
My question is,
how can I create this gardient from white to transparent which overlays the image partially on the left.
My html can be found here:
http://schuub.net/banner.html
<!doctype html>
<html lang="en">
<head>
<style>
body {
margin: 0 auto;
width: 1024px;
}
.my-banner {
background-repeat: no-repeat;
background-position: right -175px;
background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
height: 200px;
width: 100%;
position: relative;
border:solid 1px;
}
.banner-data {
position: absolute;
left: 0;
top: 0;
width: 70%;
height: 100%;
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
border:solid 1px;
}
</style>
</head>
<body>
<div class="my-banner">
<div class="banner-data">
</div>
</div>
</body>
</html>
Cheers,
Stefan
Try this:
FIDDLE
HTML
<div class="my-banner"></div>
CSS
body {
margin: 0 auto;
width: 1024px;
}
.my-banner {
background-repeat: no-repeat;
background-position: right -175px;
background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
height: 200px;
width: 1024px;
background: url('http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg') no-repeat;
}
.my-banner:after {
content:" ";
height: 200px;
width: 1024px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
border: 1px solid black;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
/* IE6-9 */
}
Either use graphic design software such as Photoshop and use an image, or use the following resource: http://www.colorzilla.com/gradient-editor/
This will automatically create the CSS required for the gradient.
Related
I have a card with a flip effect when hovering it. The card has a background image, and each side has a color to transparent gradient.
When the card flips, the background-image position is on top, over gradient and div content. Without background-image the effect is fine.
How can I solve this issue and put the image under content and gradient?
Here is a codepen with the code https://codepen.io/ramonsan/pen/QJpgrv
.flip-card {
perspective: 1000px;
height: 400px;
width: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 1em;
padding-top: 5rem;
}
.flip-card-front {
background: -moz-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6499d2', endColorstr='#007db9e8', GradientType=0);
/* IE6-9 */
color: white;
}
.flip-card-back {
transform: rotateY(180deg);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
/* IE6-9 */
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
<div class="flip-card col-6 col-md-4 pb-4 mb-0">
<div class="flip-card-inner" style="background-image: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
<div class="flip-card-front">
<h1>FRONT</h1>
</div>
<div class="flip-card-back">
<h2>Back</h2>
</div>
</div>
</div>
Consider using the background image inside the inner divs. I used a CSS variable to make it easy to handle and avoid defining the image within the CSS so you can keep adjusting it through the inline style.
.flip-card {
perspective: 1000px;
height: 400px;
width: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 1em;
padding-top: 5rem;
}
.flip-card-front {
background:
linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%),
var(--i);
color: white;
}
.flip-card-back {
transform: rotateY(180deg);
background:
linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%),
var(--i);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
<div class="flip-card col-6 col-md-4 pb-4 mb-0">
<div class="flip-card-inner" style="--i: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
<div class="flip-card-front">
<h1>FRONT</h1>
</div>
<div class="flip-card-back">
<h2>Back</h2>
</div>
</div>
</div>
I've been able to fade the top of a div, but I can't get the bottom to fade as well. I figured I could just reverse the css I used to fade the top but it's not working.
HTML:
<div class="container-city">
<div id="gradient-top">
<h2 style="text-align: center; padding-top: 60px;">LOCATIONS</h2>
</div>
<div id="gradient-bottom">
</div>
</div>
CSS
.container-city {
background-image: url("img/1652.png");
width: 100%;
}
#gradient-top {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
#gradient-bottom {
background: -moz-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: -webkit-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: linear-gradient(to top, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
Question:
Is there an easier way to accomplish this by fading the top and bottom?
Current Result:
Seems like the simplest solution would be to add a linear-gradient with multiple stops to the background-image and center the title vertically and horizontally to get the effect you are looking for (you can also add percentage values to the gradient color stops to tweak how it fades). Something like the following:
.container-background {
background-image: linear-gradient(#fff, transparent, #fff), url('http://via.placeholder.com/200x800/f0f000/fff?text=');
width: 100%;
}
.container-title {
text-align: center;
margin: 0 auto;
padding: 60px 0;
}
<div class="container-background">
<h2 class="container-title">TITLE</h2>
</div>
I have a div with some content that I want the text fade effect at the bottom. In order to do that I have to use position: fixed; inside a div with overflow-y:scroll
The div that gives the fade effect does not appear. I have tried different solutions but none have worked inside a div.
Here is a jsFiddle example of the code
I would try using absolute positioning. Something like:
JS Fiddle
.outer {
height: 200px;
border: 2px solid black;
position: relative;
overflow: hidden;
}
.content {
height: 100%;
overflow: scroll;
}
.fadeout {
width: 100%;
height: 40px;
position: absolute;
display: block;
bottom: 0;
left: 0;
z-index: 1;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(95%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
Note that I put overflow: scroll on .content instead of .outer to keep the blur from scrolling.
Using fixed positing will place the blur at the bottom of the user's viewport, rather than the element.
I can't get this image to repeat horizontally. Note it is not a background image.
https://jsfiddle.net/gcetx8kh/
HTML:
<img id="rd" src="http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg">
CSS:
#rd {
position: absolute;
height: 50px;
width: 50px;
top: 300px;
background-repeat: repeat-x;
}
Unfortunately, background-repeat: repeat-x; will not work with the img tag. Therefore, you will need to add a new div and apply the image as a background image.
Try like this: Demo
<div id="rd"></div>
CSS:
#rd {
position: absolute;
height: 50px;
width: 100%;
top: 300px;
background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;
background-size: auto 100%;
}
Edit: Demo with fade on both sides:
#rd {
height: 50px;
width: 100%;
top: 300px;
background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;
background-size: auto 100%;
position: relative;
display: inline-block;
}
#rd:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}
background-repeat: repeat-x; will not work with img tag.
Add a new div and apply the image as background image.
I'd like to know if there is any way to fade a link out instead of truncating if it is too long to fit in container. This is what I mean (the image taken from the user966582's question):
The simplest solution is to insert an absolute-positioned element with a gradient background into the container, but in that case it would cover the link so that it becomes unclickable under the gradient.
Another way I found is to use -webkit-mask:
.wide-faded {
-webkit-mask: -webkit-linear-gradient(right,
rgba(255,255,255,0),
rgba(255,255,255,1) 103px,
rgba(255,255,255,1)
);
}
The result is exactly what I needed (link is clickable!) but it lacks a crossbrowser support.
Is there any way to achieve the same in a crossbrowser manner?
Thanks in advance.
You could apply the gradient to a background of a pseudo element instead
.fade {
position:relative;
display:inline-block;
}
.fade:after {
content:"";
position:absolute;
top:0;
right:0;
width:20px;
height:100%;
background: -webkit-gradient(linear, 0 0, 100% 0,
from(rgba(255, 255, 255, 0)),
to(rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}
You could try this:
HTML
<div>
<a href="#">
This is some clickable Text
</a>
</div>
CSS
div {
position:relative;
width:250px;
overflow:hidden;
}
a {
white-space:nowrap;
display:inline-block;
}
a:after {
content:" ";
display:block;
position:absolute;
z-index:1;
right:0;
height:100%;
width:150px;
top:0;
background: -webkit-gradient(linear, 0 0, 100% 0,
from(rgba(255, 255, 255, 0)),
to(rgba(255, 255, 255, 1)));
}
Check this demo http://jsfiddle.net/6GjHV/10/