css

moh_kohn, 2 days ago to CSS

Can I detect clamp support using @supports? #css

css, 4 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, 4 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, 8 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, 9 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, 10 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, 11 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, 12 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, 12 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, 12 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, 13 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, 14 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, 17 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, 18 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, 22 days ago to CSS

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

css, 22 days ago to CSS

I just finished my next #CSS article and it's a special one because it will be my 100th article! 🤯

A big piece with more than 6000 words 😬

It's by far the longest article I have ever wrote so I hope you will enjoy it 🤞

After 100 articles, I can say that writing is exhausting but satisfying 😅

https://css-articles.com/

css, 23 days ago to CSS

In case you missed it, I released a huge collection of CSS Shapes

https://css-shape.com/

✅ Different variations for each shape
✅ Optimized code easy to adjust online
✅ One-click to copy the code
✅ More shapes are coming in the future

No more struggle creating CSS Shapes!

#CSS #HTML

Overview of different shapes from the linked resource

css, 24 days ago to CSS

💡 CSS Tip!

Use Modern CSS to write Better CSS!

A lot of new features can help you optimize your code and reduce redundancy.
✅ CSS Nesting
✅ CSS Variables
✅ Media Query range features

Example of Old code: https://codepen.io/t_afif/pen/NWmopYY that you can transform into a Modern code: https://codepen.io/t_afif/pen/mdgvWPP

Online version: https://css-tip.com/better-modern-css/

#CSS #HTML

Overview of the CSS from the second linked demo