2013/11/05
人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。
紹介されているコードの種類・クオリティがとても高く、参考にするには最適なサイトです。
今回はそんなCodePenの中から特に人気のあるコードサンプルをご紹介します。
「こんなのしてみたかった」というサンプルがあると思うので、参考にしてみてください。
また、ここで紹介しているサンプル以外にも、本家のサイトに行けば、新しい発見があると思いますよ。
見ているだけで純粋に楽しいです。
CSS3だけでパララックス効果を表現した
Parallax Landscape
CSS3だけでパララックス効果を表現しています。
Parallax Landscape
ページ遷移がなめらかな
CSS-Only Responsive Layout with Smooth Transitions
ページ遷移がなめらかなで、しかもレスポンシブ。
CSS-Only Responsive Layout with Smooth Transitions
パカっと開く動きがかっこいい
Twitter Button Concept
パカっと開く動きがとても素敵なTwitter用ボタン。
Twitter Button Concept by Erik Deiner
CSS3で作られたカレンダーCalendar
CSSだけつくられたカレンダーです。
Calendar
CSS3で作られたローディングアニメ
CSS3 Loading Animation
CSS3で作られたローディングアニメーションです。
CSS3 Loading Animation
CSS3で作られた垂直型メニュー
Pure CSS3 Vertical menu with nice hover effect
ホバーエフェクトが素敵な垂直型メニューです。
Pure CSS3 Vertical menu with nice hover effect
CSS3で動作する時計CSS3 Working Clock
CSS3で動作する時計です。
CSS3 Working Clock
CSS3だけで作られたプライスタグ
CSS3 pricing table
CSS3だけで作られたプライスタグです。
CSS3 pricing table
CSS3だけで作られたプリローダー
CSS Loader
CSS3だけで作られたプリローダー数種。
CSS Loader
CSS3だけで表現されたMacたち
Pure CSS3 MacBook Air with Thunderbird Display and Keyboard
CSS3だけで表現されたMacたち。
Pure CSS3 MacBook Air with Thunderbird Display and Keyboard
CSS3のスタンプ
CSS3 Stamp effect using radial gradients
CSS3だけで作られたスタンプ。
CSS3 Stamp effect using radial gradients
ブラーエフェクトのI ♥ BLUR
ブラーエフェクトがホバーするとピントがはっきりするアニメーション。
I ♥ BLUR
パンくずのTiny CSS3 Round Breadcrumb
アニメーションがカッコイイパンくず。
Tiny CSS3 Round Breadcrumb
ホバーエフェクトがかっこいい
CSS3 Hover Effect using :after Psuedo Element
ホバーエフェクトがかっこいいメニューです。
CSS3 Hover Effect using :after Psuedo Element
ソーシャルボタンのSocial Navigation
ソーシャルボタンをCSS3で作っています。
Social Navigation
ログインフォームのLogin
CSS3でつくられたログインフォーム。
Login
はやりのロングシャドウエフェクトを使った
Social Footer
流行のロングシャドウをソーシャルアイコンに施しています。
Social Footer
温度計のCSS3 Thermometer
CSS3だけで温度計を表現しています。
CSS3 Thermometer
天気ウィジェットFlat CSS3 Weather Widget
天気ウィジェット。
Flat CSS3 Weather Widget
レスポンシブ対応のスライドアニメーションの
Flat Responsive Sliding Boxes
レスポンシブ対応のアイコンがスライドするアニメーション。
Flat Responsive Sliding Boxes
マウスオーバーでアイコンが現れる
Flat UI Element (All CSS)
マウスオーバーするとソーシャルアイコンが現れます。
Flat UI Element (All CSS)
CSS3だけつくられた様々なシェイプ
CSS Flat Button Shapes
CSS3だけつくられた様々なシェイプです。
CSS Flat Button Shapes
メールアプリUIのEmail UI
メールアプリのUIを表現。
Email UI – Dribbble Rebound
アイコンをCSSで作成した
Flat Icons CSS
CSSを使ってアイコンをDribbble風に表現。
Flat Icons CSS – Dribbble Remake
おまけ:Mona Lisa with pure CSS
CSSでモナリザを描いてしまった!
Mona Lisa with pure CSS
おまけ:Pure CSS Totoro
CSSだけでトロロを描いてしまった!
Pure CSS Totoro
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」
レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Fra
-
-
便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始
商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。
-
-
レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW
-
-
CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」
CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自
-
-
1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」
CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co
-
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
-
CSS3の色名147色(RGB、HEX16進カラーコード併記)
CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。
-
-
WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」
WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ
-
-
WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」
WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid
-
-
ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」
ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し