💡 kachibito.net
Resources
OSS
AI
CSS
JavaScript
WordPress
ホーム
css
小技
: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属性を使って引用元をユーザーに明示する
外部サイトのリンクにだけ特定のアイコンを付与する
次のページ
1
2
3
次へ
メニュー
Resources
OSS
AI
CSS
JavaScript
WordPress
ホーム
検索
トップ
サイドバー