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

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

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法

「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

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

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

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

記事を読む