[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋

次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。

まずはアニメーションが楽しいデモから。
※上から10個くらいはアニメーションgifです。

デモのアニメーション

Spuishy buttons in CSS

ゴムのようにぐい~んと押した感が楽しいボタン。

デモのアニメーション

The glow ribbon

かわいく実装されたリボンに繊細なアニメーションを加えます。

デモのアニメーション

Swipeable Cards

スワイプすると、次々にカードがアニメーションで表示されます。
※切替にはスクリプトを使用。

デモのアニメーション

Expanding text box/button

検索フォームの通常時はサークル状のアイコンで、入力時に気持ちいいアニメーションで伸びます。

デモのアニメーション

Sparkles

テキストをホバーすると、背景に華やかなアニメーションを展開させます。

デモのアニメーション

CSS Responsive animated Accordion

アコーディオンに大胆なアニメーションを加えたデモ、レスポンシブ対応。

デモのアニメーション

Sonar Effect

スクロールコンテンツで、スクロールを促すかっこいいアニメーション。

デモのアニメーション

CSS Ripple/Wave checkbox and radio button

チェックボックスやラジオボタンを選択した時に広がる波紋のエフェクト。

デモのアニメーション

UI Button SVG/CSS3 hover effect

SVGを使ったシンプルなかっこいいアニメーション。

デモのアニメーション

Some :active & :focus effects

フォームの入力時にアイテムを目立たせると入力しやすいですね。

デモのキャプチャ

CSS3 3D hover coverflow

CSSで実装されたカバーフロー。

デモのキャプチャ

Fixed header & BG with △ indicator, IE8 supported

IE8対応、固定ヘッダの上部に三角を配置。

デモのキャプチャ

Gradient menu

繊細なグラデーションが美しいナビゲーション。

デモのキャプチャ

Zig Zag Scroll

スクロールするとジグザグの背景が流れます。

デモのキャプチャ

Border Animation Effect with SVG

ホバーすると、SVGを使った美しいアニメーションを適用します。

デモのキャプチャ

BG Pattern

画像無しで、パターンを使った背景を実装。

デモのキャプチャ

simple oval shadow

ホバーでシャドウがちらちらアニメーションします。

デモのキャプチャ

Jagged border

シンプルなマークアップで、かわいいジグザグのボーダーを実装。

デモのキャプチャ

Skewed background with CSS

コンテンツの区切りを斜めのラインで。

デモのキャプチャ

Roating Circle

CSSアニメーションで実装するプリローダー。

デモのキャプチャ

CSS only line numbers

CSSで行に対応する数字を実装します。

デモのキャプチャ

Cool Gradient

上部からライトが当たっているかのような繊細なグラデーション。

sponsors

top of page

©2018 coliss