要素の高さを指定するせずにアニメーションがついたアコーディオンを作成するテクニック 『CSS3 Accordion』
開閉の動作は、CheckBoxやjavascriptを使ったものではなく、focusを使ったのも特徴的 heightの高さの変化をtransitionで変化させたのではなく、marginの方を変化させています
FaceBook風のダイアリログを表示するjQueryのプラグイン 『FaceBook Dialog』 の使い方
Facebook風にモーダルウィンドウが現れるようにするjQueryのプラグインです。色使いとかレイアウトはFacebook風なんですが、表示するときのエフェクトは色々設定があり好きなモノが選べれるようになっています & […]
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でデザインされています。とてもリッチ感がありそのまま使えるクオリティです。
jQueryのscrollとscrollTOPを使って一定量をスクロールしたら実行するコードの例
ナビゲーションがすぐに付いてくるのではなく、ある一定量をスクロールしたら付いてくるタイプのナビゲーションがありますよね、あのようなものを実装するのにjQueryを使えば簡単に出来てしまいます […]
アメコミ風のハーフトーンを表現した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で小さくなります
マウスオーバーで紙がペロっとめくれ上がる演出を実現するコード 『3D Hover Folding Effect』
3D Hover Folding Effect By Silke Voigts 紙に見立てたエリアをマウスオーバーすることで、ぺろっとめくれ上がる演出がアニメーション化されたものです、めくれ上がった下に何か […]
スクロールに連動してキャラが落下していくさまを表現したアニメーション 『Falling Down the Rabbit Hole』
よく出来た演出で、背景とキャラクターもとてもいいかんじです GIFアニメだと少しわかりにくいかもしれないのですあ、ぜひリンク先で体験してみてください
テーレッテレーと効果音を付けたくなる、カラフルな集中線が回転するアニメーション 『Colored rays on SVG』
実用性というか、少しネタ的なものですが SVGを使えば、画像を拡大しても画質が下がることがないので、その特性を活かしてレスポンシブでも背景全体が回っているかのように演出することが出来ます。
フッターをfixedで固定したちょっとしたパララックス効果を与える演出 『Fixed footer』
フッター部分をposition: fixed;で固定することで、ページをスクロールしていった時に視覚効果を与えるようになっています
CSSだけで作られたToggleボタン5つのデザイン 『Pure CSS toggle buttons』
javascriptを使わずCSSだけで実現したtoggleボタンと5つのデザイン checkboxを使ってtoggleボタンを実現しています
SVGでアニメーション効果を与えたイカしたチェックボックスとラジオボタンのデザインの8種 『Checkboxes and Radio Buttons with SVG』
SVGを使ったアニメーションで、チェックボックス、ラジオボタンをクリックした時にチェックする様をアニメーションで表したものです、全部で8種類のパターンが作られており、ひとつはお気に入りのものが見つかるかな？と思います
