So I have a button with initial shadow set. I want to transition the shadow on hover into another value of shadow.
button {
height:100px;
width:200px;
padding:10px;
margin:5px;
border:none;
border-radius:10px;
box-shadow: 10px 10px 20px #dde4ef, -10px -10px 20px white;
transition: box-shadow 0.5s ease-in;
}
button:hover{
box-shadow: inset 10px 10px 20px #dde4ef, inset -10px -10px 20px white;
}
<button>This Button</button>
Its not working
Prepare your inset shadows by using inset 0 0 0 transparent, inset 0 0 0 transparent,
button {
height:100px;
width:200px;
padding:10px;
margin:5px;
border:none;
border-radius:10px;
display: inline-block;
box-shadow:
inset 0 0 0 transparent, inset 0 0 0 transparent, /* Prepared inset shadows */
10px 10px 20px #dde4ef, -10px -10px 20px white; /* Outer shadows */
transition: box-shadow 0.5s ease-in;
}
button:hover{
box-shadow: inset 10px 10px 20px #dde4ef, inset -10px -10px 20px white;
}
<button type="button">HOVER ME</button>
Related
So I'm trying to create a div element that upon hovering, will "pop" out, and appear as a 2.5D box. Basically, what this person was looking for:
3D Box Shadow effect
Except animated with a transition, so when not hovered upon, its a simple 2D box, and when hovered on, it appears like the second image in that person's question.
Here's a fiddle with what I have so far:
http://jsfiddle.net/78m3nzv6/
<div class="cat-box bot-row">
<h4>Hello World!</h4>
<p>Info</p>
</div>
.
.bot-row:hover {
transition: all 0.3s ease-in-out;
transform: translate(10px,10px);
}
.cat-box {
background-color: grey;
outline: #DDD8D4 solid 3px;
padding: 3px 5px 5px 5px;
margin: 10px 30px 10px 30px;
transition: all 0.3s ease-in-out;
}
You can actually do this in a very similar way to the answer that you linked to, by using multiple box-shadow declarations.
I also took the liberty of converting your outline to a border and setting box-sizing: border-box so that the border doesn't stick out from the effect.
Here is a Live Demo:
.bot-row:hover {
transition: all 0.3s ease-in-out;
transform: translate(10px, 10px);
box-shadow: -1px -1px 0px #999, -2px -2px 0px #999, -3px -3px 0px #999, -4px -4px 0px #999, -5px -5px 0px #999, -6px -6px 0px #999, -7px -7px 0px #999, -8px -8px 0px #999, -9px -9px 0px #999, -10px -10px 0px #999, -11px -11px 0px #999, -12px -12px 0px #999;
}
.cat-box {
box-sizing: border-box;
background-color: grey;
border: #DDD8D4 solid 3px;
padding: 3px 5px 5px 5px;
margin: 10px 30px 10px 30px;
transition: all 0.3s ease-in-out;
}
<div class="cat-box bot-row">
<h4>Hello World!</h4>
<p>Info</p>
</div>
JSFiddle Version: http://jsfiddle.net/78m3nzv6/3/
I have the following button HTML code:
<button class="button" style="width: 95%;">PHYSICIANS</button>
It is customized by CSS3 here:
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
Which displays the following button:
How can I modify the above code, so I can add a thumbnail image to it. Something like this:
The default image size is 260X190 but I want to size it up so it fits inside the button.
You can use the pseudo-element :before to do this.
See this working demo I made: http://jsfiddle.net/A7UsX/1/
button:before {
content: " ";
display: inline-block;
background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
height: 30px;
width: 50px;
}
I have made a red background to show you what I did. Change the background to the image you would like and change the height and width to your likings.
you could use :before pseudo element.
button:before{content: ' '; display:inline-block; position:absolute; content:url(http://lorempixel.com/25/25); }
I'll suggest you to use a SVG image rather than using jpg or png format. so in this case you can call the image using background-image and give a positioning too.
button:before { content:''; display:inline-block; height:1em; width:1em;
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat; }
here you can check the working Demo. http://jsbin.com/damujidi/1/edit
You can add a <i> as commonly used in bootstrap [ref1] [ref2].
<button class="button">
<i class="btnbg"></i>PHYSICIANS
</button>
CSS:
.btnbg {
background-image: url('http://i.stack.imgur.com/QgIOj.png');
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 35px;
line-height: 35px;
vertical-align: middle;
width: 70px;
}
.button {
line-height: 35px;
vertical-align: middle;
}
see jsFiddle
I have this problem where I want to have a border and a box-shadow, but the shadow must be over the border.
The box-shadow property starts when the border ends, is it possible to move it over the border?
.border
{
border: solid rgba(128,42,42,.98) 16px;
}
.img-box-shadow
{
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
My HTML:
<img class="border img-box-shadow" src="img.png">
Already tried inset in my box shadow, but it didn't work!
I'm looking for this effect:
And I'm getting this result:
I think this would be much more easily achieved with two overlayed box shadows
Something like this approaches what you're looking for
box-shadow: 0 0 20px 5px #000000,
0 0 0 16px rgba(128,42,42,.98);
Seem like you want an inset box shadow, then you can use:
box-shadow: inset 0 -15px 10px -10px #444;
-moz-box-shadow: inset 0 -15px 10px -10px #444;
-webkit-box-shadow: inset 0 -15px 10px -10px #444;
Fiddle Demo
How about this one?
.ds-bottom {
position:relative;
overflow:hidden;
border-bottom:1px solid #ddd;
}
.ds-bottom:before {
content: "";
position:absolute;
z-index: 1;
width:96%;
bottom: -10px;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
You can try using inset and then lowering the alpha value of your border. It may not exactly be what you want, but it's close.
.border
{
border: solid rgba(128,42,42,.5) 4px;
}
.img-box-shadow
{
-moz-box-shadow: inset 0px 0px 20px #000000;
-webkit-box-shadow: inset 0px 0px 20px #000000;
box-shadow: inset 0px 0px 20px #000000;
}
Alternate option (borrowed from this question). Don't use the .border and just use this (you can play around with pixel values):
.img-box-shadow
{
box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px;
}
Here's a JSFiddle
First, you have mistake in box shadow format.
box-shadow: 0px 0px 20px #000000;
Change to
box-shadow: 0px 0px 20px 0 #000000;
Due to the right format of Box Shadow Properties
box-shadow: horizontal-length vertical-length blur-radius
spread-radius;
Next, to make it works with your requirement you must wrap your image inside div. Box-shadow wont works over border.
Here's the style
div {
display:inline-block;
padding:4px; /* Act as border width */
background:rgba(128,42,42,.98); /* Act as border color */
}
.img-box-shadow
{
box-shadow: inset 0px 0px 20px 0 #000000;
-webkit-box-shadow: inset 0px 0px 20px 0 #000000;
-moz-box-shadow: inset 0px 0px 20px 0 #000000;
}
And the HTML Markup
<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>
Check live demo http://jsbin.com/hex/1/edit
i am trying to create a moon with light glow. same as in images.
i have tried but not much successful.
I don't wants to use image in website. i wants to create only this with CSS3.
My circle is creating very small and also glow is in small area . i want glow in large radius area
http://jsfiddle.net/naresh_kumar/ezUfG/6/
Html
<div>
<span>Glow</span>
</div>
Css
div {
margin: 20px 10px 10px;
text-align: center;
font-family: sans-serif;
}
span {
display: inline-block;
padding-top: 40px;
background: whiteSmoke;
width: 100px;
height: 60px;
text-align: center;
vertical-align: middle;
-webkit-box-shadow: 0 0 10px #F8A50E;
-moz-box-shadow: 0 0 10px #F8A50E;
box-shadow: 0 0 10px #F8A50E;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: box-shadow .4s ease;
-moz-transition: box-shadow .4s ease;
-ms-transition: box-shadow .4s ease;
-o-transition: box-shadow .4s ease;
transition: box-shadow .4s ease;
}
span:hover {
-webkit-box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
box-shadow: 0 0 0 10px red;
}
use box-shadow :)
This example uses two comma separated shadows:
box-shadow:0 0 50px gold,0 0 150px gold;
http://codepen.io/gcyrillus/pen/qdcos
You could draw it with radial-gradient too.
Result will varie from browser to browser.
I believe this is what you want:
span:hover {
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow: 0px 0px 10px red;
box-shadow: 0px 0px 10px red;
}
Demo: http://jsfiddle.net/ezUfG/10/
Instead of this style for your box-shadow:
box-shadow: 0 0 0 10px red;
Try this:
box-shadow: 0 0 10px red;
Edit: If you want the glow to be bigger, just increase the radius:
box-shadow: 0 0 30px red;
jsFiddle here
I'm working on a site called http://ccrccmo.com and I can't get the box-shadow to show up on the content-bg with css.
nav{
background:url(images/nav-bg2.png);
height:74px;
box-shadow: 0px 3px 5px #222;
}
#content-bg{
background:white;
margin-top:0px;
z-index:-1000;
}
you are missing
box-shadow: inset 0 3px 10px #000;
box-shadow: initial;
try
#content-bg {
background: white;
margin-top: 0px;
box-shadow: inset 0 3px 10px #000;
box-shadow: initial;
}