小技

:has()を使って親要素内に存在する子要素を数えるCSSのサンプル

非推奨のmarqueeタグのような動作をモダンなCSSで再現

文章の任意の行で文字省略を3点リーダーでなくグラデーションで

Ads

CSSだけでスクロールに合わせて動くホログラムっぽいやつ

単一要素で枠線のあるポップなbox-shadowを作る

CSSの@counter-styleでリストのマーカーを自由に生成する

SVGを使ったCSSツールチップ

imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する

CSSでアスペクト比を管理する

detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ

イージングをCSS関数で管理する

CSSのみで、クリックするとGIFアニメが再生されるやつ

CSSだけで任意のテキストを1クリックで全選択

contenteditableな要素にplaceholderを与える

clip-pathで背景を斜めにカットする

CSSだけで画像のビフォーアフターを見れるやつ

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる

CSSで「続きを読む」を作る

子要素の数が特定の数の間である場合にスタイルを適応させる

フローチャート式のサイトマップ

blockquoteのcite属性を使って引用元をユーザーに明示する

外部サイトのリンクにだけ特定のアイコンを付与する