フロントエンドエンジニアもどきの備忘録

デザイナーやらコーダーを経てフロントエンドに落ち着きました。

CSS

FireFoxで2回目のCSSアニメーションが動かない

特定の条件下で、FireFoxでは2回目のアニメーションが実行されません。 発生条件は、「アニメーションの実行時にその要素の親要素のdisplayがnoneからblockに変更されるような処理」の場合です。 入れ子にせず、その要素だけでアニメーションする場合は大丈…

カーソルと傾きでパララックスするやつ作った

github.com 軽量なのが欲しかったので作りました。わりと軽いと思います。 スマホなどでの傾きでも動くんですが、実際さわってみると45度ぐらいを角度0でやったほうがいいのかもと思ったり。。。 デモ それぞれの.layerの要素にdata-depthを設定します。 0~1…

Webkit(Chrome/Safari)でtable内のcontent-boxが効かない

CSS

めったにハマらない罠だとは思うんですが、Webkitではtable直下の要素にcontent-boxが効かないです。 みたところcontent-boxを明示的に指定してもborder-boxな状態になっているようです。 Firefoxではこのようなことは起こりませんでした。 デモ

ChromeとSafariでiframeにborder-radiusが効かない

CSS

解決策としては、外側をブロック要素で囲ってやって、それにborder-radiusとoverflow:hiddenをかけてあげ、position:relativeを指定すると角丸に切り抜くことができます。 <div> <iframe src="hogehoge" width="500" height="500"></iframe> </div> div { position:relative; overflow:hidden; border-radius: 50%; } デモ このバ…

CSSで東京オリンピック2020のロゴ

CSS

codepen.io このtogetterみてたら作りたくなったのでスケッチ。

文字を順番にブラーインさせるSass

Sassを使うとほんと簡単にタイミング調整ができて楽ですね。 (ベンタープレフィックス対応にCompassも使用しています) codepen.io CSS自体はtext-shadowのぼかし幅を縮めていくのと同時に、 文字をフェードインさせて実装します。

IE8のmin-heightはborder-boxを指定した要素でもcontent-boxとして計算されてしまう

CSS

バグなのか仕様なのかはわかりませんが、border-boxをかけていてもIE8ではmin-heightはborderやpaddingを含んで計算されてしまいます。 https://shanetomlinson.com/2012/box-sizing-border-box-padding-and-min-height-bug-in-firefox-and-ie/ 過去にはFire…

モダンCSS設計での失敗メモ

CSS

現在担当しているサービスでSassを使ったBEMの設計を行いました。 当初これでモダンですばらしいコーディングがスタートすると思っていたのですが、 世の中そんなに甘くはなく、また、僕が未熟なこともあり設計上の失敗をいくつか犯してしまったので、今後の…