個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

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

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

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

月額約400円でWindowsリモートデスクトップが使えるVirmach:MT4もサクサク

Windowsリモートデスクトップが月額400円のVirmach:MT4もサクサクだ!

普段はMacをメインに使っており、Windowsが必要なときにはBootCampでWindowsを使

記事を読む

ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」

CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav

記事を読む

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて

記事を読む

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材を集めてみました。 Mac専用ということもあり、日本ではPhotos

記事を読む