CSS by T. Afif :verified: / is on Nostr

A lot of 𝗖𝗦𝗦 stuff by 𝗧𝗲𝗺𝗮𝗻𝗶 𝗔𝗳𝗶𝗳

🏆 https://css-challenges.com
⚙️ https://css-generators.com
📝 https://css-articles.com
💫 https://css-loaders.com
🎨 https://css-pattern.com
💡 https://css-tip.com
✨ https://css-only.art
🎮 https://css-games.com
❓ https://css-quizzes.com

I verified myself because I know I am a real person. You can trust me, I know who I am.

Last Notes

2024-10-13 20:16:48

How would you call the below shape? 👇
I am calling the top part "curved edge" and the bottom part "rounded edge" but what about the combination?
I don't want to call it "Rounded & Curved edges" 😅
#CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/113/301/919/253/470/283/original/8de4271e70d5501a.png

2024-03-12 14:19:26

- reply

@npub1kw7…mwjd for designers, CSS mask is a powerful tool especially when you master the mask-composite property.

2024-02-26 15:55:11

- reply

@npub1gx5…cn6r the element(): https://caniuse.com/css-element-function but maybe not something that you'd use regularly

2024-02-26 15:39:35

- reply

@npub1gx5…cn6r the use of `@property` ?

2024-01-12 11:21:45

- reply

@npub1gx5…cn6r Then try this `dt:hover ~ dd:not(dt:hover ~ dt ~ dd) `
https://codepen.io/t_afif/pen/gOELPPy

2024-01-12 11:18:31

- reply

@npub1gx5…cn6r so if the number of sets is unknown, which one would like to select?
If for example you have
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

2024-01-12 11:05:31

- reply

@npub1gx5…cn6r dt ~ dd:not(dt ~ dt ~ dd) ?
https://codepen.io/t_afif/pen/gOELPPy

2023-11-21 16:31:50

- reply

@npub17yg…s5rv @npub19qc…zcnq I don't have font related tips. I probably need to think about making some of them.

2023-11-21 10:58:16

- reply

@npub17yg…s5rv @npub19qc…zcnq
Glad you like them 😊
If it can help, I have a search field in the archive page: https://css-tip.com/archive/
you can use keywords to filter and find the tips again.
I myself use it to verify if I already shared the tip. After more than 100 I also forget some of them 😅

2023-11-21 10:20:25

💡 CSS Tip!
The smallest code to create a simple Tooltip Shape
✅ One element (No pseudo-elements)
✅ Only 2 CSS Properties
✅ Optimized with CSS Variables
Demo: https://codepen.io/t_afif/full/ExrEXoO via :codepen: @npub19qc…zcnq
Online Version: https://css-tip.com/simple-tooltip/
#CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/111/448/029/450/274/484/original/5482485c0f1fe30c.png
https://cdn.masto.host/frontendsocial/media_attachments/files/111/448/030/104/862/489/original/6d9cd2ad9af3df5d.png

2023-11-15 08:28:49

- reply

@npub1ggl…wlnf @npub1xpy…yjva the :scope selector is implicit at the beginning so your selector is `:scope body h2`
https://developer.chrome.com/articles/at-scope/#the-scope-selector

2023-08-04 19:17:29

- reply

@npub1c35…9pmh you are probably looking for min-height:0 on the canvas element?