[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック | コリス

2018/03/27 64 users コリス 矩形 box-shadow シャドウ CSS

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシ... 続きを読む

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック | コリス

2014/06/13 109 users video要素 コリス パネル モダンブラウザ ブラウザ

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video デモ 実装 デモ デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。 デモページ コンテンツを配置した右のパネルは、動画が透けて... 続きを読む

[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート | コリス

2013/11/06 68 users コリス CSS アニメーシ ナビゲーション ヘッダ

最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 Animated CSS3 Perspective Menu デモ 実装 デモ デモは水平タイプ・垂直タイプの2種類あります。 まずは、水平タイプでサイドバーを表示するデモから。 デモページ：水平タイプ 左の四本線をクリック・タップすると、アニメーシ... 続きを読む

[CSS]ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック | コリス

2013/06/24 110 users 半透明 コリス ヘッダ レッド ラッパー

全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、、 デモ 実装 デモ デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。 まずは、表示サイズがラッパーの幅960px... 続きを読む

CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル | コリス

2013/06/11 85 users コリス jQuery チュートリアル Opera Safari

CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 Horizontal Portfolio Layout with CSS3 Animations and jQuery デモ 実装 デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧くださ... 続きを読む

[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート | コリス

2013/01/14 157 users レスポンシブ コリス チュートリアル スクリプト グリッド

画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 Who Says the Web is Just for Squares? デモ 実装 デモ スタイルにはCSS3を使用しているため、モダンブラウザもしくはIE9+でご覧ください。 デモページ：1,200pxで表示 グリッドはレスポンシブにも対応しています。 デモページ：800p... 続きを読む

[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル | コリス

2012/11/25 67 users コリス フェード ANSWER jQuery チュートリアル

jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Code a Dynamic Questions & Answers FAQ Page with jQuery デモ 実装 デモ FAQのデザインは、非常にシンプルです。 エフェクトはCSSに依存していないため、自由にデザインを変更して利用できます。 デ... 続きを読む

[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation | コリス

2012/11/13 180 users コリス jQuery エフェクト CSS アニメーション

ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 Stairway Navigation (A jQuery Plugin?) デモ 実装 デモ デモページ デモは4種類あり、それぞれホバーに反応する階段の数が異なります。 階段の反応する数が一つと二つ 階段の反応する... 続きを読む

[CSS]HTMLはシンプルで、紙をぺろっと折ったエフェクトをつけるチュートリアル | コリス

2012/05/31 133 users コリス パラグラフ チュートリアル ぺろ エフェクト

下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置... 続きを読む

[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー | コリス

2012/03/15 218 users コリス パラグラフ コンテンツスライダー Kendo UI

デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 H... 続きを読む

[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... 続きを読む

[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック | コリス

2012/02/19 97 users コリス 矩形 ポパー アロー Safari

デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <o... 続きを読む

これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス

2012/01/18 89 users コリス NAV Container ナビゲーション Opera

デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む

[JS]ダイナミックなアニメーションでページをまるごとズームできるスクリプト -zoom.js | コリス

2011/12/27 64 users コリス jQuery float script ズームイン

デモ 実装 デモ デモページではページ上のどのエレメントをクリックしてもズームイン（拡大）します。 グリーンの「Float」をクリックするとこんな感じになります。 実装 「zoom.js」はjQueryなどの他のスクリプトには依存せずに、単体で実装が可能です。 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/zoom.js"></script> HTML... 続きを読む

[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス

2011/11/03 134 users コリス jQuery 両端 CSS 見出し

紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像... 続きを読む