今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect | コリス

2014/07/16 143 users エフェクト アニメーション タップ コリス 新しいUX

Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でも... 続きを読む

水彩タッチの美しいエフェクトをウェブデザインに取り入れるチュートリアルのまとめ | コリス

2012/05/09 272 users コリス noupe ウェブデザイン エレメント チュートリアル

水彩タッチの背景の作り方をはじめ、写真画像を水彩タッチにしたり、水彩タッチのマスクをしたり、ウェブのレイアウトやエレメントに水彩タッチを取り入れるチュートリアルをnoupeから紹介します。 Beautiful Water [...] 続きを読む

[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス

2011/06/13 113 users コリス ドロップシャドウ アコーディオン jQuery 実装

滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 続きを読む

[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス

2011/04/18 346 users コリス box-shadow ウェブデザイン シャドウ CSS

CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることが... 続きを読む

ド派手で美しいエフェクトが満載のFLASHバナー作成ツール『BannerSnack』がすごいぞ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

2009/01/30 380 users IDEA バナー 有料プラン 特殊効果 ライフハックブログ

ブラウザ上で簡単にFLASHバナーを作れるBannerSnackがいい感じです。文字や画像にかけられる特殊効果が豊富なので、ものの数分で「おぉ！」というバナーが作れちゃいます。 なお、無料で作ることもできますが、公開するときに「透かし」が入ってしまうのでそれを取りたい人は有料プランを使ってください（月9ドルから）。ちょっとしたキャンペーンに使うのにいいかもですよ。9ドルぐらいだったら個人でも払える... 続きを読む