CSS by T. Afif :verified:

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.

Public Key

npub1w9xzec0p0vusgvpu3wsxf4qcma7tt2wkz8jj2gf4rnvjns59zvvslwpcdf

NIP-05 Address

css_at_front-end.social@mostr.pub

Profile Code

nprofile1qqs8znpvu8shkwgyxq7ghgry6svd7l9448tpref9yy63ekffc2z3xxgpz4mhxue69uhhyetvv9ujumt0wd68ytnsw43qzg7pxa

Publishing to

relay.mostr.pub

Author Public Key

npub1w9xzec0p0vusgvpu3wsxf4qcma7tt2wkz8jj2gf4rnvjns59zvvslwpcdf

Show more details

Last Notes

2024-08-08 21:24:03

It's time to learn a new CSS trick. Cool demo guaranteed!
👉 https://random.css-tip.com 👈
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/928/503/588/093/620/original/7b747923e577bf91.png

2024-08-07 20:40:33

- reply

More CSS-only shapes: https://css-shape.com/
#CSS #HTML

2024-08-04 11:23:40

🧩 CSS Shape
https://css-shape.com/rounded-edge/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/903/489/466/429/851/original/b556bc84b7c2be9e.mp4

2024-08-03 10:24:25

🎨 CSS pattern
https://css-pattern.com/waves/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/897/598/618/849/906/original/249661a97148f2c1.png

2024-07-31 11:22:14

- reply

@npub1h75…5usp If it's only about background (or decoration), I suggest this method as well: https://css-tip.com/overflowing-background/

2024-07-31 10:53:51

- reply

@npub1ztm…wrpw thanks 👍

2024-07-30 00:24:51

- reply

@npub1xgx…4t7k the issue is when you have the scroll. You cannot scroll to see the full content when you don't use "safe". The part on the left is always hidden.
"safe" is only useful when using overflow: auto/scroll

2024-07-29 18:38:00

- reply

@npub1j8q…ma30 why including the body in the selector?

2024-07-29 11:12:46

- reply

One use case for getting the width/height of any element is to be able to count a lot of things.
Here is an example where I am counting the lines of text. There is no JavaScript, and the number adjusts based on the content you enter.
Online Version: https://css-tip.com/count-lines/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/869/470/230/183/438/original/77e7764371600e25.mp4

2024-07-27 11:08:31

- reply

@npub1ywy…tm8s Thanks for this 🙏

2024-07-25 16:39:20

Do you want to see some CSS magic? 🪄
Check my latest article at Frontend Masters. A CSS-only solution to get the width/height of any element 🤯
https://frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css/
A good overview of what is possible using modern CSS features!
#CSS #HTML

2024-07-19 18:33:02

- reply

@npub17cs…xjws too far actually 😅 but we have the same "hacky notice" at the start 🙃

2024-07-19 07:46:11

- reply

@npub17cs…xjws it also worked for me yesterday and I am writing about it today. I don't know why but I have a feeling that you got the same "working idea" as me 😅

2024-07-18 19:50:03

- reply

if we omit the decorative parts, the CSS code is not that big
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/809/225/631/721/843/original/8f87fcb98da8fa40.png

2024-07-18 14:34:37

- reply

@npub1nfn…yxrx le code marche très bien de mon coté sur Firefox. D'ailleurs je ne vois rien de suspect qui peut le rendre non fonctionnel

2024-07-18 09:15:34

- reply

@npub1xpy…yjva cannot agree more: https://css-tip.com/fluid-typography/
I hate all those 12.235px, 14.694px, 16.587px that I see in the dev tools 😫 (making the calculation based on 1em a nightmare as well)

2024-07-17 14:32:16

- reply

@npub1nfn…yxrx dans ce case, le soucis vient du coude lié au "text gradient". Si tu peux montrer un example, ca pourra peut-être aider.

2024-07-17 14:00:01

- reply

@npub1nfn…yxrx Tu peux essayer ceci
@supports not (background: linear-gradient(in lch,red 0 0)) {
/* fallback code */
}

2024-07-17 13:53:22

- reply

Here is an example of a data validation through the Dev tools.
"darkpink" could have been a valid color. The browser will show you a warning and use the initial-value as a fallback. Without @property, there is no way to know the issue.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/802/159/352/579/532/original/b1ed543277233f8a.png

2024-07-16 08:50:39

- reply

@npub16zw…tamu thanks 😊

2024-07-15 13:49:18

- reply

@npub17yg…s5rv I have a similar idea "in draft" but instead of JS I want to try using only CSS and scroll-driven animation.

2024-07-15 10:35:54

- reply

@npub1x0d…njhy only 2 is good, I always expect more to be glitching on Safari-devices 😅

2024-07-15 10:14:24

