How would I make the image glow when hover? I would like to use white-color.
<img src="resources/img/email.png" class="img-circle">
image:
http://i.stack.imgur.com/Hx0kH.png
Can't post link. So, I would like to make it glow (inside), thanks. Any help would be great
I think what you are trying to do is accomplished with two versions of the same image (use of photo editing tools). Then use this code:
<img src="URL of darker image here"
onmouseover="this.src='URL of lighter image';"
onmouseout="this.src='URL of darker image here';">
</img>
You can give glow at the borders using
img:hover
{
-moz-box-shadow: 0 0 5px 5px #ddd;
-webkit-box-shadow: 0 0 5px 5px #ddd;
box-shadow: 0 0 5px 5px #ddd;
}
You can choose the color you want according to your requirements.
you can also visit http://codepen.io/anon/pen/ilqnb
or http://css3generator.com/
You can use box-shadow withInset property
.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
Related
I cannot for the life of me figure out how to do this: subscription box.
Should be trivial for experienced devs... problem is the gradient bleeds onto the white of the box, and doesn't end vertically, like so.
It's a simple box underneath the email form, with a gradient applied, and then blur (a lot of it). Ideally, the gradient rectangle's positioning should be anchored to the box.
Example of the code for the box and the gradient can be found here
pastebin^
Maybe this one helps you
box-shadow: 0px 30px 10px 0px #EBEBEB ;
Also, you can see more here
although the below answer is correct! You might only want one side to have the inner shadow as well as use the inset keyword to have the shadow inside the element
.oneside{
-moz-box-shadow: inset 0 6px 6px -6px black;
-webkit-box-shadow: inset 0 6px 6px -6px black;
box-shadow: inset 0 6px 6px -6px black;
border-radius: 4px;
}
.allaround{
-webkit-box-shadow: inset 0 0 5px #000000 ;
-moz-box-shadow: inset 0 0 5px #000000 ;
box-shadow: inset 0 0 5px #000000 ;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body>
<input class="oneside">
one side
</input>
</br>
<input class="allaround">
all around
</input>
</body>
</html>
I was on the google news page and I was wondering how do google make his border around each sections, because I can't find in the inspector any element with a border property. I find those borders very thin and I think it is not with the border property with CSS.
if you inspect well, then you will see its a box-shadow instead of border, Here is what they used in their css, Please check again,
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
background-color: #fff;
Hint: check for class .lPV2Xe
Because this is not a border. It's a box-shadow.
this effect can be created by
.card {
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
}
.card:hover{
box-shadow: 0px 8px 10px 0 grey;
-webkit-transition: box-shadow .3s ease-in;
}
and create a div with the class card.
found a similar pen Link to example
This question already has answers here:
How to apply box-shadow on all four sides?
(15 answers)
Closed 8 years ago.
I need to know how to put shadow in all four sides of a div. I need a little explanation of:
filter:
progid:DXImageTransform.Microsoft.Shadow
This will give you shadow on all 4 sides:
div.shadow {
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
JSFiddle
The first two 0px's mean that the shadow won't explicitly protrude either left/right or up/down. The 10px gives it enough blur to protrude out all edges. The #000 is the color of the shadow. You can play around with it to get the look you like.
Use box-shadow
.class-name{
box-shadow: 2px 2px 2px #000;
/* horizontal, vertical, blurr-radius, colour */
}
Box-Shadow
CSS3 box-shadow property has following attributes: (W3Schools)
box-shadow: h-shadow v-shadow blur spread color inset;
The main prefix for shadow to support latest browsers is box-shadow.
There are 2 other prefix available that I recommend to use for older Mozilla and Webkit:
-moz-box-shadow
-webkit-box-shadow
Try it:
img{
-webkit-box-shadow: 0 0 5px 2px #000000;
-moz-box-shadow: 0 0 5px 2px #000000;
box-shadow: 0 0 5px 2px #000000;
}
Working Demo
Reference
This question already has an answer here:
Box-Shadow Only on Left and Right
(1 answer)
Closed 8 years ago.
This is css code
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !
You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).
To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).
Here's the quick answer:
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
Updated fiddle
What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).
Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.
To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.
Hi Zey this is the code paste in your css and you will get what you want.
This is CSS
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is HTML
<div class="one-edge-shadow"></div>
and check it out in fiddle http://jsfiddle.net/MfV2Y/
Try this:
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
Please take a look at this simple code:
http://jsfiddle.net/kerp3/
The box has an inner box shadow o all 4 sides. I need the box shadow to only appear on the left and bottom sides.
How to change this code:
box-shadow: inset 0 0 9px 0 #000;
Does this help, this should work cross browser.
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Here is the original author :
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
See this page:
http://css-tricks.com/snippets/css/css-box-shadow/
With a small change to the color and the offsets it becomes fairly simple:
div { width: 300px; height: 300px;
box-shadow: inset 5px 5px 5px -3px #666;
}
The jsFiddle of it.
I was going to suggest using negative values like so:
div { width: 300px; height: 300px;
/* Try this. */
box-shadow: inset 4px -4px 7px -4px #000;
}
The first 4px pushes the shadow box to the left by 4px, hiding what you would normally see on the right, if you left it at 0.
The second -4px value pushes the shadow vertically down, again hiding the top shadow.
The higher 7px blur value gives me a more than a I need, but if I add a spread of -4px, that extra blur will be clipped. Leaving only a soft grey shadow edge, instead of the hard black one you'll usually see.
See my example here:
http://jsfiddle.net/khalifah/vVUB5/
You can't apply a shadow only to certain sides of a <div>, but you can adjust the X and Y offsets so that the shadow gets clipped on the sides where you don't want it.
This gave me the effect you're looking for in Safari:
box-shadow: 7px -7px 9px #000 inset;