I need to do a shadow effect like the above image. I prefer css, so I am trying this code but the (smooth) borders are not identical. Any best approach?
demo
<div class="box"></div>
.box {
height: 1px;
width: 13em;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#191919;
-moz-box-shadow: 0 0 3px 3px #191919;
-webkit-box-shadow: 0 0 3px 3px #191919;
box-shadow: 0 0 3px 3px #191919;
}
http://jsfiddle.net/SG9pd/
div {
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
width: 300px;
height: 20px;
}
Made with: http://www.colorzilla.com/gradient-editor/
using just css here is the link to your solution
for demo
visit http://jsfiddle.net/a92My/
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'm trying to style my HTML buttons using CSS, so that they have the reflected shine like the icons on iOS devices' home page. Apple does this to icons automatically as shown here. I need something similar to the shine in CSS.
Take a look at this fiddle.
Here's the code:
HTML:
<div class="icon">
<div class="shine"></div>
</div>
And CSS:
.icon {
width: 150px;
height: 150px;
border-radius: 30px;
background: red;
float: left;
margin: 50px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}
.shine {
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */
height: 90px;
width: 150px;
box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 100px 40px;
border-bottom-left-radius: 100px 40px;
}
my example uses a background-color:red instead of an image, but just put any image as background in the #icon div and it should also work.
(btw I used this awesome site: http://www.colorzilla.com/gradient-editor/ for the gradients)
HTML:
<div class="icon">
<div class="shine">
</div>
</div>
CSS:
.icon {
width:50px;
height:50px;
background-color: red;
overflow: hidden;
position: relative;
}
.shine {
position: absolute;
top: -70px;
left: -25px;
width:100px;
height:100px;
border-radius: 50px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Hope it works for you!
Please see this fiddle:
jsfiddle example
notice the headers are cutting off the border-radius, any ideas why?
Thanks
The gradients of the .pod-headers are overlapping the round corners on the .pods because you didn't round the .pod-headers. They don't inherit the round corners from their parent elements.
To fix it, round the top corners (only) of your .pod-header elements using this CSS:
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
You are giving one class the border radius and the inner class the background but no radius (so it still has a square corner).
Check out the CSS in the updated fiddle
You also need to set the border-radius on the inner div.
For example Use this:
#pod-container .pod .pod-header {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
border-radius: 6px;
border-bottom: 1px solid #CCC;
}