Another set of funny loaders!
The Polygons CSS Loaders: https://css-loaders.com/polygons/
Now the collection counts 654 single-element CSS loaders 🤯
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/789/972/788/375/114/original/2c2017e8efa7fe21.mp4

2024-07-12 09:37:51

What name would you give to the below shape? 👇
I have a lot of ideas but I need to find the most accurate one for my shape collection (https://css-shape.com/)
Imagine yourself doing a google search trying to find how to create the below shape using CSS.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/772/839/159/470/956/original/eef56965b651305c.png

2024-07-10 11:24:31

💡 CSS Tip!
Save this code for the future! It will be the easiest way to add a gradient coloration to borders while having rounded corners.
✅ No pseudo-element
✅ One gradient layer
✅ Transparent background
⚠️ There is no implementation yet, but it's good to know.
Related: https://github.com/w3c/csswg-drafts/issues/9456
Online Version: https://css-tip.com/border-gradient/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/761/930/707/681/696/original/d48f7e87f1235a1c.png

2024-07-08 08:10:21

- reply

@npub1v5h…wtr7 This can give you a few ideas: https://stackoverflow.com/a/60492086/8620333

2024-07-04 08:10:33

- reply

@npub1xgx…4t7k Won't cover all the cases (example using margin: https://codepen.io/t_afif/pen/PorYNKK/0378b14968e8a3985a173923830c5d44)
it's only useful in particular cases

2024-07-02 21:31:06

Grainy texture using CSS gradients
https://css-tip.com/grainy-texture/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/719/023/418/258/500/original/2983e7a1fb28f2f8.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/719/024/234/052/323/original/20b18d6747d96816.png

2024-06-30 10:07:34

🎨 https://css-pattern.com/tiny-squares/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/705/011/571/246/915/original/284edb58d5f8606b.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/705/011/660/493/144/original/6c046288963f9040.png

2024-06-28 20:10:04

- reply

@npub1zyl…t54n it seems that border-image and th doesn't play well together 😖
I was a bit fast doing the test but not on the real example.
I will try on your real code and see if I can make it works.

2024-06-26 13:45:28

Adding more loaders to the collection!
The Rolling CSS Loaders: https://css-loaders.com/rolling/
As usual, single-element implementation. Pick your favorite one 👇
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/683/218/849/686/620/original/0a1b147ed64a06b5.mp4

2024-06-26 11:15:50

- reply

@npub1j6x…fx86 There is also a max-width/max-height default values that you need to override as well. try max-width: 100% and max-height: 100%

2024-06-26 11:00:04

- reply

@npub1j6x…fx86 dialog element has a default padding so you may need to add box-sizing: border-box

2024-06-24 14:36:28

- reply

@npub1tkc…a7wa input range can be styled with the new scroll driven features. ex: https://css-tip.com/range-slider-tooltip/

2024-06-21 12:01:55

- reply

@npub1rnp…sg2k
try adding
`
height: 0;
min-height: 100%;
box-sizing: border-box;
`
to aside element

2024-06-19 09:12:17

Here is a good idea: Instead of repeating the same classes into child elements, let's instead move everything to the parent element. Less redundancy and easier to read.
The next step is to move those classes into a separate file. Not sure if it's a good idea but worth trying.
#CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/112/642/475/537/109/018/original/e37f233dab6ef4f2.png

2024-06-18 11:07:40

📝 New CSS Article!
Another article around CSS shapes. This time, I am explaining how to easily invert an existing shape created using clip-path (Cut-out shapes)
👉 https://verpex.com/blog/website-tips/how-to-create-cut-out-shapes-using-the-clip-path-property
Easy steps to follow to invert any kind of shape!
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/637/288/742/360/791/original/fd3db0dfc483d52f.png

2024-06-17 15:47:06

Adding a new set of loaders to my online collection.
The Mechanic CSS Loaders: https://css-loaders.com/mechanic/
As usual, a single-element implementation. Pick your favorite one 👇
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/632/729/516/436/458/original/2f12217a50a0030f.mp4

2024-06-12 09:42:54

The day I will be using the following syntax 😈
It looks strange but everyone will be doing the same in about 2 or 3 years.
The anchor name will be used in at least 2 different places (or more) so using a variable to store that name will be very common.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/602/994/007/750/720/original/03c331dc9ccade5e.png

2024-06-11 16:07:11

- reply

@npub1xpy…yjva I am also in favor of the 0 specificity 🥳
Actually I already assumed it's 0 specificity: https://css-tip.com/root-selector/ 😅
related: https://github.com/w3c/csswg-drafts/issues/10287

2024-06-10 20:52:12

💡 CSS Tip!
Enhance your text wrapping using two lines of code. No more lonely words at the end of paragraphs, and titles will look much better.
In most cases, you won't see a difference but when it's the case, it looks pretty 👍
Online version: https://css-tip.com/text-wrap/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/594/298/583/260/089/original/0ca64f99add78ed7.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/594/299/084/155/859/original/96ad7ed8598ff32a.png

2024-06-10 18:41:17

- reply

@npub1zdr…2d46 did you consider writing on dev.to?
you will have a better visibility there and people like crazy CSS stuff there 😉

2024-06-04 18:37:32

- reply

@npub1xgx…4t7k it's a demo to illustrate the input, you can easily add any text inside the label as a label. It's irrelevant to the demo so I didn't do it.

2024-06-02 09:55:41

- reply

@npub1k3f…dlj9 You also have to update the position
Here is a demo: https://codepen.io/t_afif/pen/MWdpqVR

2024-06-01 15:28:51

- reply

@npub19fv…h9vl check this: https://stackoverflow.com/a/52015817/8620333

2024-05-31 07:39:58

- reply

@npub1qm5…kqlj
I prefer to manually share them because they don't have the same format and a random feature may share break stuff.

2024-05-30 22:46:04

🛑 STOP Scrolling!
It's time to learn something new in CSS. You are one click away from getting a cool demo. What are you waiting for?
👉 https://random.css-tip.com 👈
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/532/462/709/670/705/original/4b5f5a8cc026a040.png

2024-05-29 21:46:39

- reply

@npub17cs…xjws it looks like you are using the mouse cheat, right? 😜

2024-05-25 12:04:58

I am training the AI 😈
Or the AI makes me feel I am training it but in reality I am not 😅
#AI #Gemini #CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/112/501/621/506/493/520/original/3f28eac5c190807f.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/501/622/296/925/560/original/354495e0be6f042e.png

2024-05-21 21:36:47

- reply

@npub1sdz…fa57 I wrote a small tutorial on how to create simple and also more complex design for checkbox
https://verpex.com/blog/website-tips/how-to-style-checkbox-and-radio-buttons-using-css

2024-05-20 19:10:31

- reply

@npub1qxy…uz7g or like this: https://css-tip.com/overflowing-background/ if it's only about a full-width single color and keep your max-width configuration.

2024-05-19 09:05:39

Help me name these patterns.
How would you call them? 🤔
https://cdn.masto.host/frontendsocial/media_attachments/files/112/466/952/959/354/305/original/28f27403937d6569.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/466/953/813/405/662/original/d52b2fbb5b36f8db.png

2024-05-16 13:54:04

- reply

@npub1a4d…v7ds
@supports (opacity: clamp(0,0,0)) {} ?

2024-05-14 07:24:26

- reply

@npub1zky…u59a I think you have to disable the stretch alignment (align-items: start)

2024-05-08 19:59:53

- reply

You can do the same thing with a different syntax using the color() function.
In both cases, you can either use "none" or "0". "none" is equivalent to "0" but has a special behavior when color interpolation is in play.
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/407/236/829/577/805/original/916e820220549f23.png

2024-05-08 12:00:11

💡CSS Tip!
Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors.
Useful when you want to do some color manipulation.
Online Version: https://css-tip.com/rgb-channels/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/405/353/671/421/538/original/2a91f900fc320f22.png

2024-05-07 19:57:48

- reply

@npub1xgx…4t7k or maybe not in the end: https://github.com/w3c/csswg-drafts/issues/10287

2024-05-07 18:53:00

- reply

@npub1u27…3qfq overflow: auto can also fix your issue.

2024-05-06 18:50:00

- reply

@npub1xgx…4t7k yes, it should be the same as if you used :where(html) {}.

2024-05-06 13:51:55

💡 CSS Tip!
To target the html element, you either use "html {}" or ":root {}" but thanks to CSS nesting you can simply use "& {}"
When used alone, the nesting selector will match the root element!
A one-character selector 🤯
⚠️ It has a lower specificity than html and :root
Online Version: https://css-tip.com/root-selector/
#CSS #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/112/394/401/257/756/857/original/c84217c68c40753a.png

2024-04-20 07:45:41

#SEO / #a11y #accessibility question:
Suppose I have a home page and its content is nothing but different blocks (image + text) that link to internal pages. Does that count as a navigation and I have to use the <nav> element or It counts as the main content and a simple <ul> listing is enough?

2024-01-04 10:26:24

💫 CSS Loaders!
Want some fancy CSS loaders? Check out the Zig-Zag collection!
👉 https://css-loaders.com/zig-zag/
20 new single-element loaders added to the biggest collection of loading animations 🤩
Which one is your favorite? Mine is #18
#CSS
https://cdn.masto.host/frontendsocial/media_attachments/files/111/697/194/328/264/504/original/3b15395649d76f8c.mp4

2023-08-21 21:36:05

- reply

@npub1c35…9pmh are the different height knows?
The container and the element