CSS by T. Afif
𝗖𝗦𝗦 stuff by 𝗧𝗲𝗺𝗮𝗻𝗶 𝗔𝗳𝗶𝗳
💡 https://css-tip.com
🧩 https://css-shape.com
💫 https://css-loaders.com
📝 https://css-articles.com
⚙️ https://css-generators.com
🏆 https://css-challenges.com
🎨 https://css-pattern.com
🎨 https://css-only.art
- Reposted by CSS by T. Afif🤩 I’m very (VERY!) excited about CSS `ident()` – a feature I proposed and specced – getting prototyped. This allows me to reduce the amount of CSS I have to write when multiple items that behave in the same need to have a unique name. See brm.us/ident for an intro.
- Reposted by CSS by T. Afif[Not loaded yet]
- Reposted by CSS by T. Afif[Not loaded yet]
- 📝 New CSS Article! My first article about using shape() is live. I am officially a shape() spammer so get ready 🫣 Learn the "arc" command by creating flower-like shapes.
- ⚙️ New CSS Generator! Save this link for the future. A tool to easily convert any SVG shape into a CSS one in no time. Powered by the new shape() function! 🤩 css-generators.com/svg-to-css/ ✅ Single-element ✅ Responsive ✅ No more ViewBox headaches
- Reposted by CSS by T. Afifshape(): A New Powerful Drawing Syntax in CSS from @chriscoyier.net on @frontendmasters.com frontendmasters.com/blog/shape-a... #CSS #FrontEnd #WebDev #WebDesign
- Three @codepen.io spark in a row all about using the new shape() 🥳 codepen.io/spark And a new title unlocked: "CSS shape expert" 🤓
- And here is the CSS logo made with the shape() function. Demo: codepen.io/t_afif/full/... via @codepen.io Take a deep breath before looking at the code 🫣
- The @codepen.io logo using the new shape() function. codepen.io/t_afif/full/... Do you think SVG is hard? Wait until this beast becomes widely supported 😈
- The @codepen.io logo using the new shape() function. codepen.io/t_afif/full/... Do you think SVG is hard? Wait until this beast becomes widely supported 😈
- Reposted by CSS by T. Afif[Not loaded yet]
- Let's play a CSS game. Your HTML code is nothing but a random text inside the body. What is the smallest code to center it horizontally and vertically? (hacky code allowed!) Here is my attempt: 1 selector, 2 properties, 47 characters (minified) Can you find shorter?
- Reposted by CSS by T. Afif[Not loaded yet]
- Reposted by CSS by T. Afif[Not loaded yet]
- Reposted by CSS by T. AfifWant a checkerboard pattern? No need to use multiple `linear-gradient()` layers anymore. `conic-gradient()` has been supported cross-browser since 2020! PS: if you can, upvote stackoverflow.com/a/65129916/1... to make it the top answer and get more people (and AI) to use modern, well supported #CSS
- Reposted by CSS by T. AfifWhat's something about the CSS or the way you think about it that's completely different compared to 3 years ago? Did you change a habit, approach, or technique? Think of layout, usage of custom properties, how you work with color, etc.
- It's even better between two blobs! Demo: codepen.io/t_afif/full/... via @codepen.io
- Look at that bouncing blob shape! 👀 css-tip.com/blob-hover/ Another cool effect using the new shape() function!
- Look at that bouncing blob shape! 👀 css-tip.com/blob-hover/ Another cool effect using the new shape() function!
- ⚙️ New CSS Generator It's finally possible. A blob shape using only CSS! 🤩 css-generators.com/blob/ Play with the setting and get a cool shape in no time. ✅ Single element (works with images) ✅ One line of code ✅ Responsive ⚠️ Limited support (Chrome and Safari for now) ⚠️
- ⚙️ New CSS Generator It's finally possible. A blob shape using only CSS! 🤩 css-generators.com/blob/ Play with the setting and get a cool shape in no time. ✅ Single element (works with images) ✅ One line of code ✅ Responsive ⚠️ Limited support (Chrome and Safari for now) ⚠️
- Blob in progress! Stay tuned 👀 They are finally possible using only CSS (no SVG and no Canvas) How? The new shape() function!
- Reposted by CSS by T. Afif[Not loaded yet]
- Another shape made easy using the new shape() function. css-tip.com/heart/ I think I just found my new favorite CSS feature. 😍
- Another shape with rounded corners using shape()! This time it's an arrow-like box. A single-element responsive implementation easy to adjust using CSS variables. css-tip.com/arrow-like-b... A follow up to a post by @chriscoyier.net (cc @trysmudford.com)
- Reposted by CSS by T. Afif[Not loaded yet]
- Another shape with rounded corners using shape()! This time it's an arrow-like box. A single-element responsive implementation easy to adjust using CSS variables. css-tip.com/arrow-like-b... A follow up to a post by @chriscoyier.net (cc @trysmudford.com)
- And here is the code to generate any polygon shape with rounded corners! css-tip.com/rounded-poly... Update the variables then get your code (There is another variation using CSS variables as well).
- I updated my online generator to add the radius option! The easiest way to generate regular polygons with rounded corners. css-generators.com/polygon-shape/ And look at that border-only version! 🤩
- And here is the code to generate any polygon shape with rounded corners! css-tip.com/rounded-poly... Update the variables then get your code (There is another variation using CSS variables as well).
- Reposted by CSS by T. Afif[Not loaded yet]
- And here is the code to generate any polygon shape with rounded corners! css-tip.com/rounded-poly... Update the variables then get your code (There is another variation using CSS variables as well).
- Reposted by CSS by T. Afif[Not loaded yet]
