[CSS]次のプロジェクトで使える!スタイルシートの極上テクニックのまとめ

CSSの進化が止まりません。

ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。

デモのキャプチャ

Zig Zag Border Created CSS

最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく、普通にdiv一つだけで実装できます。区切り線としてもパネルの飾りとしても利用できます。
SVGを使った版はこちら、Pinked Border

デモのキャプチャ

Pure CSS3 Notepaper

CSSのみでメモ帳のようなエレメントを作りだします。チュートリアルのページのようにコードをノート風に記すのもいいですね。

デモのキャプチャ

CSS and SVG Masks

画像を使ってさまざまな形状にマスクするCSSとSVGのテクニック。

デモのキャプチャ

CSS3 Neon Glow

CSSのみで文字をスタイルし、ホバーでネオンのように輝かせます。実際には↑のキャプチャよりアニメーションでもっと輝いています。

デモのキャプチャ

CSS3 Hidden Social Buttons

Twitter, Facebookなどのソーシャルメディアのボタンを設置する時に悩むのがそのデザイン。そんな問題を解決するソーシャルボタンを隠して配置するテクニックです。

デモのキャプチャ

Flexible CSS cover images

ページ上部の打ち出し画像に、どんな表示サイズでもアスペクト比を維持したまま最も大きなサイズで画像を表示させるテクニック。

デモのキャプチャ

Pure CSS Classy Footer

フッタやページの下部に面白いインタラクションを加えたアイデア。

デモのキャプチャ

Pure CSS Responsive Nav

レスポンシブ用のナビゲーションをさまざまなエフェクトで表示します。

デモのキャプチャ

Cutting Corners with CSS

パネルの片隅をカットしてスタイルします。単なる矩形のパネルがおしゃれになりますね。

デモのキャプチャ

G+ header effect

背景画像をブラーにして、くきっりした画像やテキストを重ねるGoogle+のヘッダのようなエフェクトをCSSで実装します。

デモのキャプチャ

CSS Gitched Text

テキストにパルス間隔の揺れるアニメーションを与えます。

デモのキャプチャ

Font Size Idea

レスポンシブ用のfont-size指定のアイデア。
ルートはpx指定、コンポーネントごとにremで定義し、各エレメントにはemで適用。レスポンシブ用の各サイズごとにはルートで振り分けるため管理も楽。

CSS

簡単に書くとこんな感じに。

/* ルート */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}

/* コンポーネント */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* 各エレメント */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

top of page

©2017 coliss