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

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

  • 0
  • 0
  • 7
  • 0
clock-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
  • 7
  • 0

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

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

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー

左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ

記事を読む

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

ブラウザの閲覧履歴をファビコンで一覧表示するChrome機能拡張

もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」

ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を

記事を読む

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味

記事を読む

Unslider

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

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

記事を読む