TAK's banner
TAK's profile picture

TAK

@tak_dcxi • 17,295 subscribers

CSS驚き屋やってるUI developerです | 個人サイト https://t.co/Lo8MxRqeQQ | Zenn https://t.co/bs9kcK7xvJ

Shorts

<img> 一つだけでパララックスエフェクトを掛ける方法 記述量はたったこれだけである object-position を弄るので 画像の元の大きさは aspect-ratio よりも比率の大きいものを用意する必要があります

<img> 一つだけでパララックスエフェクトを掛ける方法 記述量はたったこれだけである object-position を弄るので 画像の元の大きさは aspect-ratio よりも比率の大きいものを用意する必要があります

48,152 views

scroll-hintみたいなJSを使わずともscroll-stateで横スクロールのプロンプトを表示できるようになったのは大きい `@\container scroll-state((scrollable: inline-start) or (not (scrollable: inline-end)))`でインライン軸のスクロールが可能かつスクロールされていない場合の条件分岐ができる🫵

scroll-hintみたいなJSを使わずともscroll-stateで横スクロールのプロンプトを表示できるようになったのは大きい `@\container scroll-state((scrollable: inline-start) or (not (scrollable: inline-end)))`でインライン軸のスクロールが可能かつスクロールされていない場合の条件分岐ができる🫵

36,013 views

details要素の開閉アニメーション、現状ChromeのみだけどたったこれだけのCSSで対応可能。 ::details-content疑似要素はsummary以外のdetailsの子要素を包含するので、コンテンツのラッパーdiv等を増やさなくてもOK。 Chrome 133からは:open擬似クラスで開閉の状態分岐が可能に。 #Web制作

details要素の開閉アニメーション、現状ChromeのみだけどたったこれだけのCSSで対応可能。 ::details-content疑似要素はsummary以外のdetailsの子要素を包含するので、コンテンツのラッパーdiv等を増やさなくてもOK。 Chrome 133からは:open擬似クラスで開閉の状態分岐が可能に。 #Web制作

19,916 views

flex-shrink は 0 or 1 しか指定しない〜みたいな話を聞きましたが、2カラムレイアウトをレスポンシブする時など、どちらのカラムを先に縮めるかを指示するのに役立ちます。 例えばサイドバーに最大・最小幅と flex-shrink: 9999 のようなデカい値を指定することで ①メインカラムを理想幅(50rem)まで縮める ②サイドバーを最小幅(15rem)まで縮める ③メインカラムを限りなく縮める みたいな順序立てをすることができるため、カラム落ちする前の中間幅でメインカラムが少し狭くなるような問題を解決することができます。

flex-shrink は 0 or 1 しか指定しない〜みたいな話を聞きましたが、2カラムレイアウトをレスポンシブする時など、どちらのカラムを先に縮めるかを指示するのに役立ちます。 例えばサイドバーに最大・最小幅と flex-shrink: 9999 のようなデカい値を指定することで ①メインカラムを理想幅(50rem)まで縮める ②サイドバーを最小幅(15rem)まで縮める ③メインカラムを限りなく縮める みたいな順序立てをすることができるため、カラム落ちする前の中間幅でメインカラムが少し狭くなるような問題を解決することができます。

11,339 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

来月リリースのChrome 135でサポートされる`::scroll-marker`、`::scroll-marker-group`、`::scroll-button()`疑似要素。 動画のようなスライダーが「CSSのみ」で作成可能となる😱 それでいて記述量もそこまで多くない。 #Web制作
0:26
tak_dcxi's profile picture

来月リリースのChrome 135でサポートされる`::scroll-marker`、`::scroll-marker-group`、`::scroll-button()`疑似要素。 動画のようなスライダーが「CSSのみ」で作成可能となる😱 それでいて記述量もそこまで多くない。 #Web制作

TAK

32,695 views • 1 year ago

✏️ #QuickTips たった1行で背景色を画面いっぱいにするCSS 横スクロールなし Sample:
0:46
tak_dcxi's profile picture

✏️ #QuickTips たった1行で背景色を画面いっぱいにするCSS 横スクロールなし Sample:

TAK

16,024 views • 1 year ago

No more content to load