[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル

サイト構築 -CSS

Post on:2011年5月17日

sponsorsr

画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。
ストライプ柄はボタン以外にも適用が可能です。

Simple buttons with light stripes (pure CSS)
デモページ

[ad#ad-2]

かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。

HTML

ボタンはテキストを使ったa要素で作成されています。

<a class="bt-blue fx-stripes" href="#"><span>Blue button</span></a>
<a class="bt-grey fx-stripes" href="#"><span>Grey button</span></a>

CSS：ストライプ

ストライプのベースとなるスタイルシートです。

.fx-stripes:before {
    content:"|||||||||||||||";
    position:absolute;
    top: -50px;
    left: -50px;
    z-index:1;
           
    line-height: 1;
    font-weight: bold;

    /* Parametres for stripes */
    color: #fff;
    font-size:120px;
    letter-spacing: -8px;
    opacity: 0.1;
    
    -moz-transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
}

CSS：カラーなど

ボタンの形状（角丸・シャドウなど）やカラーやグラデーションのスタイルシートです。
カラーはデモのブルー・グレーだけでなく、自分好みのカラーを使用することもできます。

.bt-blue,
.bt-grey {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;

    background-color: #7596db;
    background: -moz-linear-gradient(center top , #a2c1f7, #7596db);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#a2c1f7), to(#7596db) );

    border-style: solid;
    border-width: 1px;
    border-color: #a2c1f7 #7596db #7596db #a2c1f7;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.bt-grey {
    color: #fff;
    
    background-color: hsl(0, 0%, 70%);
    background: -moz-linear-gradient(center top , hsl(0, 0%, 80%), hsl(0, 0%, 60%));
    background: -webkit-gradient(linear, 0 0, 0 100%, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 60%)) );

    border-style: solid;
    border-width: 1px;
    border-color: hsl(0, 0%, 77%) hsl(0, 0%, 50%) hsl(0, 0%, 50%) hsl(0, 0%, 77%);
}

.bt-blue span,
.bt-grey span {
    text-shadow: hsla(0, 0%, 30%, 0.5) 1px 1px 0px;
}

.bt-grey:hover,
.bt-grey.hover {
    background-color: hsl(0, 0%, 80%);
    background: -moz-linear-gradient(center top , hsl(0, 0%, 60%), hsl(0, 0%, 80%));
    background: -webkit-gradient(linear, 0 0, 0 100%, from(hsl(0, 0%, 60%)), to(hsl(0, 0%, 80%)) );
}

.bt-grey:active,
.bt-grey.clicked {
    background-color: hsl(0, 0%, 90%);
    background: -moz-linear-gradient(center top , hsl(0, 0%, 80%), hsl(0, 0%, 90%));
    background: -webkit-gradient(linear, 0 0, 0 100%, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 90%)) );
    border-color: hsl(0, 0%, 82%);
    outline: none;
}

.bt-blue:hover,
.bt-blue.hover {
    background-color: #84a6ed;
    background: -moz-linear-gradient(center top , #7596db, #a2c1f7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#7596db), to(#a2c1f7) );
}
.bt-blue:active,
.bt-blue.clicked {
    background-color: #bed2f4;
    background: -moz-linear-gradient(center top , #afc3e6, #bed2f4);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#afc3e6), to(#bed2f4) );
    border-color: #a9c4e2;
    outline: none;
}

[ad#ad-2]

上記ストライプ柄にインスパイアされて、プログレスバーに適用するチュートリアルもあります。
ビビッドなストライプも面白いです。