[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス

2019/03/07 67 users コリス CSS グラデーション 実装 ポパー

最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。... 続きを読む

[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説 | コリス

2018/06/08 92 users コリス 色相 CSS 一行 コントラスト

ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いスタイルシートが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。... 続きを読む

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

2014/07/16 143 users エフェクト アニメーション タップ コリス コミュニティ

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

[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners | コリス

2012/10/30 77 users コリス 四隅 CSS エフェクト div要素

[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <... 続きを読む

[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン | コリス

2012/08/24 32 users コリス rAdio checked Webkit系 Name

見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="na... 続きを読む

円形アニメーションで美しいエフェクトを作るCSSのTransitionsを使った実装例:phpspot開発日誌

2012/08/21 25 users Codrops transitions 円形 CSS デモ

Circle Hover Effects with CSS Transitions | Codrops 円形アニメーションで美しいエフェクトを作るCSSのTransitionsを使った実装例。 マウスオーバーで円形に美しいアニメーションをするデモが公開されています。将来的には当たり前のように使われているテクニックかもしれません。 デモが７個あるのですが、円形を使って様々にアニメーションして美しい上... 続きを読む

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

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

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

[JS]iPhone, iPadにも対応したCSS3アニメーションを使ったシンプルな画像ギャラリー -Glisse.js | コリス

2012/02/15 77 users iPhone コリス フルカスタマイズ jQuery iPad

シンプルで、Responsive Web Designにも対応、フルカスタマイズも可能な画像ギャラリーを実装するjQueryのプラグインを紹介します。 CSS3非対応ブラウザでの動作も考慮しています。 Glisse.jsの主な特徴 Glisse.jsのデモ Glisse.jsの使い方 Glisse.jsの主な特徴 Glisse.jsは、CSS3アニメーションの美しいエフェクトを使った画像ギャラリー... 続きを読む

[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect | コリス

2011/10/10 75 users コリス jQuery アロー 半透明 CSS

デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div clas... 続きを読む

[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ドルぐらいだったら個人でも払える... 続きを読む