I am trying to set a linear gradient background over an image and my code works in Chrome but not in Safari. Here is a full example of my code:
HTML:
<div>
<img src="./assets/51a-front-img.png" draggable="false"/>
</div>
CSS:
div:after{
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top:0;
background: rgba(0,0,0,0.5);
background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
}
img {
position: relative;
width: 100%;
}
The div:after needs to be positioned on the left edge (which chrome does by default). change your css to:
div:after{
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background: rgba(0,0,0,0.5);
background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
}
img {
position: relative;
width: 100%;
}
Related
I'm having a border transition on a focus. When I focus the input field, I want the border to change color. This works.
What I don't want is to let the border load when the page load, which it does now. Why is it doing this?
<input type="stad" name="stad" value=""/>
input {
border: 7px #227a7b solid;
height: 20px;
width: 200px;
background: #1a5a78;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1a5a78), color-stop(100%, #11c7b8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* IE10+ */
background: linear-gradient(135deg, #1a5a78 0%, #11c7b8 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5a78', endColorstr='#11c7b8',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
padding: 5px;
margin-top: -50px;
transition: 1s border;
}
input:focus {
outline: none;
border: green 7px solid;
}
I'm trying to make a gradient overlay in my images, that makes this effect:
As you can see, gradient will be darker at the bottom, BUT, the top WONT be affected by the darkness.
I've tried this:
#include linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(255,255,255,1));
But this will make a whitish effect at the top. I want the gradient to darken only the bottom part of the image, and DON'T do anything to the upper part of the image.
Has anyone know how to do this?
Thanks
You can use the following CSS, http://jsfiddle.net/3sxd82nf/5/
<div id="test">x</div>
<div id="gradient"></div>
#test {
position:absolute;
top: 10px;
left: 0px;
width: 200px;
height: 200px;
background-image: url('http://images2.layoutsparks.com/1/198321/50s-diner-chick-squares.jpg');
}
#gradient {
position:absolute;
top: 10px;
left: 0px;
width: 200px;
height: 200px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
Is it real to make such border through css?
I thought about
border: 3px solid white;
border-top: none;
and pseudo-element with gradient, but its not exactly the same.
You can do this by adding a pseudo-element with a gradient. transparent -> white -> transparent.
FIDDLE
CSS
div
{
width: 600px;
height: 200px;
border: 5px solid black;
border-radius: 20px;
position: relative;
margin: 50px;
}
div:before
{
content: '';
position: absolute;
top:-5px;
left:0;right:0;
margin:auto;
height: 5px;
width: 80%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 17%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(17%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
[Update: this can be done with a radial gradient, but Im no longer in front of my computer.]
I'm not sure that there's a border gradient (yet anyway), but I built something with nested s for you. Just an idea. It's just missing the solid white across the bottom. Hope it's helpful.
jsfiddle: http://jsfiddle.net/itsmikem/HfCT3/
css:
div {
position:relative;
}
#outer {
background: #cccc00;
width:200px;
padding:10px;
}
#mid {
border-radius:10px;
background: #ffffff;
background: -webkit-linear-gradient(left, #ffffff 0%,#cccc00 50%,#ffffff 100%);
background: linear-gradient(to right, #ffffff 0%,#cccc00 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
padding:3px;
}
#inner {
/*width:100%;
height:100%;*/
background:#cccc00;
border-radius:10px;
padding:10px;
}
html:
<div id="outer">
<div id="mid">
<div id="inner">stuff
</div>
</div>
</div>
I have the following CSS:
.main {
padding-right: 15px;
padding-left: 15px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)top;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)top; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))top; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) top; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )top; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)bottom;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)bottom; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))bottom; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) bottom; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )bottom; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
padding-top: 50px;
min-height:600px;
}
And here is a live example: http://jsfiddle.net/ZtJmM/
I want that one gradient be at the top, and one at the bottom of the element. Is that possible?
Thanks!
Yes, use them in the same statement like:
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) top,
linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) bottom;
I have the following code:
#wrapper {
position:relative; top:0; right: 0; left:0; bottom: 0;
display: block;
background: #657575; /* Old browsers */
background: -moz-linear-gradient(left, #657575 0%, #758585 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#657575), color-stop(100%,#758585)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #657575 0%,#758585 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #657575 0%,#758585 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #657575 0%,#758585 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657575', endColorstr='#758585',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #657575 0%,#758585 100%); /* W3C */
}
But when I publish I don't see anything. Am I setting something wrong?
I have my wrapper set up right at the start as in:
<body>
<div id="wrapper">
works fine for me http://jsfiddle.net/bvTMW/
How about adding height & width