我想知道是否(以及可能如何)某些文字阴影如下图所示:
阴影在几个列表元素上逐渐减少。我正在考虑给每个元素赋予不同的悬停类,这取决于正在徘徊的元素,但我甚至不确定如何使用CSS获得如此减少的阴影。如果有人能够教我如何做到这一点真的很酷。如果您愿意,可以使用我的jsfiddle代码。
答案 0 :(得分:7)
你可以试试这样的事情
(单击选项卡将其选中并查看阴影)
并使用box-shadow
在所选标签的伪元素上获得效果。
应该是这样的
<强> 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%;
}
答案 1 :(得分: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);
}