CSS snippet
CSS Tricks
下拉選單安全區
背景
【CSS】使える背景パターン、実装サンプル25選(コピペで簡単です)
コピペでできる!cssとhtmlのみで作るいい感じの背景パターン 12選 - copypet.jp
code:html
<span style="padding: 4px 16px; font-size: 1.3em; background-color: transparent; background-image: repeating-linear-gradient(-45deg, white, white 2px, transparent 0, transparent 4px);">GARA HAIKEI</span>
【CSS】「これどうやる?」アップルやテスラのWebレイアウト再現テクニック集
捲動時固定部份區塊(CSS)
全頁式捲動(CSS)
觸控式橫向捲動(CSS)
上拉式延伸內容(CSS)
捲動時縮放部份區域(CSS)
霧面玻璃效果(CSS)
https://twitter.com/Steve8708/status/1531101973985890305
backdrop-filter: saturate(180%) blur(20px);
時間軸(CSS)
凸顯表格同行同列(CSS)
slider
https://twitter.com/jh3yy/status/1748809599598399792
https://x.com/jh3yy/status/1854895417541968218
Multi Colored Text with CSS – Bram.us
Skewed Flexbox Panels
Responsive app switcher or carousel UI with CSS view()
ブラックなボタン
チケットなボタン
テキスト-フェードイン|Webアニメーション
HTML&CSSだけで実装する「3Dスライドテキスト」
https://codepen.io/TajShireen/pen/LYyOzJL
VHS
Scotch VHS CSS
設定為子元素中的最大寬度
「子孫要素の中でもっともサイズの大きい要素」のサイズを CSS のみで利用する
width/height的值為auto時,會以子元素指定為<length>的值的margin/padding/width/height進行計算
以%指定的值會被無視
navbar
https://x.com/jh3yy/status/1855346126700118495
code:css
li:has(a:is(:hover, :focus-visible)) {anchor-name: --a;}
ul::before {
left: anchor(--a left);
width: anchor-size(--a width);
}
顯著顯示table的行列
https://x.com/jh3yy/status/1887245206418038860
:has()
code:css
td:has(~ td:hover),
table:has(td:nth-of-type(3):hover)
tr:not(:first-of-type):has(~ tr:hover)
td:nth-of-type(3) {
background: var(--highlighted);
}
CSS
snippet