画面全体が切り替わるダイナミックな演出のナビゲーションのアイディア 『Full Page Intro & Navigation』
画面全体に表示されるナビゲーションへの切り替えがダイナミックな演出のナビゲーションの導入の例。CSS3での変形とアニメーションをうまく組み合わせて作られたナビゲーションです
文字の部分をbackground-clip: text;を使って背景をGIF動画にして見せるテクニック
background-clip: text;をつかってテクニック。背景にGIF動画を設置することで、テキストに目を引きつけるのに効果的。
マウスポインターの位置に合わせて動くギャラリースライドがとても印象的 『Hover-Carousel』
Hover-Carousel Yair Even Or GIFアニメにしたもの マウスポインターの位置によって画像を、スマホとかでスライドさせるような感覚で操作できる印象的なスライド とてもめずらしい動作で […]
タグ要素一つだけで作れる、リボン見出しが作れる CSSコード 『Single Element Pure CSS3 Double Fold Ribbon』
Single Element Pure CSS3 Double Fold Ribbon http://thecodeplayer.com/walkthrough/single-element-pure-css3-doub […]
ヘッダー部分がスクロールすると、ついてくるナビゲーションに変化するアイディア
A Pen by Paul Howarth 通常の画像とロゴのヘッダーに見えたのが、スクロールをトリガーにヘッダーの画像をそのまま利用したナビゲーションに変化するアイディアです。 コードはHTML、CSS […]
記事の表示をモバイル向けには、省略形で表示するアイディア 『Mobile Friendly Reading v2.0』
Mobile Friendly Reading v2.0 By Justin レスポンシブデザインでモバイル向けには、テキスト部分を、徐々に文字が薄くなっていくエフェクトを使って省略表示したアイディアです。 […]
すごすぎるVelocityJSを使った、HTML+CSS+jsで作ったアニメーションのデモ 『VelocityJS demo』
カッコイイのひとこですね。 簡単にはこのレベルのアニメーションはVelocityJSというプラグインを使っても作れないでしょうが。チャレンジはしたくなりますね。
rotateを使った三角形のマウスオーバーエフェクト 『List with arrows <』
要素をマウスオーバーした時に、背景色の変化と三角形が現れるエフェクトを与えたものです。
要素の高さを指定するせずにアニメーションがついたアコーディオンを作成するテクニック 『CSS3 Accordion』
開閉の動作は、CheckBoxやjavascriptを使ったものではなく、focusを使ったのも特徴的 heightの高さの変化をtransitionで変化させたのではなく、marginの方を変化させています
MENUのEとバーガーボタンを掛けた アイディア 『MENU + hamburger icon ?』
MENU + hamburger icon ? By cihadturhan MENUを表示させるための三本線のボタンのことをバーガーボタンと言うのですが、そのバーガーボタンとMENUのEを掛けて MENU […]
プニプニ、プルンプルンなCSSで作られたエフェクトが良いボタン 『Gelatin over button effect with Sass』
Gelatin over button effect with Sass By François Lesenne マウスオーバーすると、ボタンがプルンプルンします。このゼリーのようなプルプル感がとても良い […]
リッチ感のあるオシャレなカウントダウンタイマーで目的の日時までのカウントダウンにするのコード 『Countdown Clock』
かなりオシャレに仕上がっているカウントダウンタイマーです、画像は使わずにすべてCSSでデザインされています。とてもリッチ感がありそのまま使えるクオリティです。
アメコミ風のハーフトーンを表現したCSSで作られたbackground 『Comic Book Half Tone Background』
アメリカのコミック風にCSSで背景を作ったものです こちらはBodyにbackgroundとして設定してありますが、見出しの背景とかにこういったアメコミのハーフトーンを使って文字もコミック系のものをつかえば、面白みのある見出しを作れるかなと思います
角が丸くえぐられた感じのカードをCSSのみで作るテクニック 『Fail better: CSS inverted border radius』
角丸の逆、角を丸くえぐった感じのデザインをCSSのみで実現しています。 どうやって作っているのか不思議ですよね、1つのDIVにBeforeとAfterだけではこのようにはつくれません
SVGを使ったヌルヌル動くアニメーションがすごすぎる 『Full SVG Animation (first Test)』
SVGだけで作られています、CSSもjavascriptも使われていません SVGアニメーションだけでこんなことまで出来てしまうとは驚き
input range の値をリアルタイムで表示するjavascriptとデザイン 『Range Input: change live value』
input range はスライドさせることで数値が変化するタイプの入力でボリュームの設定とかに使われるようなものです、それの値をjavascriptを使ってリアルタイムに表示させています
activeのアクションが良い、ちょっと変わったアニメーション付きのボタン 『Change text on :hover and :active』
ボタンをマウスオーバーすると、文字がすり替わり、さらにクリックしている状態でさらに文字がすり替わるというものです。
CSSでちょいオシャレなアンダーラインのタイポグラフィー 『A Better underline』
アンダーラインを少しオシャレにしたもの アンダーラインはbackgroundで1pxで表現されています
CSSだけで作られた高級感のあるデザインとアニメーションの音楽プレーヤー 『Music Player』
これはミュージックプレーヤーとしてデザインされたもので、写真のように表示されているのがアルバムのイメージ、そしてマウスオーバーすることで再生ボタンや、ダウンロードボタン、シェアボタンが3Dアニメーションでアルバムアートワーク部分が少しおられる感じで開き表示されるというものです
ネオンカラーのシンプルなボタンデザイン16色 『AWESOME BLURRY BUTTONS』
ネオンカラーのシンプルなボタンです、文字にも枠線にもボカシをかけてありマウスオーバーでくっきり光る感じになっています、blurをつかってぼかしているので現在はwebkit系でしか動きません クリック(active)でscaleで小さくなります
