CSSのテクニック・小技 アドベントカレンダー

すいません、力尽きました😇

ひとりで気楽にアドベントカレンダーやろうかなと思ってます。CSSのテクニック・小技・よくやる書き方を1日1つ挙げていきます。

スクラップ上に書いてこうかと思ったけど、検索時に引っかかりやすいように1日ごとに記事にすることにした。

🗓 12/1：テキストが折り返されないほど短いときだけ中央寄せする

🗓 12/2：object-fitで画像をリサイズ・切り抜き

🗓 12/3：text-decorationは意外と色々なスタイル調整ができる

遅れた・・・

🗓 12/4：Appleっぽいグラデーションのテキストを作る

🗓 12/5：CSSでAppleっぽいグラデーションの背景を作ろうとする

🗓 12/6：CSSで画像の読み込みがエラーになったときにだけテキストを表示

🗓 12/7：画像にシャドウをかけて、立体的な本っぽく見せる

🗓 12/8：CSSのmix-blend-mode: overlayで画像の上にテキストをオーバーレイする

🗓 12/9：input type=range のスライダーのデザインをCSSでいい感じにする

🗓 12/10：CSSでテキストの選択部分の背景色を変える

🗓 12/11：scroll-padding-topがsafariでうまく効かない問題と現状のワークアラウンド

🗓 12/12：CSS変数の命名規則

🗓 12/13：親要素の中でも「画面幅いっぱいに広げる」テクニック

🗓 12/14：属性セレクタの便利な使い方

これ毎日書ける気がしなくなってきたな？

🗓 12/15：それっぽいエラーメッセージの表示の仕方

🗓 12/16：番号付きリスト（ol）の数字をおしゃれにする

🗓 12/17：invalidになったinputのスタイルを変える

🗓 12/18：極限まで浮いてるっぽいシャドウを模索する

🗓 12/19：SVGの色を変える

🗓 12/20：おしゃれなプロフィールカードを手軽に作る

🗓 12/21：display: noneを使わずにふんわりと表示・非表示を切り替える

🗓 12/22：セレクトボックス（select/option）にCSSで良い感じにスタイルをあてる

🗓 12/23：CSS Gridでmasonryなレイアウトを実現する

🗓 12/24：みんながよく見るサイトで使われてるフォントを調査する

• https://twitter.com
• https://github.com
• https://google.com
• https://youtube.com
• https://ja.wikipedia.org
• https://amazon.co.jp

🗓 12/25：今後実現するかもしれないCSSの新しい仕様

途中で力尽きたらすんません