CSSでテキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するテクニックのまとめ | コリス

2021/05/24 12 users コリス text-shadow box-shadow CSS

テキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するCSSのテクニックを紹介します。 ネオンライトはCSSのtext-shadowやbox-shadowで実装されており、CSSアニメーションやJavaScriptで動きを加えるとさらに面白くなります。 各デモは「Run Pen」をクリックすると、動作します。 まずは、ネオンサイン... 続きを読む

新鮮なアイデアが満載！アニメーションやスクロールを使った実装テクニックのまとめ | コリス

2014/10/21 91 users コリス CodePen スクロール アニメーション 下部

見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。 各デモのコードを見たい時は、下部の「Edit this Pen」をクリックするとコ...記事の続きを読む 続きを読む

最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills | コリス

2014/04/16 387 users Refills コリス ブッダ モーダル アコーディオン

ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。 Refills Refills -GitHub デモでは、さまざまなコンポーネントの動作が確認できます。 ナビゲーション 下に半分見えてるのは、打ち出しコンテンツ 各デモの「Show C... 続きを読む

スマフォやタブレットなどのタッチデバイスでちょっと面白いサムネイルプレビューを与える -Kort | コリス

2012/10/29 25 users iPhone コリス ポパー Webkit系 Safari

デスクトップのホバーだけでなく、タッチデバイスのタッチとスワイプでもかっこいいアニメーションを伴ったサムネイル画像のプレビューコンセプトを紹介します。 Kort デモはiPhone, iPadなどのタッチデバイス、デスクトップだったらWebkit系のChrome, Safariでご覧ください。 オススメはタッチデバイスです。 各デモは、サムネイル画像をタッチすると複数の画像がアニメーションで広がる... 続きを読む

[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS | コリス

2012/04/19 443 users マウスホバー コリス 記述 ミス CSS

画像を一切使用せずに、さまざまな形状をつくるスタイルシートを紹介します。 Neo Sample 各デモはマウスホバーで、その形状をつくるコードが表示されます。 Eample 1 ただ、残念なことにコードに記述がミスがある [...] 続きを読む

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス

2012/02/27 735 users コリス box-shadow Effec エフェクト CSS

デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effec... 続きを読む

背景画像をブラウザの枠いっぱいに表示するテクニックの考察 | コリス

2010/11/25 480 users トレンド たくさん CSS3 ページ下部 実装方法

最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニッ... 続きを読む