@css@front-end.social

· 3mo ago

They just released

Google Chrome V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. https://css-tip.com/border-gradient/ Two lines of code and you are done! 🤩 #CSS #HTML

Border gradient with border-radius

The modern way to add a gradient to borders while having rounder corners

21

1

4

1

· 2mo ago

💡 CSS Tip! After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons. https://css-tip.com/rounded-shapes/ You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners! #CSS #HTML

A New Way to Round the Corners of CSS Shapes

A New Way to Round the Corners of CSS Shapes

Learn how to round the corners of any shape with a simple code

7

0

6

0

· 7mo ago

It seems we can now customize the select element, right? right?!

Demo: https://codepen.io/t_afif/pen/PwGPJOB via :codepen: @codepen@fosstodon.org

codepen.io

Select your Fruit!

They said we can customize select elements so let's have some fun...

29

1

16

1

· 6mo ago

Bending a straight line using pure CSS?! 👀

Another cool demo in progress powered by border-shape. It's coming to Chrome next week! 🤩

20

2

9

0

· 3mo ago

💡CSS Tip! Create a responsive grid with a cool animation. Everything adjusts smoothly on resize or when adding/removing new items. https://css-tip.com/animated-grid/ A CSS-only implementation with a few lines of code. #CSS #HTML

Responsive CSS Grid Layout with Animation

Responsive CSS Grid Layout with Animation

A responsive grid with a smooth animation when the layout is updated

5

0

1

0

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

· 6mo ago

📝 New CSS Article!

If you have seen my graph theory demo and wondered how it works, then the article is finally live!

I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm.

Modern CSS is fun!

frontendmasters.com

Two Circles, One Arrow, and Anchor Positioning

Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in CSS alone... but...

17

0

8

0

· 6mo ago

Replying to

Straight line as a divider: Boring! 🥱 Random wavy line as a divider: Yes, please! 🤩 https://css-generators.com/wavy-divider/ Another CSS generator ready for border-shape! #CSS #HTML

css-generators.com

CSS Generator for Wavy Dividers

Add a nice wavy shape to the top or the bottom of your element. Get an optimized & modern code using the shape() function.

14

1

7

0

https://css-tip.com/dino-game/

· 6mo ago

What's the best way to showcase modern CSS features? By making games!

This time it's the famous Dino Game 🦖

100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀

Don't search for the JS, there is none.

CSS-only Chrome Dino Game

Recreating the famous Dino game by Google using pure CSS, and playable with the keyboard

13

1

4

1

· 3mo ago

Replying to

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions! https://css-tip.com/wiggly-range-slider-2/ Now, the range slider is perfect, no one can say otherwise! #CSS #HTML

Wiggly/Wavy Input Range Slider II

Adding a bouncy tooltip to the wiggly slider

4

0

1

0

· 5mo ago

Replying to

Another demo with an infinite marquee animation https://codepen.io/t_afif/full/QwGjxPv via :codepen: @codepen@fosstodon.org Hover to accelerate, slow down, or change the direction. #HTML #CSS

codepen.io

Infinite Marquee Speed Control (hover to see the result)

https://css-tip.com/speed-control/...

8

2

3

0

· 3mo ago

📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/ This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!) #CSS #HTML

CSS-Tricks

Get Ready For the Powerful CSS border-shape Property! | CSS-Tricks

We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!

3

0

1

0

https://css-tip.com/squishy-button/

· 7mo ago

A classic rounded button: boooring!! 🥱
A squishy animated button: Yes, please!! 🤩

Another cool demo powered by the powerful shape() function

A Squishy Button with a Hover/Click Effect

A Squishy Button with a Hover/Click Effect

Using the shape() function to add a fancy shape to a button element

11

0

3

0

https://css-tip.com/counter-gotcha/

· 6mo ago

I thought I had found a bug that prevented counter() from working properly, but it was a feature!

Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working.

Thanks to @mia@front-end.social for the insights

The Gotcha of using counter() with container

The Gotcha of using counter() with container

counter() may behave strangely when combined with container. Learn about this small quirk

9

0

4

0

https://css-generators.com/polygon-shape/

· 7mo ago

Now that shape() is available in all major browsers, let me remind you that you can use my online generator to create any polygon with ... rounded corners!

Adjust the setting, then copy the code.

css-generators.com

CSS Generator for Polygon shapes (Triangle, Rhombus, Hexagon, and more)

Create any kind of Polygon shape using CSS clip-path. Get an optimized & modern code in no time.

8

0

3

0

https://stackoverflow.com/beta/challenges/79908564/challenge-17-the-accurate-selection

· 6mo ago

Stack Overflow asked me to propose a CSS Challenge, and I couldn't refuse.

It's about Selectors and more! There is nothing to win (except a profile badge), but it's a fun challenge to illustrate your creativity.

