個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。
紹介されているコードの種類・クオリティがとても高く、参考にするには最適なサイトです。
今回はそんなCodePenの中から特に人気のあるコードサンプルをご紹介します。
「こんなのしてみたかった」というサンプルがあると思うので、参考にしてみてください。
また、ここで紹介しているサンプル以外にも、本家のサイトに行けば、新しい発見があると思いますよ。
見ているだけで純粋に楽しいです。

Contents

CSS3だけでパララックス効果を表現した
Parallax Landscape

parallax-landscape-codepen
CSS3だけでパララックス効果を表現しています。
Parallax Landscape

ページ遷移がなめらかな
CSS-Only Responsive Layout with Smooth Transitions

responsive-layout-codepen
ページ遷移がなめらかなで、しかもレスポンシブ。
CSS-Only Responsive Layout with Smooth Transitions

パカっと開く動きがかっこいい
Twitter Button Concept

twitter-button-codepen
パカっと開く動きがとても素敵なTwitter用ボタン。
Twitter Button Concept by Erik Deiner

CSS3で作られたカレンダーCalendar

calendar-codepen
CSSだけつくられたカレンダーです。
Calendar

CSS3で作られたローディングアニメ
CSS3 Loading Animation

css3-preloader-codepen
CSS3で作られたローディングアニメーションです。
CSS3 Loading Animation

CSS3で作られた垂直型メニュー
Pure CSS3 Vertical menu with nice hover effect

vertical-menu-codepen
ホバーエフェクトが素敵な垂直型メニューです。
Pure CSS3 Vertical menu with nice hover effect

CSS3で動作する時計CSS3 Working Clock

clock-codepen
CSS3で動作する時計です。
CSS3 Working Clock

CSS3だけで作られたプライスタグ
CSS3 pricing table

pricing-table-codepen
CSS3だけで作られたプライスタグです。
CSS3 pricing table

CSS3だけで作られたプリローダー
CSS Loader

loader-css-codepen
CSS3だけで作られたプリローダー数種。
CSS Loader

CSS3だけで表現されたMacたち
Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

flat-devices-codepen
CSS3だけで表現されたMacたち。
Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

CSS3のスタンプ
CSS3 Stamp effect using radial gradients

stamp-effect-codepen
CSS3だけで作られたスタンプ。
CSS3 Stamp effect using radial gradients

ブラーエフェクトのI ♥ BLUR

blur-effect-codepen
ブラーエフェクトがホバーするとピントがはっきりするアニメーション。
I ♥ BLUR

パンくずのTiny CSS3 Round Breadcrumb

round-breadcrumb-codepen
アニメーションがカッコイイパンくず。
Tiny CSS3 Round Breadcrumb

ホバーエフェクトがかっこいい
CSS3 Hover Effect using :after Psuedo Element

flat-menu-codepen
ホバーエフェクトがかっこいいメニューです。
CSS3 Hover Effect using :after Psuedo Element

ソーシャルボタンのSocial Navigation

social-navigation-codepen
ソーシャルボタンをCSS3で作っています。
Social Navigation

ログインフォームのLogin

login-form-codepen
CSS3でつくられたログインフォーム。
Login

はやりのロングシャドウエフェクトを使った
Social Footer

social-footer-codepen
流行のロングシャドウをソーシャルアイコンに施しています。
Social Footer

温度計のCSS3 Thermometer

thermometer-codepen
CSS3だけで温度計を表現しています。
CSS3 Thermometer

天気ウィジェットFlat CSS3 Weather Widget

weather-widget-codepen
天気ウィジェット。
Flat CSS3 Weather Widget

レスポンシブ対応のスライドアニメーションの
Flat Responsive Sliding Boxes

flat-boxes-codepen
レスポンシブ対応のアイコンがスライドするアニメーション。
Flat Responsive Sliding Boxes

マウスオーバーでアイコンが現れる
Flat UI Element (All CSS)

flat-ui-elements-codepen
マウスオーバーするとソーシャルアイコンが現れます。
Flat UI Element (All CSS)

CSS3だけつくられた様々なシェイプ
CSS Flat Button Shapes

flat-button-shapes-codepen
CSS3だけつくられた様々なシェイプです。
CSS Flat Button Shapes

メールアプリUIのEmail UI

flat-email-ui-codepen
メールアプリのUIを表現。
Email UI – Dribbble Rebound

アイコンをCSSで作成した
Flat Icons CSS

flat-icons-codepen
CSSを使ってアイコンをDribbble風に表現。
Flat Icons CSS – Dribbble Remake

おまけ:Mona Lisa with pure CSS

monarisa
CSSでモナリザを描いてしまった!
Mona Lisa with pure CSS

おまけ:Pure CSS Totoro

totoro
CSSだけでトロロを描いてしまった!
Pure CSS Totoro

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 8
  • 16

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」

CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む

デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60

新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今

記事を読む

コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19

CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現

記事を読む

スタイリッシュなポップアップ/モーダルウインドウ用jQueryプラグイン53選

スタイリッシュなポップアップ/モーダルウインドウ用jQuery無料プラグイン25

jQueryで実装できるスタイリッシュなポップアップ/モーダルウインドウ用プラグインをご紹介します。

記事を読む