css

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

inautilo, 29 days ago to webdev

#Development #Techniques
The modern guide for making CSS shapes · Shapes with the smallest and most flexible code possible https://ilo.im/15yu2g

---

#Shape #Tab #Tooltip #Clipping #Masking #WebDev #Frontend #HTML #CSS #CustomProperty

cssbasics, 30 days ago to CSS

The Ultimate #CSS Shapes Collection: "Pure CSS shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!" https://css-shape.com/

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!

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

davidbisset, 1 month ago to CSS

This could be handy.

"The Ultimate Collection of #CSS only Shapes"

https://css-shape.com/

cobra_winfrey, 1 month ago to random

A semi-playable Doom demo I built for #FrontEndConf using CSS scroll timeline, a handful of checkboxes and has() selectors + a nice assist from image-rendering: pixelated.

Oh and no JS, as god intended.

https://codepen.io/cobra_winfrey/full/oNOMRav

Animated gif of a user playing a scrollable rendition of the 1993 video game Doom

stephaniewalter, 1 month ago to random

CSS Shape: Pure CSS shapes made with a single-element, modern CSS and an optimized code
Resource: https://css-shape.com/

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

codepen, 1 month ago to random

"CSS-only pixelated cut corner" by Temani Afif. It's done with a programmatically created clip-path and mask, so it scales perfectly well. It's worth commenting out one or the other (then swapping) to see which each part is doing.

https://codepen.io/t_afif/pen/NWmzxQj

video/mp4

inautilo, 1 month ago to webdev

#Development #Launches
CSS Shape · A collection of easily customizable CSS-only shapes https://ilo.im/15yn9c

---

#Shape #Gradient #Color #ModernCSS #WebDev #Frontend #HTML #CSS #CustomProperty

css, 1 month ago to CSS

New CSS Project! 🥳

Are you looking for a CSS Shape? look no further!

👉 https://css-shape.com 👈

The Ultimate Collection of CSS-Only shapes
✅ Single-element implementation
✅ Optimized code
✅ Easy to customize using CSS variables
✅ One click to copy the code

Stop relying on old and obsolete resources. Use modern CSS to create Shapes! 🤩

#CSS #HTML

A home page recording of the shared link.

css, 1 month ago to CSS

In case you missed it, my CSS Generators website counts no less than 10 online generators. Section divider, gradient shadows, custom border, custom corners, and more!

👉 https://css-generators.com 👈

Get an optimized code with modern CSS in no time!

#CSS #HTML

Showing the banners of the different generator websites.

css, 1 month ago to CSS

Another article and another single element experimentation using images!

Check my latest article @smashingmag

https://smashingmagazine.com/2024/04/sliding-3d-image-frames-css/

A lot of cool CSS Tricks to create a fancy reveal animation 👇

#CSS #HTML

A fancy hover effect to reveal image inside a 3D box

css, 2 months ago (edited 2 months ago) to CSS

💡 CSS Tip!

Use modern CSS to create those famous rounded tabs with inner curves.
✅ No extra element & No pseudo-element
✅ Less than 10 CSS declarations to get the three variations
✅ One variable to control the curvature
✅ Works with gradient coloration

Demo: https://codepen.io/t_afif/pen/JjVpPmr via :codepen: @codepen

Online Version: https://css-tip.com/rounded-tab/

#CSS #HTML

mia, 2 months ago to CSS

For the last 4 years, I got to spend most of my time on #CSS specs. I had a lead role in cascade layers, container queries, & scope (all shipping) – now responsive type & mixins/functions.

I hope to keep at it, but this is open-source work, and (like many others) my funding was suddenly cut this year. So I’m looking for sponsors.

For now, @OddBird will fund what we can. If you or your company would like to help, you can also support that work through Open Collective: https://opencollective.com/oddbird-open-source#category-ABOUT

css, 2 months ago to CSS

💡 CSS Tip!

Use the round() function and create a fluid typography with a discrete function instead of a continuous one.

Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!

Demo: https://codepen.io/t_afif/pen/RwOxLNQ via :codepen: @codepen

Online Version: https://css-tip.com/fluid-typography/

#CSS #HTML

css, 2 months ago to CSS

Use modern CSS and add a cool Wavy divider to your section! 〰️🌊

Only one property and two gradients are needed.

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

Does the code look complex? Two variables are all you need to update to control the shape. 😍

Online Version: https://css-tip.com/wavy-divider/

#CSS #HTML

A section with a wavy divider at the bottom

geoff, 2 months ago to random

Obligatory Reaction to My Old CSS-Tricks Job Re-Opening https://geoffgraham.me/obligatory-reaction-to-my-old-css-tricks-job-re-opening/

css, 2 months ago to CSS

I reached 150 Tips on my CSS Tip website! 🥳

What about learning a new CSS trick? Let me pick one for you!

👉 https://random.css-tip.com 👈

It only takes one minute to learn something new. What are you waiting for? You are one click away from getting a cool CSS demo 🤩

#CSS #HTML