5

次の画像に示すようなテキストシャドウが可能かどうか (そしておそらくどのように) 知りたいです:

ここに画像の説明を入力

影は、いくつかのリスト要素にわたって減少しています。どの要素がホバーされているかに応じて、各要素に異なるホバークラスを与えることを考えていましたが、CSS でそのような減少する影を取得する方法さえわかりません。誰かが私にそれを行う方法を教えてくれるなら、本当にクールだろう. 必要に応じて、私のjsfiddleコードを使用できます。

4

2 に答える 2

7

あなたはこのようなことを試すことができます

デモ

（タブをクリックして選択し、影を表示します）

box-shadow選択したタブの疑似要素を使用して効果を取得します。

このように見えるはずです

勝利7のクロム21

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%;
}
于 2012-09-25T08:58:02.060 に答える
1

<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);
}

</p>

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

于 2012-09-25T08:55:28.313 に答える