CSS Triangle を使ったパンくずリストを見てて、この方法だと単色はともかく、グラデーションかけたい時、ボーダーで作った三角がネックでうまくいかないだろうなっておもった。
前回、 iPhone Buttons を再現した際に使った方法でグラデーションかけられそうなので試してみた。
オリジナルの詳しい解説は既にコリスさんにありますので割愛。
大分書き進めた後に気づいたけど、コメントにあった span を使う方法のがパッと見簡単やないかな……こっち使うほうがいいかもしれんね……
動作確認
Chrome(7.0.517.41) で確認。もしかすると、ウィンドウ幅が小さいと崩れるかも。横幅 1024px で最大化して確認してます。
同じ webkit の Safari でも表示されますが、微妙に動作が違います。他のブラウザ用のプロパティは機会があれば。も追加してみた。こっちに貼ると長すぎて拒否されるので、デモのスタイルシート見てください。クロスブラウザ難しいなこりゃ……
デモサイト／Demo Site
HTML
<h2>custom</h2>
<div id="custom">
<ol class="custom">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li>1989 VW Westfalia Vanagon</li>
</ol>
</div>
CSS
Mayer's CSS Reset でリセットしてます。
グラデーションかかってないように見えるけど、かかってます。 hsl だと同系色の色指定楽だね。でも要領がわからない。
/* custom
----------------------------------*/
.custom {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,95%,1)),
color-stop(0.49,hsla(34,85%,90%,1)),
color-stop(0.5,hsla(34,85%,80%,1)),
to(hsla(34,85%,85%,1)));
-webkit-border-radius: 5px;
}
.custom li {
float: left;
line-height: 50px;
}
.custom li a {
color: white;
text-decoration: none;
padding: 0 15px 0 35px;
background: brown;
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,50%,1)),
color-stop(0.49,hsla(34,85%,45%,1)),
color-stop(0.5,hsla(34,85%,35%,1)),
to(hsla(34,85%,40%,1)));
display: block;
float: left;
}
.custom li a::after {
position: relative;
display: block;
margin-top: -25px;
margin-left: auto;
margin-right: -25px;
height: 25px;
width: 20px;
content: " ";
-webkit-transform: skew(-30deg);
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,35%,1)),
to(hsla(34,85%,40%,1)));
border-right: 1px solid white;
}
.custom li a::before {
float: right;
display: block;
margin-bottom: -25px;
margin-left: auto;
margin-right: -25px;
height: 25px;
width: 20px;
content: " ";
-webkit-transform: skew(30deg);
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,50%,1)),
to(hsla(34,85%,45%,1)));
border-right: 1px solid white;
}
.custom li:first-child a {padding-left: 20px;}
.custom li:nth-child(2) a {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,60%,1)),
color-stop(0.49,hsla(34,85%,55%,1)),
color-stop(0.5,hsla(34,85%,45%,1)),
to(hsla(34,85%,50%,1)));
}
.custom li:nth-child(2) a::before {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,60%,1)),
to(hsla(34,85%,55%,1)));
}
.custom li:nth-child(2) a::after {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,45%,1)),
to(hsla(34,85%,50%,1)));
}
.custom li:nth-child(3) a {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,70%,1)),
color-stop(0.49,hsla(34,85%,65%,1)),
color-stop(0.5,hsla(34,85%,55%,1)),
to(hsla(34,85%,60%,1)));
}
.custom li:nth-child(3) a::before {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,70%,1)),
to(hsla(34,85%,65%,1)));
}
.custom li:nth-child(3) a::after {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,55%,1)),
to(hsla(34,85%,60%,1)));
}
.custom li:nth-child(4) a {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,80%,1)),
color-stop(0.49,hsla(34,85%,75%,1)),
color-stop(0.5,hsla(34,85%,65%,1)),
to(hsla(34,85%,70%,1)));
}
.custom li:nth-child(4) a::before {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,80%,1)),
to(hsla(34,85%,75%,1)));
}
.custom li:nth-child(4) a::after {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,65%,1)),
to(hsla(34,85%,70%,1)));
}
.custom li:nth-child(5) a {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,90%,1)),
color-stop(0.49,hsla(34,85%,85%,1)),
color-stop(0.5,hsla(34,85%,75%,1)),
to(hsla(34,85%,80%,1)));
}
.custom li:nth-child(5) a::before {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,90%,1)),
to(hsla(34,85%,85%,1)));
}
.custom li:nth-child(5) a::after {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,75%,1)),
to(hsla(34,85%,80%,1)));
}
.custom li:last-child {padding-left: 35px;}
.custom li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.custom li:last-child a::before {border: 0;background: transparent !important;}
.custom li:last-child a::after {border: 0;background: transparent !important;}
.custom li a:hover {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,40%,1)),
color-stop(0.49,hsla(34,85%,35%,1)),
color-stop(0.5,hsla(34,85%,25%,1)),
to(hsla(34,85%,30%,1)));
}
.custom li a:hover::before {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,40%,1)),
to(hsla(34,85%,35%,1)));
}
.custom li a:hover::after {
background: -webkit-gradient(linear, left top, left bottom,
from(hsla(34,85%,25%,1)),
to(hsla(34,85%,30%,1)));
}
続いて以前あちこちで取り上げられてた、パンくずリストをいくつか再現してみる。
※あくまでそれっぽくしただけです。
続きを読む
]]>
