Skip to content

60-minutes.biz

– 時間を縛ることで、時間を味わってみる –

CODEPENで見つけたスタイリッシュすぎるCSSエフェクトをご紹介。

Posted on 2015年1月7日 By ハマケン
このエントリーをはてなブックマークに追加
Tweet


こんにちわ、ハマケンです。
最近海外のデザインサイトやブログなどをちょこちょこ回っています。
その中で何個かのブログなどでCODEPENの紹介があって、よくシェアされていたエフェクトを8個ほどご紹介します。
どれもクオリティも高くカッコ良いので使ってみては如何でしょうか。

CodePen


Advertisement


CODEPENって何?

CODEPENは、ソースコード、CSS、JSなどを公開・シェアできるサイト。
日本で言うとjsdo.itに近いですね。ライブプレビューが表示されているので、フロントエンド周りの動作確認にも使えます。
シェアも簡単にできるので、デザイナーさんとかにはかなり重宝するし、ノンデザイナーの人も便利ですね。

横長のアコーディオンメニュー


Pure CSS Horizontal Accordion

フラットデザインアイコン


Pure CSS Iconex Flat Icon Set

NEXUS4のフラットデバイス


Nexus 4 Pure CSS

Parallaxな感じ


Pure CSS Parallax Scrolling

CSS3でのチェックボックス


CSS3 Checkbox Styles

本めっちゃスムーズにめくれる。実際は動いてます。


CSS 3D Bending Effect – Page Flip

見てて飽きない。実際は動いてます。


CosmiCZ

写真にテープをペタッとな。


Scotch tape css effect

便利だから使っちゃおう。

如何でしたか?
本当にノンデザイナーでも簡単に実装出来たり、楽しめる世の中になってきましたね。
公開・シェアしていただいているデザイナーや技術者の方々に感謝申し上げます。

と言う訳でCODEPENよりのご紹介でしたー。
それでは。

このエントリーをはてなブックマークに追加
Tweet

WEBページ作成系の記事 Tags:サイト作り

投稿ナビゲーション

Previous Post: 今年、恐らく要チェックなサービス・モノをご紹介いたします。
Next Post: CES2015で話題をさらった、スマートスクーターGogoroに乗ってみたくて仕方ないです。

More Related Articles

AnalyticsでSNSからのアクセスをもっと詳細に計測する方法。 WEBページ作成系の記事
Twitterカードを設定してツイート表示をリッチにしよう! WEBページ作成系の記事
Google Analytics設定:準備編 (オーガニック検索ソース設定) WEBページ作成系の記事
OGP設定しないとバイラルは得られないよ? WEBページ作成系の記事
訪問ユーザー数は過去最高に。今週のアクセス報告 Mar.22nd – 29th. WEBページ作成系の記事
wordpressでネットショップを作るための無料テーマ30選 WEBページ作成系の記事

検索

最近の投稿

  • 中学受験。偏差値30台から1年で60台まで引き上げる方法 | 夏まで編
  • 中学受験。偏差値30台から1年で60台まで引き上げる方法|塾選び編2
  • 中学受験。偏差値30台から1年で60台まで引き上げる方法|塾選び編
  • TikTokの話は米中貿易戦争の一環に過ぎない。
  • 簡単すぎる!画像サイズを超絶小さくする方法
  • 約4ヶ月の在宅で解った、在宅アイテムBest10
  • コロナを通して知った、フルライフと言う生き方。
  • 【永久保存版】最高の #おうちご飯 をサポートする一流のシェフレシピ8選。
  • 今年も梅雨がやってくる。コンビニ傘からのアップデート「アイカサ」を利用してみてはいかがでしょう?
  • 緊急事態宣言が解けた後に小売業者がやらなくてはならない3つの事。

アクセスランキング

  • SoundCloud(サウンドクラウド)で商用利用可、改変可の音源を探す手順...
  • 【知らなかった】161年前の今日。浦賀に来た黒船の実写真があると知って俺の中で超...
  • Stores.jpが25,000店舗を突破。ショップ一覧を検索する方法も公開!...
  • ウィルス予防に知っておきたいマスクの知識を調べさせていただきました。...
  • 2020年、アパレルのオリジナル商品を作るならチェックしておきたいサイト4選 #...
  • 【動画】まるで「みえっちん」!特定のメガネからしか見えないディスプレイが完成!...
  • 【動画】コカ・コーラのOpen Happinessがカッコよすぎて、なんかヤル気...
  • 知っておきたい検索コネタ12個とStores.jpのショップ一覧を検索表示する方...
  • 仕事とは自分の仕事を無くすこと。上司に学んだ、とても大切なメモ。...
  • オリジナル商品が簡単に自分で作れるサービス7選!...

COVID-19 特集

グッと来た動画PR達

全ての小売店に捧ぐ

Copyright © 2023 60-minutes.biz.

Powered by PressBook Blog WordPress theme