ちょっと水に濡れた所で絵の具で描いたかのような滲む感じがあるタイポグラフィ 『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制作での引出しが増えるわけで、喜びを感じます
入力フォームにフォーカスすると鉛筆でカキカキするアニメーションを表示するアイディア 『Simple focus in/out input animation』
inputのフォーカスすることで、入力中であるアニメーションを表示させるアイディアです フォーカスするとPENが左から現れて、カキカキとアニメーションするのが入力中だというのがわかりやすくて良い
画像を右クリックでメニューを出現させるテクニック 『Radial context menu』
子猫の画像の上でマウスの右クリックをすることで、円盤のメニューが出現します 円盤にはなにか機能を付けたりSNSへの共有のリンクを付けたりして使えます
CSSのコピペだけで出来る良質な5つのグラデーション 『Gradients By boltaway』
Gradients By boltaway いい感じのグラデーション5種です。コピペでそのまま使えちゃいます カラーコディネートとか、グラデーションの作成とか得意な方じゃないのでこういうのは助かりますね & […]
ギフトボックスをイメージして作られたパララックスがおもしろ、楽しい 『Gift box』
プレゼントの包み紙を解いて、そして箱を開けるというのをスクロールしていくことで、表現するパララックスです 下にスクロールしているのに、リボンが横にスライドしていくのはなんだか不思議な感じもします
Canvasを使ったカッコイイ幾何学的なアニメーション 『Polycircuit』
Canvasでつくられたアニメーションです 何かのオープニング等で使えそうな演出じゃないですかね
注釈をレスポンシブで表示位置を変えるアイディア 『Responsive Footnotes』
こういう発想はなかった そもそも注釈を作る機会がなかったので、これは面白いアイディア
text-shadowを使ったかわいい、いい感じの簡単なタイポグラフィ 『Close shade example』
SALEという文字に、影を複数指定して作られたものです 文字の色、影のサイズ感もちょうどいい感じ。
自動で近い色を選んでくれるカラーピッカーをウェブに実装出来るコード 『Color Wheel picker similar to Kuler』
丸いサークルのところは画像を使用しています サークルにある、中心になる点をクリックしたまま動かすことで色の選択をします
テキストをジュースのように飲み込むアニメーションとそのアイディアが素晴らしい 『Text animation path[Debbie Harry]』
テキストが流れるようにするテクニックを応用して、テキストを液体に見立ててドリンクを飲みんでいるのを表現していてとてもユニーク
びっくり箱のような感じのボタンをクリックするとボタンが展開していく 『Button Anatomy』
ボタンをクリックするとボタンの内部が見えるというコンセプトになったボタンです ボタンを押したら表示されるボックス型の画像は、内蔵 さらに億の段階では骨の画像
