Geek asks and answers

Reducing the shadow of the inner block using CSS3

I would like to know if (and maybe how) I can get a text shadow, as shown in the following image:

enter image description here

The shadow decreases over several elements of the list. I was thinking of giving each element different dependent classes depending on which element it floats on, but I'm not even sure how to get such diminishing shadows using CSS. It would be great if someone taught me how to do this. If you want, you can use my jsfiddle code.

+5
source share
2 answers

You can try something like this

demonstration

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

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

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>

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%;
}
+7

<li>, <ul>, .

HTML:

    ...
    </li>
        <li class="shadow">1</li>
    </ul>

CSS

ul
{
    overflow: hidden;
    height: 50px;
}

li.shadow
{
    width: 100%;
    height: 100%;
    position: relative;
    top: 15px;
    box-shadow: 0px 0px 45px #000;
    -webkit-transform:rotate(-1deg);
}

http://jsfiddle.net/Kyle_Sevenoaks/4Luet/1/

+1

More articles:


All Articles