とても便利そうなサイトの記事を見つけたので、備忘録としてまとめ。
短いコードで実装できる CSS の小技まとめです。
見つけた記事はこちら。
【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-tips-3
ぬるぬる動くスムーズスクロールの実装方法や、Webフォントの表示遅延を回避する方法などがまとめられています。
以前紹介した CSS で計算式を扱える calc() や、画像をトリミングできる object-fit プロパティも紹介されていました。
確かに、上記 2つには大変お世話になりました…！
記事はこちらから。
【CSS】スタイルシート内で計算式が使えるcalc()が便利
【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利
で、紹介した記事で個人的に面白いと思ったのが、テキストを円形に回り込ませる方法です。
円形要素、例えば円形の写真に対して shape-outside: circle(); を指定すると、画像の周りにテキストを丸く回り込ませることができるそうです。
サンプルは記事に載っているので、そちらをご参考にしてください。
なお、画像自体が円形である必要はなく、border-radius プロパティで円形したものでもOKみたいです。
以上、CSS の小技集についてのおすすめ記事のご紹介でした。
