知っておくと便利!あのサイトでさりげなく使われていたCSS小技集

2014/12/01:続編である「最近のサイトで使われていたCSS小技集」を書きました。
今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたいCSSテクニックです。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
画像
簡単に要素を並べる
条件に応じて
テキスト
フルスクリーンメニュー
画像
1.キュレーションサイト風のランキングボタン

キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-increment
で数値を増加させ、content: counter()
でカウンターを表示します。人気の記事を表示させるWPプラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。
html
<ul class="sample"> <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li> <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li> <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li> </ul>
css
ul.sample { overflow: auto; } ul.sample li { counter-increment: sample ; clear: both; line-height: 2; list-style-type: none; position: relative; } ul.sample li:before { border-radius: 50%; background: #222; color: #fff; content: counter(sample); left: -5px; line-height: 1.5; font-size: 12px; padding: 0 5px; position: absolute; top: 5px; } ul.sample img { height: 55px; float: left; padding: 10px 10px 0 0; width: 55px; } span.post-title { font-size: 14px; line-height: 2; }
counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。
他にcontentプロパティは、h1{ content: url(logo.png);}
のように文章やテキストなどに画像を入れたり置換することも可能です。
2.画像の右上に三角形の要素を配置する

長方形のラベルは見かけるけど、三角形はまだ多くないのでメモ。画像の右上に三角形のスペースを作り文字を載せる方法。横幅200pxの画像の上に三角形ラベルを配置したい場合は以下のようになります。
html
<div class="image-inner"> <img src="xxxx.png" width="200" height="100" > <span class="triangle">xxxx</span> </div>
css
.image-inner { overflow: hidden; position: relative; width: 200px; } .triangle { background: #222; color: #FFF; font-size: 14px; padding: 70px 0px 3px; position: absolute; right: -97px; top: -41px; text-align: center; width: 200px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); }
3.透過ネオンカラー
流行りの兆しがありそうなネオンカラーの透過(0.8の部分は調整してください)カラーコードをいくつかメモしておきます。写真の上に載せるとそれっぽく見えます。画像の上に載せるラベルなどに使ったり。
16進数 | RGBa(赤,青,緑,透過) |
---|---|
#8c24c8 | rgba(140,36,200,0.8) |
#4d4dff | rgba(77,77,255,0.8) |
#ff6ec7 | rgba(255,110,199,0.8) |
#ff2090 | rgba(255,32,144,0.8) |
#18ff00 | rgba(24,255,0,0.8) |
#00ff00 | rgba(0,255,102,0.8) |
#83f52c | rgba(131,245,44,0.8) |
#ffff00 | rgba(255,255,0,0.8) |
4.画像の表示範囲を指定

プロパティclip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsoluteにします。rectの中は(上 右 下 左)となります。
5.透過させながら画像を合成する

:cross-fade()
を使うと2枚の画像を合成できます。2枚の画像URLを指定します。100%に近づくにつれ1枚目の透過度が高くなります。
background: -webkit-cross-fade( url(xxx.jpg) ,url(xxx.jpg) , 50% );
6.マスクをかける

WebKit系のみ可、IEは非対応ですがmask-image
を使うとマスクをかけることが出来ます。mask-size
は表示サイズ、mask-position
は表示位置を示します。
-webkit-mask-image: url(img/mask.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
簡単に要素を並べる
7.左右に分割して区切り線を入れる

簡単にカラム数を増やし区切り線を入れます。column-count
でカラム数を増やし、column-rule
で区切り線を入れます。
html
<div> <p> それは一生いよいよその指導者として事のところで作ったた。いくら将来と用意違いはやはりこの採用たでかもから当てばいなけれには使用するだたて、多少にもまかり出ですましたた。 </p> <p> しかも今安心にしてはいませのあるて、中学には、何しろ私かするてするれないない読んられるないないとするて、言葉はかけるて出したん。 </p> </div>
css
div { -moz-column-count: 2; -ms-column-count: 2; -o-column-count: 2; -webkit-column-count: 2; -moz-column-rule: solid 1px #ccc; -ms-column-rule: solid 1px #ccc; -o-column-rule: solid 1px #ccc; -webkit-column-rule: solid 1px #ccc; }
8.段組(横並びで配置)

要素を横並びさせるならテーブル構造のdisplay: table
とdisplay: table-cell;
でも表現出来ます。
メリットはborder
による区切り線の高さを揃えたり、vertical-align: middle;
で高さの中心に要素も持ってきたり出来るところです。
html
<div class="column-table"> <p class="mini-column">そうして筋か正直か誤解を担がたて、今中自分をあらといたいために大指図の絶対に思うらしくまし。</p> <p class="mini-column">今をもどうしても考えて蒙りありますですますて、今にいくらとどまるが脱却はなぜ恥ずかしいでのな。</p> <p class="mini-column">つまりこう万年は手本が好いで、ほかに何だか考えたでしとするば、ないたべきてそこでお安心へ味わっずたら。</p> </div>
css
.column-table { display: table; width: 100%; } p.mini-column { display: table-cell; vertical-align: middle; width: 30%; word-break: break-all; }
9.空要素に色をつける

セレクタに:empty
を指定することによって、空要素にスタイルシートを適用することが可能となります。
td:empty {background: black;}
条件に応じて
10.条件に一致しないと適用
「○○」じゃない時スタイルを適用したい!そんな時は否定疑似クラス:not()
を使います。例えばnot(h1)だけだと、bodyにも「h1以外」が適用されてしまうので、以下のようにクラス名などをつけ詳細まで指定します。
.logo :not(h1) {background: black;}
11.条件一致すれば適用
こちらはCSS4からのセレクタです。:matches()
を使用すると、指定したセレクタと一致した場合にスタイルを適用出来ます。
テキスト
12.中だけ透過させてアウトラインを表示

text-stroke
で文字にアウトラインを表示できます。color: transparent;
を指定することで中を透過させる事が出来ます。分かりにくい時はフォントサイズを大きくします。
h1 { color: transparent; -webkit-text-stroke: 1px #222; }
13.文字詰め

text-rendering: optimizeLegibility;
でカーニング処理を行います。以下のサイトによると「ヒラギノ角ゴ・明朝」を指定していればカーニングが働くとのことです。
14.アンチエイリアス
font-smoothing
で文字を滑らかに表示します。
div { -webkit-font-smoothing: antialiased; }
フルスクリーンメニュー
これから少し多くなりそうな画面全体をオーバーレイさせメニューを表示するものをCodropsからチョイスしました。
15.スライド

画面の切り替え時に、画面の縦方向全体を使いブヨっとした動きを出すスライダー。
16.全画面モーダルウィンドウ

要素をクリックすることで、全画面に中身が表示されるエフェクト。
17.全画面オーバーレイ

オーバーレイでメニューを出します。visibilityプロパティでボックスを消さず、表示・非表示を切り替えています。こちらのエフェクトはよく見かけるようになりました。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
[…] 4. CSS:知っておくと便利!あのサイトでさりげなく使われていたCSS小技集 […]