css

css, 5 hours ago to CSS

💡 CSS Tip!

One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future!

It will make sure the width of your element is always an integer! No more decimal and rounding issues!

"width: auto" with an upgrade 😎

No browser support yet but you can test it on the latest Chrome with the experimental flag enabled: https://codepen.io/t_afif/pen/rNgLyJz

#CSS #HTML

jkjustjoshing, 21 hours ago to CSS

Is there ever a time when this

width: 100%;
max-width: 480px;

behaves differently than this?

width: 480px;
max-width: 100%;

#css #html #WebDesign #webdev

danrot, 1 day ago to webdev

I am sincerely wondering how hard it is to style a #HTML checkbox using #CSS. I'd be happy with just aligning them with a label, but this already seems to be asking for a lot. And most answers I find online are already outdated...

But hey, if you know more than I do let me know 🙂

chriscoyier, 2 days ago to random

Assuming the premise that us CSS developers aren't reaching for container queries as much as well all thought we would is true...

Why do you think that is?

css, 3 days ago to CSS

I released a new (better) version of CSS Pattern 🥳

👉 https://css-pattern.com 👈

✅ A unique URL per pattern
✅ Controls to adjust the size & colors
✅ Easy navigation between the patterns
✅ Still One-click to get the CSS code

Enjoy more than 140 CSS-only background patterns! 🤩

It took me 4589 years to name all the patterns 😅 but If you find a better (cool) name for a specific pattern let me know 👇

#CSS #HTML #design

Overview of the new version of css-pattern.com. Showing the home page with different patterns and a few examples where I am adjusting the colors and size.

moh_kohn, 7 days ago to CSS

Can I detect clamp support using @supports? #css

css, 9 days ago to CSS

💡 CSS Tip!

Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields.
✅ No extra element (only one input element)
✅ Less than 15 CSS declarations
✅ Optimized with CSS variables

Demo: https://codepen.io/t_afif/full/XWwbMNO via :codepen: @codepen

Online Version: https://css-tip.com/single-digit-inputs/

#CSS #HTML

Showing the result of the linked demo. A One-Time password field using a single input element.

yuanchuan, 9 days ago to CSS

Chrome has a different behaviour from FF and Safari.

They used be the same. I'm not sure if the spec changes or Chrome has a bug in recent releases

https://codepen.io/yuanchuan/pen/bGydpjP

#CSS #grid #aspectratio

Source code grid { display: grid; width: 600px; height: 200px; background: #f0f0f0; grid-template-columns: repeat(10, 1fr); } grid > div { border: 2px solid #000; width: 50%; aspect-ratio: 1; }

css, 13 days ago to CSS

📝 New CSS Article!

After the "Ultimate Collection of CSS Shapes". It's time for "The Modern Guide for making CSS Shapes". 🤩

https://smashingmagazine.com/2024/05/modern-guide-making-css-shapes/ via @smashingmag

A huge compilation of many CSS Tricks I have been using since years in this guide. All the secrets for creating CSS shapes are there!

Enjoy reading my 100th CSS Article! 🥳

#CSS #HTML #web

css, 14 days ago to CSS

💡 CSS Tip!

How much code is needed to create a Sparkle shape? ✨
Only one gradient and you can easily get the border-only variation.

Demo: https://codepen.io/t_afif/full/eYaYzxX via :codepen: @codepen

Online Version: https://css-tip.com/sparkle-shape/

#CSS #HTML

Two sparkle shapes. The second one is a border-only variation.

css, 15 days ago to CSS

💡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

J12t, 15 days ago to CSS

Today I learned:

display: flow-root

which solves a real problem for me. https://stackoverflow.com/questions/78439601/shrink-border-of-a-html-element-which-shares-space-with-a-floating-element #CSS

ben, 16 days ago to random

Stack Overflow announced that they are partnering with OpenAI, so I tried to delete my highest-rated answers.

Stack Overflow does not let you delete questions that have accepted answers and many upvotes because it would remove knowledge from the community.

So instead I changed my highest-rated answers to a protest message.

Within an hour mods had changed the questions back and suspended my account for 7 days.

Diff view of a stack overflow question showing it being changed from the original text to a protest message, then being changed back again by a mod. Protest text reads: Why does OpenAI get to profit from our work? I have removed this question in protest of Stack Overflow's decision to partner with OpenAI. This move steals the labour of everyone who contributed to Stack Overflow with no way to opt-out. OpenAI has a history of flooding the web with inaccurate information and have explicitly stated that they will never pay creators for their work.

tixie, 17 days ago to CSS

round(), mod(), sign(), abs()CSS functions aren't in Chromium based browsers yet (only on Firefox and Safari) 😭
#WhyWeCan'tHaveNiceThings

https://caniuse.com/mdn-css_types_round
https://caniuse.com/mdn-css_types_mod
https://caniuse.com/mdn-css_types_sign
https://caniuse.com/mdn-css_types_abs

So… do you know if there ways to add some JS "polyfilling" (?) those functions to be able to use them in prototypes/technical demos. To allow everyone to be able to display them correctly no matter their browsers instead of just displaying a "only works on recent Firefox and Safari" banner?

#CSS #CSSPolyfill #JavaScript

css, 17 days ago to CSS

💡 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

css, 17 days ago to CSS

🧩 https://css-shape.com/circle-cut/

#CSS #HTML

A screen record of the provided link. Showing different circular cut shapes with an online editor to update the code.

css, 19 days ago to CSS

🧩 https://css-shape.com/curved-edge/

#CSS #HTML

A screen record of the provided link. Showing different curved edge shapes with an online editor to update the code.

andybond, 21 days ago to random

I now mark the books I’m currently reading with a ribbon on https://andy.bond/now!

Really cool stuff by @css ❤️

css, 23 days ago to CSS

💡 CSS Tip!

Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.
✅ Only the image element
✅ No pseudo-element
✅ Transparent gap
✅ Optimized with CSS variables

Demo: https://codepen.io/t_afif/full/yLrWeQP via :codepen: @codepen

Online Version: https://css-tip.com/status-indicator/

#CSS #HTML

three rounded images with a status indicator at the bottom right

dansays, 26 days ago to CSS

#CSS nerds, I need your help with a stupid layout problem!