Stack Overflow

Challenge #17: The Accurate Selection [COMPLETED]

Stack Overflow | The World’s Largest Online Community for Developers

7

0

3

0

https://css-tip.com/sliding-liquid/

· 6mo ago

💡 CSS Tip!

A sliding liquid reveal effect, because why not! 🫗

Another demo powered by shape() and made easy with my online generators: https://css-generators.com/wavy-divider/

A Sliding "Liquid Oozing" Reveal Effect

A fancy reveal animation powered by clip-path: shape()

6

1

6

0

https://css-pattern.com/circles-pills/

· 7mo ago

It's been a while since my last CSS Pattern, so let's work on new ones!

css-pattern.com

CSS Pattern: Circles Pills

Circles & Pills pattern made with CSS gradients, an optimized code and modern CSS.

7

0

2

0

· 6mo ago

Who found the easter egg in my CSS-only Dino game? 🥚

A "rocket mode" to fly above everything! 👀

Give it a try: https://css-tip.com/dino-game/

CSS-only Chrome Dino Game

Recreating the famous Dino game by Google using pure CSS, and playable with the keyboard

5

0

3

0

@niels@indieweb.social https://bsky.app/profile/css-only.dev/post/3ltent56jks2c

· 5mo ago

Replying to

Bluesky Social

CSS by T. Afif (@css-only.dev)

They did it. A framework bult on the top of Tailwind to avoid the "ugly" HTML and the endless class names. Looks quite familiar to what we can already do with a "style.css" file. At least they acknowledge that the HTML is ugly.

3

2

0

https://css-tip.com/anchor-issues/

· 7mo ago

💡 CSS Tip!

For years, we've had the "z-index, stacking context" nightmare, but we will soon have a worse nightmare related to Anchor Positioning 😱

When it doesn't work, it's frustrating, so it's time to learn how it really works.

It's not as simple as you might think!

Why is Anchor Positioning not working?

Learn the edge cases that prevent anchor positioning from working correctly

5

2

6

1

https://css-tip.com/wobbling-animation/

· 6mo ago

💡 CSS Tip!

Add an infinite wobbling animation to your image with a simple code.

Powered by "complex" shape()s that you can easily get from my online generator!

https://css-generators.com/fancy-frame/

Add a Wobbling Animation to your Images

Create an infinite fancy animation using clip-path and shape()

4

0

3

0

· 5mo ago

Replying to

@scrwd@mastodon.social with that code no. The technique I am using requires same width logos and a variable to control the number of visible logos (which is generally smaller than the total of the logos). Everything is explained here: https://frontendmasters.com/blog/infinite-marquee-animation-using-modern-css/ What you want will require a complete different code and I am not sure we can have something generic that handle different widths

frontendmasters.com

Infinite Marquee Animation using Modern CSS

A row of logos that animate forever perfectly and don't have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

1

0

· 6mo ago

Replying to

@ppk Your floater element has a fixed width, you have a fixed margin-left for the p element and they have a max-width so you can do the following calculation: max-width: min(680px,100cqw - 332px - 380px) and you set container-type: inline-size to HTML to get the 100cqw and then you adjust when the layout change with the media queries

1

6

0

RE: https://mastodon.social/@csstricks/116335548662855451

· 6mo ago

Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math.

Now, using the shape() function, I can easily create complex shapes and animate them! 👇

Mastodon

CSS-Tricks (@csstricks@mastodon.social)

Attached: 1 image A crap-ton of shape() inspiration from none other than @css@front-end.social to help burn your Thursday. https://css-tricks.com/complex-css-shapes-with-shape-function/

1

0

· 20mo ago

Replying to

@kizu@front-end.social I once tried to explore this path by removing the unit from any value but I only got a hacky chrome-only experimentation where I had to deal with big numbers: https://css-tip.com/length-to-integer/ Dealing with each unit then do a merge is indeed a good idea 👍

Remove the unit from any CSS value

A simple CSS trick to transform a length value into a number without its unit

2

0

· 6mo ago

Replying to

Boing! Demo: https://codepen.io/t_afif/full/YPGeXgy via :codepen: @codepen #CSS #HTML

codepen.io

BOINNGGGGGG!

https://css-loaders.com/squishy/...

0

2

0

· 6mo ago

Replying to

@inthehands The border-only version? Only chrome is supporting it as far as I know. The other browsers support the default (filled) version

0

1

0

· 6mo ago

Replying to

@ppk we may find a "specific" workaround to the "specific" structure you are working on.

0

8

0

· 6mo ago

Replying to

@ppk It would be the same complexity as what you are doing for --contentmd since it only changes when that variable changes.

Another alternative is to make the p element container-type: inline-size and you have max-width: 100cqw (but the float behavior will be slightly different as they will wrap as a block)

0

4

0