css
背景画像にLazyload。
背景画像にLazyLoadをあてれるのかと思って試してみたところ、普通に出来るようでした。 例のpadding-topを使った高さをあわせる方法で、背景画像のサイズもウィンドウに応じて可変します。 スマホの縦に長いページなんかには、画像の読み込みを遅らせられるので有効かも。
css
背景画像のサイズに応じて要素の高さを可変させたい。
背景画像のサイズに応じて要素を可変させたい。 レスポンシブコーディングなどで背景に画像を当てるような場合、高さが可変にならずに困るんですが、その解決策を見つけました。 この場合padding-topが使えるみたいです。 下によると、 ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ Percentages: refer to width of containing block とあるので、％で指定すればpadding-topやpadding-bottomを指定しても親要素の幅に対する割合になるようです。 Chrome, safari, FF, IE9~で確認できました。 参考： https://t87r.wordpress.com/2013/07/07/%E3%82%B5%E3%82%A4%E3%82%BA%E5%8F%AF%E5%A4%89%E3%81%A7%E7%B8%A6%E6%A8%AA%E6%AF%94%E5%9B%BA%E5%AE%9A%E3%81%AE%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99/ http://www.w3.org/TR/CSS2/box.html#propdef-padding-top ありがとうございます！
CSS3
ハンバーガーアイコンレシピ〜apple風~
apple風のハンバーガーアイコン製作メモ。 svgは使ってませんが、それっぽく実装するために。 アニメーションはCSS3で制御しています。 クラスに応じて角度を変えたりしているだけですね。 ハンバーガーアイコン以外にも、応用効きそうです。 参考：http://www.elijahmanor.com/css-animated-hamburger-icon/ Thanks!!