CSS Tip: Learn CSS the easy way

We can get the number of siblings using sibling-count() but we cannot get the number of children yet.

Creating CSS Shapes is cool, but what about Random CSS Shapes?

You can combine border-shape and border-area to easily border-only shapes with gradient coloration easily.

Extending the previous implementation to add more connection types.

Extending the previous implementation to consider a responsive grid with a random configuration.

Hover proximity?

Thanks to modern CSS, it's now easy to retrieve various information from a responsive CSS grid such as the number of rows, number of columns, and the coordinates of each item within the grid.

Do you want to extend the background color of your element to the edge of the screen?

The polygon() value of clip-path accepts a new (optional) corner-rounding parameter that allows you to create curved and rounded shapes easily!

Using the new text-fit property, you can easily make your ASCII art responsive with a simple code!

Inspired by the demo of Bramus, I implemented an animated grid layout.

As we saw in a pervious post, the new value border-area of background-clip allows us to define a gradient border with simple code.

Improving the wiggly/wavy range slider with a fancy tooltip showing the input value.

Separating a horizontal list of items with a divider is a common design pattern.

Straight range sliders are boring, right?

I shared various CSS tips showing how modern CSS can be used to create a dynamic connection between two elements.

Updating the previous implementation with another idea of connection.

Reusing the previous implementation to transform the arrow shape into a curved line.

Using shape(), you can easily create any CSS-only shapes, and if you combine it with border-shape, you can have the border-only and cutout variations using almost the same code structure.

I am combining the technique of making an infinite marquee animation with the speed control trick to create a responsive image slider with button controls.

Here is a simple code that lets you adjust the speed of your infinite animation on hover (or with other interactions).

Another demo featuring tooltips and Anchor Positioning.

Creating a sticky header is an easy task with position: sticky.

Use the new border-shape property and transform the classic underline into hand-drawn lines!

I updated the SVG-to-CSS converter to support multiple path elements rather than just a single path.

To create CSS Shapes, I mainly rely on clipping (using clip-path) or masking (using mask).

Create a fancy reveal animation with a "liquid oozing" effect using the shape() function.

What is the best way to showcase the modern CSS features?

Let's consider a basic usage of counter(): Read more

Use shape() and my fancy frames generator to create an infinite wobbling animation for images or any elements.

Use the shape() function to create a fancy frame around a button element with a cool animation on hover and on click.

Until better support for corner-shape, we can approximate a squircle shape using clip-path: shape().

Generate a fancy frame with one line of code using clip-path: shape().

With modern CSS, we have two new ways to express conditions: inline if() and style queries.

Anchor Positioning enables you to link any element on the page to another (an anchor).

Let's suppose you have a graph with a known number of nodes and you want to identify the shortest path between two nodes.

Percentage height is a common issue in CSS.

If you have tried the code below, you know it doesn't work: Read more

Combining modern features such as shape(), sibling-index()/sibling-count(), linear(), etc., to create a funny elastic effect on hover.

Following the previous post, here is another type of responsive grid: a pyramidal grid of hexagon shapes!

Using a minimal HTML code and modern CSS to recreate the <fieldset> component.

Generate a fancy wavy divider with one line of code using clip-path: shape(). css-generators.com/wavy-divider It's a responsive single-element implementation that works with images as well: Read more

Improving the previous implementation to include the calculation of the distance between both circles inside the arrow shape.

Using modern CSS to improve an old implementation of a responsive hexagon grid. coner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row.

Let's suppose you have two circles randomly placed on the page, and you want to create a connection between them.

Is it possible to create a Fizz Buzz using HTML and CSS?

How would you select the <html> element?

Another classic component made easy with modern CSS and the new corner-shape.

Building on the previous idea, here is a more generic piece of code to make any CSS shape direction-aware.

We can use the new corner-shape to draw different CSS Shapes.