スポンサーリンク
ひさしぶりにCSSの小ネタを紹介します。
CSS3のtransformを利用して、斜めに傾いているグローバルナビゲーションを作ります。
作り方はすごく簡単です。
まずHTMLを↓のように書きます。
<ul class="clearfix">
<li>
<a class="inner" href="#">
<span>HOME</span>
</a>
</li>
<li>
<a class="inner" href="#">
<span>ABOUT</span>
</a>
</li>
<li>
<a class="inner" href="#">
<span>NEWS</span>
</a>
</li>
<li>
<a class="inner" href="#">
<span>SHOP</span>
</a>
</li>
<li>
<a class="inner" href="#">
<span>CONTACT</span>
</a>
</li>
</ul>
HTMLではリストタグを横並びに並べるコードを書くだけです。
そしてCSSはこちら
.clearfix:after {
clear:both;
display: block;
content: "";
}
li {
float:left;
list-style-type: none;
}
li .inner {
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
display: block;
border-right:1px solid #333;
text-decoration: none;
background-color:#84dbdb;
padding:10px 16px;
}
li .inner:hover {
background-color:cadetblue;
}
li .inner span {
display: block;
-webkit-transform: skewX(-150deg);
-moz-transform: skewX(-150deg);
transform: skewX(-150deg);
color:black;
}
ポイントは親要素である li .innerをtransform:skewX(150deg);をつかって150deg傾けたあと、小要素であるspanタグを逆方向に150deg傾けます。つまり skewX(-150deg);を記述します。小要素を逆方向に傾けないと、先に記述した親要素に引きづられて文字まで傾いてしまうからです。ブロック要素にしたアンカータグを傾けたあとで、中に記述してある文字を逆に傾けて、傾きを打ち消すイメージですね。この考え方はCSS3でいろいろな事をするときに使えますよ!
以上です。ちょっと斜めに傾けておしゃれなグローバルナビゲーションを作るときに使ってくださいね。
スポンサーリンク
スポンサーリンク