Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Decreasing inner box shadow with CSS3

Tags:

css

I would like to know if (and maybe how) some text-shadow like shown in following image is possible:

enter image description here

The shadow is decreasing over several list-elements. I was thinking to give each element different hover-classes depending on what element is being hovered on, but I am not even sure how to get such decreasing shadows with CSS. Would be really cool if someone would be able to teach me how to do that. If you want you can use my jsfiddle code.

like image 227
Sven Avatar asked Sep 25 '12 08:09

Sven


People also ask

How do I reduce the size of a shadow in CSS?

Set the Spread Radius of the Shadow A positive value increases the size of the shadow, a negative value decreases the size of the shadow.

How do I shadow a box inside CSS?

Note: By default, the shadow generates outside the box but by the use of inset we can create the shadow inside the box. Syntax: box-shadow: h-offset v-offset blur spread color | inset; Approach: To give the inset shadow to an element, we will use the box-shadow property.

Can you add drop shadow in CSS?

We can add a drop shadow to any HTML element using the CSS property box-shadow .

What does the css3 attribute box shadow effect?

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.


1 Answers

You could try something like this

demo

(click a tab to select it and see the shadows)

and get the effect using box-shadow on pseudo-elements of the selected tab.

Should look like this

chrome 21 on win 7

HTML:

<ul class='tabs'>
    <li><a href='#' tabindex='1'>1st tab</a></li>
    <!-- as many tabs as you would like -->
    <li><a href='#' tabindex='1'>aaand another tab</a></li>
</ul>

Relevant CSS:

.tabs { overflow: hidden; margin-top: 7em; list-style: none; }
.tabs li { float: left; border-right: 1px dotted #222; }
.tabs a {
    display: block;
    position: relative;
    padding: 1em .66em;
    font: .66em/1.1 sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
.tabs a:focus {
    z-index: 3;
    outline: none;
    box-shadow: 0 -.5em 1.5em black;
    background: lemonchiffon;
}
.tabs a:focus:before, .tabs a:focus:after {
    position: absolute;
    bottom: -1px;
    width: 30em; height: 1px;
    box-shadow: 0 0 20px 1px black;
    content: '';
}
.tabs a:before {
    left: -30.5em;
    transform: rotate(-3deg);
    transform-origin: 100% 100%;
}
.tabs a:after {
    right: -30.5em;
    transform: rotate(3deg);
    transform-origin: 0 100%;
}
like image 195
Ana Avatar answered Sep 25 '22 20:09

Ana