UNORTHODOX WORKBOOK

2017.04.04 Tue

CSSアニメーション(transition)で起こるバブリングの原因と対策

正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C…

2016.08.08 Mon

外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する

SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても…

2016.07.27 Wed

CSSだけで一覧ページのレイアウトを切り替える

よくあるやつですが、カード型デザインみたいな一覧ページのレイアウトをクリック一発で別のレイアウトへ変更するやつです。 JavaScriptだったり、別ページを用意したり、パラメーターつけたりで変更することもできると思いま…

2015.12.29 Tue

【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時…

2015.06.05 Fri

全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり)

全画面に設置した背景画像をマウスホバーで切り替える方法。全画面の背景画像を含め、全てCSSだけでやっています。 切り替えるだけであれば、間接セレクタを使ってマウスホバー時の背景画像を用意しておけばいいだけなので、結構簡単…

2015.05.24 Sun

CSSでテキストをなぞるようにアニメーションしながら色を変える

なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々…

2015.03.27 Fri

CSSで全画面の画像を真っ二つに切り開く方法

CSSだけで全画面の画像を真っ二つにぶった切る方法です。真っ二つにした上で、観音開きにしたり、スライドさせたりといったアニメーションを加えています。 アニメーションや画像の開閉についても、全てCSSだけでやっています。 …

2015.03.22 Sun

JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法

Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログ…

2015.03.07 Sat

CSSでボーダーの両端を徐々に透過させる

画像を使わずに、CSSだけでボーダー(線)の両端を徐々に透明にする方法は、CSSのグラデーションを使うことで簡単に表現することができます。 ありがちな表現ですけど、グラデーションの書き方でちょっと覚えておきたいこともあっ…