[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar | コリス

2017/02/22 95 users ヘッダ コリス スクリプト 下部 上部

デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメ ...記事の続きを読む 続きを読む

[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser | コリス

2015/09/16 100 users レスポンシブ対応 ハンバーガーメニュー アイコン コリス 選択

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。 ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。 Paradeiser Paradeiser -GitHub Paradeiserの特徴 Paradeiserのデ... 続きを読む

[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック | コリス

2014/11/10 188 users セクション スクリプト 実装 コリス 各セクション

フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装...記事の続きを読む 続きを読む

[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック | コリス

2014/10/02 89 users パタッ コリス span article CSS

スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。 パタッは2種類、↓の一つ目から二つ目を想像してみてください。 Reading Is Fundamental 見事に再現されていますね。 HTML 一つ目に紹介したデモ、半分からパタッとなるHTMLから。 開く時のテキストの区切れはspanで実装します。 <article> <a clas... 続きを読む

[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル | コリス

2014/08/20 235 users パララックス コリス チュートリアル エフェクト CSS

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモはパララックスの構造を可視化できるので、より分かりやすいと思います。 Pure CSS parallax scrolling websites パララックスのデモ パララックスの実装 パララックスのデモ デモは非常にシ... 続きを読む

スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス

2014/05/29 141 users コリス jQuery ウェブページ スクリプト video要素

jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 Basic Fullscreen Video Background レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常に... 続きを読む

[CSS]スクリプト無し、レスポンシブ用のナビゲーションを表示するちょっと素敵な7種類のアニメーション | コリス

2014/01/28 138 users エフェクト Off Canvas HTML コリス 去年あたり

スタイルシートで実装するレスポンシブ用のナビゲーションを表示する7種類のアニメーションのエフェクトを紹介します。 コンテンツをスライドして横からナビゲーションを表示するOff Canvasのスタイルは、去年あたりから数多くのサイトで見かけるようになりましたね。 Pure CSS Responsive Nav HTML ベースとなるHTMLは、下記のようにシンプルです。 [html] One Two... 続きを読む

[CSS]スクリプト無し、スタイルシートで実装するパララックススクロール | コリス

2014/01/22 203 users コリス パララックス パララックススクロール CSS 一目

パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 Pure CSS Parallax Scrolling デモをスクロールすると、コンテンツと背景が異なるタイミングでスクロールされて表示されます。 背景が派手なので、効果も一目で分かりますねｗ スライド2では、左の2枚の画像も異なるタイミングで重なります。 実装方法を簡単... 続きを読む

[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション | コリス

2014/01/14 152 users アニメーションgif 切替 アニメーション スライド デモ

スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 Off Canvas Menu with Animated デモの動きをアニメーションgifにしてみました。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される... 続きを読む

[CSS]癒されたい人へ！窓越しの雨粒がどんどん増えていくスタイルシート -CSS Raindrops | コリス

2013/11/28 68 users コリス 窓越し キャプチャ CSS 静止画

以前、JavaScriptで雨を再現した癒やし系スクリプトを紹介しましたが、今日紹介するのはスクリプト無し、CSS3アニメーションで実装する窓越しに楽しむ雨粒を紹介します。 キャプチャは静止画ですが、CSS3アニメーションで雨粒がどんどん増えていきます。 続きを読む

[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through | コリス

2013/11/17 241 users 半透明 スライダー スクリプト GIFアニメーション コリス

画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 デモのアニメーション 上記のgifアニメーションは軽量化のためコマ数を落としていますが、実際の動作はもっと滑らかで気持ちいいです。 下記ページでお試しください。 radio click through スライダーの動... 続きを読む

[CSS]ヘッダをホバーするとナビゲーションがスライド表示されるスタイルシート（スクリプト無し） | コリス

2013/07/10 53 users コリス スクリプト アニメーション ヘッダ 実装

スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 Create a Hidden Sliding Navigation Bar Using CSS3 Transitions デモ 実装 デモ デモは、CSS3アニメーション対応ブラウザでご覧ください。 デモページのアニメーション 通常時は細めのヘッダとコンテンツ... 続きを読む

[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ | コリス

2013/06/13 134 users ナビゲーション アニメーション レスポンシブ対応 アイコン

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 エフェクトは、こんな感じです。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの... 続きを読む

IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス

2013/05/13 146 users コリス iOS モーダルウインドウ モダンブラウザ 配置

テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む

[CSS]スクリプト無しで実装できる、アニメーションで表示・非表示する通知パネル | コリス

2012/06/26 40 users コリス パラグラフ div CSS アニメーション

デモページ：通知パネル拡大 実装 実装のポイントを紹介します。 HTML パネルはdiv要素で実装し、パラグラフとバーを内包しています。 <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></div> </div> CSS 通... 続きを読む

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

2011/07/26 256 users コリス Alt Photos section要素 グリッド

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt=... 続きを読む

[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート | コリス

2009/05/10 194 users コリス CSSplay table 半透明 Opera

スクリプト無しで、tableで配置したコンテンツをドロップダウン型のナビゲーションのパネルに表示するスタイルシートをCSSplayから紹介します。 Professional - drop down table menu demo パネルの透過処理は、IE6にも対応しています。 対応ブラウザは、IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google ... 続きを読む