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

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

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

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

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

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

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

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

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

[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]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス

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

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