CODEWITHSUNDEEP
css
Nix
Nix

Reputation: 490

Box-shadow inner glow with inset

I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).

Test code:

HTML:

<ul>
<li>
    home
</li>
</ul>

CSS:

ul {
    list-style:none;
}
li {
    width:50px;
    height:25px;
    background:black;
    color:white;
    font-size:1.25em;
    padding:10px;
}
li:hover {
    box-shadow: inset 0 9px 10px 0px #00abe3;
}

I'm trying to achieve something like this:

Example

I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.

Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.

It flickers because of transition, not sure how to fix that. Any suggestions?

Upvotes: 1

Views: 2911

Answers (3)

yunzen
yunzen

Reputation: 33439

You could add a :before pseudo-element which has a box-shadow;

li {
    width:50px;
    height:25px;
    background:black;
    color:white;
    font-size:1.25em;
    padding:10px;
    position: relative;
}
li:hover {
    box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
    position: absolute;
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    content:' ';
    left: 30px;
    top: 1px;
    box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}

See this fiddle

Upvotes: 0

Eduardo La Hoz Miranda
Eduardo La Hoz Miranda

Reputation: 2056

just as a note, you should structure your html like this:

<ul>
  <li>
     <a>Home</a>
  </li>
</ul>

The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:

ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}

As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3

Upvotes: 0

SW4
SW4

Reputation: 71190

You can simply chain your shadows, thus:

box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;

Demo Fiddle

What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.

Upvotes: 1

Related Questions