UNORTHODOX WORKBOOK

2017.04.04 Tue

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

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

2016.07.27 Wed

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

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

2016.04.30 Sat

様々な正多角形をCSSで再現する

東京オリンピックのエンブレムが十二角形を基準としているという話を聞いて、CSSで十二角形を作るにはどうやるんだろと思ってやってみたらあっさりできてしまったので、いっそのこと色々な多角形をCSSで作ってみようということで作…

2015.12.29 Tue

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

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

2015.06.21 Sun

CSSのブレンドモードを使った3Dのような表現

使いどころがよく分からなくて、CSSのブレンドモードは、今まで一度も使ったことがありませんでした。対応ブラウザが少ないというのもありますし。 イメージでは背景色と背景画像をブレンドするものと捉えていましたが、実際には複数…

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等でちょっとしたプログ…