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を使えば、画像を拡大しても画質が下がることがないので、その特性を活かしてレスポンシブでも背景全体が回っているかのように演出することが出来ます。
Bootstrapを使ってWEBサイトを作ってみようぜ 第3回 「セットアップして利用開始できる環境を作ろう」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
フッターを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種類のパターンが作られており、ひとつはお気に入りのものが見つかるかな？と思います
ちょっと水に濡れた所で絵の具で描いたかのような滲む感じがあるタイポグラフィ 『Physical Typography – Resonate 2014』
なんとも、不思議でカッコイイ、タイポグラフィ 絵の具が水で滲む感じの演出です 色はランダムに変化していきます
SVGフィルターで写真をマウスポインターがあるところにフォーカスされる効果を実現するテクニック 『Depth of field effect with SVG filters』
Depth of field effect with SVG filters By vcurd マウスポインターを画像の上で動かすと、マウスポインターがあるところがフォーカスされるように表現されます、SVGフィルターを使 […]
360度のパノラマ画像をスクリーンに写しだして表示しているかのように見せるテクニック 『Panoramic (pure CSS)』
CSSのみでパノラマ写真を360度回転させながら、その場で周りを見渡しているかのようにするテクニック。
ページのスクロールに合わせてプログレスバーが進むアイディア 『Reading Position Indicator』
ページの全体のどれ位の位置にいるかが分かるようになっている、ページのスクロールに連動したプログレスバーです。
マウスオーバーによる、表示の切替とjQueryをつかってdataを読み込むテクニックを使ったデザイン
Pen By Arron Hunt プロフィールの下にあるアイコンをマウスオーバーすることで、スイッチが入りそれに関連した情報が表示されるようになっています、またマウスオーバーした後でもスイッチは有効のままで表示されたま […]
マウスと連動して背景が動くパララックス効果を使ったキュートなデザイン 『Simple Parallax with jQuery』
マウスを動かすことで、背景の一部が連投して動くパララックス効果を使った背景です。 また、背景もキュートでポップなデザインで完成度が高いです。
複数の違ったサイズの画像を決まったサイズのブロック内に最大の大きさで天地中央(上下、左右で中央)で表示するテクニック 『Vertical/Horizontal Centering』
画像をブロック内で天地中央表示するテクニック
真似したくなっちゃう良質なポートフォリオデザインとHoverアクション 『Portfolio Selector』
Hoverを使ったアクションで初期状態では見切れている画像の部分が中央へ移動するアクションです
バーガーボタンの作成とアニメーションのアイディア 『Starbucks Mobile Nav Hamburger』
バーガーボタンの三本線の方を作ったんではなくて、背景を緑にして、その上にbeforeとafterで棒線をつくりそれがアニメーションしてクロスするというものです
レスポンシブに画面幅が狭くなると簡素に変形していくアイコンが新しい 『Pure CSS Responsive icons (one div)』
色々なレスポンシブデザインがありますが、アイコンをレスポンシブにしちゃうんなんて驚き。全くもって私にはこんな発想がなかったので驚きと、新しいボキャブラリーというか、WEB制作での引出しが増えるわけで、喜びを感じます
Bootstrapを使ってWEBサイトを作ってみようぜ 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
