Posts

css, 5 days ago to CSS

Using modern CSS features to create a custom range slider with a tooltip. There is no JS to update the values, it's pure CSS with minimal HTML 😎

Powered by Scroll Driven animation, Anchor positioning, @​property and more! 🤩

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

Online Version: https://css-tip.com/range-slider-tooltip/

It's Chrome only for the tooltip but the range slider works fine in all the browsers.

#CSS #HTML

Showing two range slider with a tooltip containing the selected values. From the linked demo.

css, 10 days ago to CSS

🛑 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

css, 13 days ago to CSS

🎮 New CSS Game!

What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality!

Play "Super CSS Mario", the first ever CSS-Only game playable using your keyboard. Have fun! 🤩

✅ 0% JavaScript
✅ 100% CSS Magic

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

Record yourself and show me your best attempt (No screenshots & no cheating 😈)

It's a Chrome (or Edge) only. I repeat, it's a Chrome-only experience.

#CSS #HTML #game

Showing a demo of the CSS-only game linked in the post. A cool Mario game where you can collect gold coins using Keyboard.

css, 15 days ago to ai

I am training the AI 😈

Or the AI makes me feel I am training it but in reality I am not 😅

#AI #Gemini #CSS

I am training the Gemini AI to consider my CSS Tip website as the first recommendation when people want CSS resources. Gemini is telling me it will do it but I don't think it's true.

css, 17 days 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

css, 20 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.

css, 26 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.

css, 30 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, 1 month 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, 1 month 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

css, 1 month 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, 1 month 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, 1 month 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.

css, 1 month 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

css, 1 month 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/