ビールのシュワシュワを表現した CSSアニメーション 「Beer」
ビールのあの、シュワシュワ感を表現させてCSSのみで作られたアニメーションです HTMLとCSSはメタ言語で書かれているので、一見短めのコードになっていますが
クールにアニメーションするアイコン付きのボタンデザイン 「Animated Buttons using CSS3 Transitions and Transforms」
Hover時のアニメーションがクールなボタンデザインです 右側の矢印のアイコン部分がHoverすることでアニメーションして変形し、それぞれのボタンの意味のアイコンになります
スライドして画像が開くアニメーションのギャラリーデザイン 「Slider with oblique border」
画像と画像の境界線を斜めにしたデザインで Hoverすると、画像が広がって見えるギャラリーになっています
見てて楽しいギミックがたくさんの WEBデザイン 「My Summer Vacation (Doodles)」
鉛筆で書いたかのような演出のWEBデザインです 白黒だけでしっかりと表現されています
シンプルにこだわってみた検索ボックス 「Minimal Search Form」
最小構成のシンプルな検索フォームのデザインを目指したものです CSSもシンプルです
マウススクロールせずに全部の項目を選ぶことが出来る ドロップダウンメニュー 「Dropdown」
クリックして表示されるドロップダウンメニューの項目がすべて表示しきれていない状態でも、マウススクロールをせずともマウスポインターに合わせてオートスクロールすることで、選択することが出来るメニュー
FlickrからJSONで画像を呼び出して表示する 超シンプルなテンプレート Get Flickr Images
非常にシンプルな構造のテンプレートになっています 個人のWEBサイトで自分のFlickrにある画像を取り出して表示するページを作るのに使えそうです
1ページまるごと使うユニークな六角形のメニューが面白い
一面六角形で覆い尽くされた画面で、その六角形がメニューになるというものです メニューのしたい六角形は HTMLの例を見れば簡単に理解できると思います
jQueryで作られた付いてくるサイド・カートメニュー(プラグイン不要) Fixing the cart on scroll
スティッキー系のプラグインんを使わずに、jQueryだけで付いてくるメニューを作ったものです プラグインの用に、クラス名やidを指定するだけで動作するようにはなりませんが コード自体が短く軽量なので少しでも、ファイルサイズを下げたいときに参考になるかと思います
CSSで作ったリボンデザインのボタン Ribbon Btn
CSSだけで作られたリボンで、hoverアクションもあるボタンとなっています コードはコピペで使えるようにまとめられています
フリックで操作出来るスイッチ(ボタン)のデモ On/Off FlipSwitch with a bit with touch event
On/Off FlipSwitch with a bit with touch event By kirkas ボタンをクリックしたままスライドさせることでオン・オフを操作出来るボタンを作る例です スマフォでの操作に導入 […]
ARCTEXT.JSを使ったレトロ感のあるタイポグラフィ Vintage Typography
jQueryのプラグイン ARCTEXT.JSを使って、文字にカーブをかけています ワインのラベルとかのデザインをイメージさせますね
文字をネオン風にしたCSSデザイン 6種 [CSS3] Neon Glow
CSSで文字をネオン管のように表現したものです ホバーすることで、ネオン管が光るようになっています
メニューについてくるアンダーバーを実装するコード Lava Lamp Navigation With Drop Down Menu.Its cool
メニューをhoverすることで、下にあるバーが少し遅れて付いてくるアニメーションを付けたものです
Canvasを使ってhover時にキラキラしたエフェクトを与えるコード Add a little magic!
かなりクォリティーが高い作品です マウスオーバーすることで、その要素にキラキラした効果を与えます、普通に使えます
SVGの基本的な図形の作り方を簡単にまとめたもの Svg Shapes & Lines
SGVで直線、波線、長方形、角丸の長方形、三角形、星形、円、楕円をつくるときのコードがわかります SVGで図形を書くときに参考になりそうです
2つのinputの内容が連動して、表示できる コード Getting username from email adress
一行目のメールアドレスを入力する箇所にテキストを入れると下の項目も連動してメールアドレスの@マークの前の部分が自動的に挿入されるとうものです
テキストエリアのプレースホルダ(消える文字)を複数行対応させる方法 multi-line placeholder text (webkit)
目からウロコが落ちる webkit系限定なのですが、こういう使い方があったんですね テキストエリアに複数行の消えるテキストを表示させる方法です 一行じゃ収まりが悪い時に使えますね
background-clip: text; を使ってグラデーションをアニメーションさせて、文字が光沢しているように見せる テクニック CSS Shimmer Text Effect
文字に背景画像を割り当てる background: text;を使い、文字に背景として設定してあるグラデーションを表示させています
文字のOを時計に見立てたロゴのアイディア NTN Logo Concept
NOW THIS の O のところが時計になっています javascriptを使ってローカルPCの時間の取得と動作をさせています
