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

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。
紹介されているコードの種類・クオリティがとても高く、参考にするには最適なサイトです。
今回はそんなCodePenの中から特に人気のあるコードサンプルをご紹介します。
「こんなのしてみたかった」というサンプルがあると思うので、参考にしてみてください。
また、ここで紹介しているサンプル以外にも、本家のサイトに行けば、新しい発見があると思いますよ。
見ているだけで純粋に楽しいです。
Contents
- 1 CSS3だけでパララックス効果を表現したParallax Landscape
- 2 ページ遷移がなめらかなCSS-Only Responsive Layout with Smooth Transitions
- 3 パカっと開く動きがかっこいいTwitter Button Concept
- 4 CSS3で作られたカレンダーCalendar
- 5 CSS3で作られたローディングアニメCSS3 Loading Animation
- 6 CSS3で作られた垂直型メニューPure CSS3 Vertical menu with nice hover effect
- 7 CSS3で動作する時計CSS3 Working Clock
- 8 CSS3だけで作られたプライスタグCSS3 pricing table
- 9 CSS3だけで作られたプリローダーCSS Loader
- 10 CSS3だけで表現されたMacたちPure CSS3 MacBook Air with Thunderbird Display and Keyboard
- 11 CSS3のスタンプCSS3 Stamp effect using radial gradients
- 12 ブラーエフェクトのI ♥ BLUR
- 13 パンくずのTiny CSS3 Round Breadcrumb
- 14 ホバーエフェクトがかっこいいCSS3 Hover Effect using :after Psuedo Element
- 15 ソーシャルボタンのSocial Navigation
- 16 ログインフォームのLogin
- 17 はやりのロングシャドウエフェクトを使ったSocial Footer
- 18 温度計のCSS3 Thermometer
- 19 天気ウィジェットFlat CSS3 Weather Widget
- 20 レスポンシブ対応のスライドアニメーションのFlat Responsive Sliding Boxes
- 21 マウスオーバーでアイコンが現れるFlat UI Element (All CSS)
- 22 CSS3だけつくられた様々なシェイプCSS Flat Button Shapes
- 23 メールアプリUIのEmail UI
- 24 アイコンをCSSで作成したFlat Icons CSS
- 25 おまけ:Mona Lisa with pure CSS
- 26 おまけ:Pure CSS Totoro
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
ホバーエフェクトが素敵な垂直型メニューです。
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
ソーシャルボタンをCSS3で作っています。
Social Navigation
ログインフォームのLogin
CSS3でつくられたログインフォーム。
Login
流行のロングシャドウをソーシャルアイコンに施しています。
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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW
-
-
無料のドメインを取得してレンタルサーバーに設定する方法
ドメインって無料で取得できるサービスがあるのをご存知でしたか? ドメインというとお名前.comなど
-
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
-
40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」
最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー
-
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ
-
-
無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)
html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後
-
-
これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+
海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと
-
-
インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」
Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール
-
-
HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10
HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する
-
-
便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始
商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。