この記事はFrontrend Advent Calendar 2013 18日目への投稿です。
Webサイトの装飾を担当するCSSには様々な機能追加・改良が加えられ、レベル3(CSS3)となった今、かつて画像やFlashなどでしか表現できなかったようなことが、CSSのコードを書くだけで実現できるようになりました。
CSS3で実装されたプロパティやセレクタを使うと従来画像にしていたものが、CSSだけで表示できたり、デザインのためだけに必要だった無駄なHTML要素が減ったりして結果的に読み込み速度とメンテナンス性の向上に役立ちます。
ここではCSS3で表現されたデザインサンプルをご紹介します。
/* 共通クラス */
.button {
-webkit-appearance: none; /* ブラウザのデフォルト表現をリセット */
border-radius: 2px; /* 角丸ボタンにする */
cursor: pointer;
padding: 8px 16px;
}
/* infoボタン */
.button-info { /* 青色ボタン */
background-image:
linear-gradient(#34b5d3, #14a2c0); /* うっすらとしたグラデーション */
border: solid 1px rgba(51, 51, 51, 0.1);
color: #fff;
}共通クラスは必要最低限にしておくと、無駄な上書きが増えずにすみます。 グラデーションは差が少ない色を指定し、よく見たらグラデーションしているくらいの方がスマートに仕上がります。
指定の要素を角丸にするにはborder-radiusプロパティを使います。ユーザにとって認知しやすく、安心という印象をあたえる角丸は、ボタンやサムネイル画像など様々なパーツに使用されます。
hover中やdisable時のスタイルも擬似セレクタを使って指定します。
.button-info:hover {
background: #14a2c0;
color: rgba(255, 255, 255, 0.7);
}
.button-info:disabled {
background: #a2dbe7;
color: rgba(255, 255, 255, 0.4);
}
.photo-item {
opacity: 0.6; /* デフォルトの透明度を0.6(60%)にして薄く表示する */
transition: opacity 0.2s; /* :hover時のtransition設定 0.2秒で透明度が変化する */
}
.photo:hover {
opacity: 1; /* :hover時には透明度を1(100%)にして写真をくっきりと表示させる */
}opacityを使ってON/OFFを表すのはよく使う手法です。 ここでは、transitionを指定して、ふわっと変化させてみました。
.header::before {
border-radius: 50%; /* 50%で円を作る */
box-shadow: /* 複数の影を指定 */
10px -105px 0 rgba(204,0,204,0.2), /* rgbaで透過して後ろの背景が見えるようにする */
30px -200px 0 rgba(204,102,204,0.1), /* x, yともに位置をずらす */
-30px -290px 0 rgba(204,102,204,0.1),
190px -250px 0 rgba(204,102,204,0.1),
270px -320px 0 rgba(204,0,204,0.2),
450px -100px 0 rgba(204,0,204,0.2);
content: "";
height: 100px;
width: 100px;
/* ...省略... */
}box-shadowには複数の値を指定することができます。これをうまく使うとイラストを描くこともできます。1DIV リラックマなんていうのもありましたね。
.box-beat {
background-color: #c90099;
backgroun-image: /* 複数の背景画像を重ねます */
-webkit-radial-gradient( /* #1 透明から紫(#c09)になる円形グラデーション */
50% 40%,
transparent 20%,
#c09 100%
),
-webkit-linear-gradient( /* #2 紫(#f9f)と白(#fff)交互の縦線 */
left,
#f9f 50%,
#fff 50%
);
background-size: 30px, 100%; /* #1の背景を30pxずつリピートさせてビートボックスっぽくする */
}複数のbackground-imageを指定して、それぞれのbackground-sizeを指定すると様々な背景表現ができます。 background-repeatは指定されていないのでデフォルト指定のrepeatになります。 ここでは、円形グラデーションと線形グラデーションを組み合わせてダンスビートのような背景画像を作ってみました。
.box-candy {
background-color: #c90099;
backgroun-image:
-webkit-radial-gradient( /* #1 透明から紫(#c09)になる円形グラデーション */
50% 40%,
transparent 20%,
#c09 100%
),
-webkit-linear-gradient( /* #2 紫(#f9f)と白(#fff)交互の縦線 */
#f9f 50%,
#fff 50%
);
background-size: 100%, 30px; /* #2の背景は30pxずつリピートさせてストライプにする */
}ストライプの上に円形グラデーションを乗せて、看板のようなイメージを作ってみました。 線形グラデーションを使ったストライプ・ボーダーは便利です。
.icon-star {
-webkit-background-clip: text; /* 背景画像を文字型に切り抜く */
background-color: #ff0;
background-image:
linear-gradient(transparent, rgba(255, 255, 255, 0.2)),
linear-gradient(transparent 50%, #adff4f 50%); /* ボーダーを作る */
background-size: 100%, 0.1em;
font-family: "FontAwesome"; /* Web fontを読み込む */
-webkit-text-fill-color: transparent; /* テキストの塗り色を透明にして、背景色が見えるようにしている */
}文字型に背景画像を切り取って華やかな文字を作ります。background-imageには外部画像を指定することもできます。 アイコンフォントはWE LOVE ICON FONTSから読み込んでいます。
.mark03 {
background-color: #f9c;
position: relative;
}
.mark03::before,
.mark03::after {
background-color: #f9c;
content: "";
height: 1.1em;
position: absolute;
-webkit-transform: skew(10deg); /* 10deg歪ませて、ペンで書いたような効果を与える */
width: 1em;
z-index: -1;
}
.mark03::before {
left: -0.2em;
top: 0;
}
.mark03::after {
bottom: 0;
box-shadow: -2px 0 0 #f9c;
}before/after擬似要素に歪ませた領域を指定して、ペンで書いたような効果を与えてみました。
.list::after {
content: "";
border-right: 2px solid #ccc; /* 左側にボーダー */
border-top: 2px solid #ccc; /* 上側にボーダー */
height: 8px;
margin: -4px 0 0;
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: rotate(45deg); /* 右に45度回転させてディスクロージャを作る */
width: 8px;
}ディスクロージャは左・上のみボーダーを付けたボックスを45度回転させて作ります。
body {
counter-reset: num; /* カウンター変数numをリセットする */
}
.item {
counter-increment: num; /* .item要素にヒットするたびにnumに+1する */
/* ...省略... */
}
.item::after {
background: #fc3;
content: counter(num); /* カウント数を挿入する */
/* ...省略... */
}counter-incrementを使うと指定した要素が出現するたびにカウンタの値を変化させることができます。 表示させる際には、contentプロパティを使用します。
.loading-bar::before {
-webkit-animation: width-0to100 1s infinite ease-out;
background-color: #6cf;
/* ...省略... */
}
@-webkit-keyframes width-0to100 {
0% { width: 0; }
100% { width: 100%; } /* widthを変化させて左から右へ動いているように見せる */
}左から右に動くバータイプのローディングインジケータです。ease-outを指定しているので後半になるにつれゆっくりと変化します。
.loading-circle {
-webkit-animation: rotate-r 0.9s infinite linear;
border: 3px solid #6cf;
border-radius: 50%;
border-right-color: transparent; /* 右サイドを透明にして間をあける */
border-right-width: 1px;
/* ...省略... */
}
@-webkit-keyframes rotate-r {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); } /* 右方向に360度回転 */
}くるくる回るローディングインジケータです。transformのrotateを変化させています。
<li class="count-item">1</li>
<li class="count-item">2</li>
<li class="count-item">3</li>
<li class="count-item">4</li>
<li class="count-item">5</li>
<li class="count-item">6</li>
<li class="count-item">7</li>
<li class="count-item">8</li>
<li class="count-item">9</li>
<li class="count-item">10</li>HTML内にカウントダウンに必要な要素を記述します。
.count-item {
opacity: 0; /* 初期表示時には見えないようにする */
}
.count-item {
-webkit-animation-duration: 1s; /* 1秒間アニメーションする */
-webkit-animation-name: disappear;
-webkit-animation-timing-function: linear;
}
.count-item:nth-child(9) {
-webkit-animation-delay: 1s; /* 1秒遅らせてアニメーションを実行することによりカウントダウン */
}
.count-item:nth-child(8) {
-webkit-animation-delay: 2s;
}
/* ...省略... */
@-webkit-keyframes disappear {
0%, 50% { opacity: 1; }
100% { opacity: 0; } /* さっと消える */
}最後は少し遊びも含めて、animationプロパティでカウントダウンをしてみました。1秒のアニメーションを1秒ずつ遅らせて実行しているのでカウントダウンしているように見えます。 せっかくカウントダウンしたので、花火を打ち上げてみました...!
駆け足でお伝えしましたが、いかがでしょうか。
その他、全81のサンプルを先日発売させていただきました『CSS3逆引きデザインレシピ』にまとめています。 興味のある方はぜひお手にとってみてください。
 |
セレクタ/flexbox/リスト/タグ・パンくず/図形/フォーム・表・グラフ/設計/パフォーマンス/プリプロセッサ/スタイルガイドなど全81項目のサンプル集を載せています。 |
|---|
明日は、Tenderfeelさんの「とあるソシャゲのHTML/CSS設計話」です。実際の現場はどうなっているのか...! 楽しみにしています。