shape() function to create a fancy frame around a button element with a cool animation on hover and on click.
While centering elements in CSS has become easy over time, there is still a lot of confusion around alignment in general. Let’s be honest, you always end up trying different combinations until it works, but you don’t really understand how it works, right?
Which property is for vertical alignment? align-content or align-items? Where should I add display: flex? Let’s add it everywhere! A height? Why do I need to define a height!? Maybe I should try with display: grid?
It’s time to clear all the confusion! Through this exploration, you will understand the logic behind all the alignment properties and how they work in each layout. It’s not another article about centering, we are going beyond!
]]>shape() function to create a fancy frame around a button element with a cool animation on hover and on click.
corner-shape, we can approximate a squircle shape using clip-path: shape(). A flexible implementation using CSS variable to easily control the radius.
clip-path: shape(). Simply adjust the setting and obtain a variety of cool frames (Squiggle, Wavy, Ragged, Torn, etc.)
css-generators.com/fancy-frame
It's a responsive single-element implementation that works with images. It's also ready for border-shape.
if() and style queries. Their syntax is as follows:
]]>Anchor Positioning enables you to link any element on the page to another (an anchor). In theory, it's simple, but in practise there are edge cases where it doesn't work. It can be very frustrating, so let's clarify things!
Let's consider the smallest CSS code that links .element with .anchor.
Not only can we draw the graph (using my previous implementation of connecting two circles), but we can also do various calculations to find the shortest path (using the technique of getting the width/height of any element)
Drag the different nodes in the demo below to see the magic in play!
⚠️ Chrome-only for now ⚠️
]]>height: 100% to fill the vertical space fails in most cases because the parent container doesn't have an explicit height. Even if the parent has a definite height, you may still face issues related to margin, box-sizing, etc.
Instead of height: 100%, you can rely on the new stretch value that will do a better job!
shape(), sibling-index()/sibling-count(), linear(), etc., to create a funny elastic effect on hover. There is no text duplication, but you need a monospace font and a wrapper per letter.
<fieldset> component. A responsive implementation easy to control using CSS variables. It's also direction-aware with real transparency!
clip-path: shape().
css-generators.com/wavy-divider
It's a responsive single-element implementation that works with images as well:
]]>
Still the same code structure
]]>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.
A good overview of what can be possible using modern features such as Anchor Positioning, attr(), container queries, shape(), trigonometric functions, and more!
With a simple HTML/CSS configuration, you have an arrow fully controlled using CSS. Not only is the position dynamic, but the shape adjusts according to the distance between the circles. And if they touch each other, the link disappears. Collision detection using pure CSS!
]]><html> element? Using the classic and well-known html {} and :root {}, right? What if I tell you there are other hidden selectors?
Let's start with the shortest selector, the nesting selector. A one-character selector:
]]>corner-shape. A gallery of skewed images with a reveal effect on hover using a few lines of code. The skewing adjusts accordingly to the direction of the text. Another direction-aware shape!
corner-shape to draw different CSS Shapes. And since it relies on border-radius, we can use the logical properties to create a direction-aware arrow that adjusts based on both the direction and the writing mode.
position-area property allows you to control the placement of an absolutely positioned element relative to its anchor box. It considers a 3x3 grid defined by the containing block of the absolutely positioned element and the edges of the anchor box.
]]>
border-radius based on the container/screen size using a simple line of code.
:nth-child(), we can use if() and math functions to emulate a range selection.
Instead of:
]]>corner-shape and the border properties.
corner-shape property? It allows you to manipulate the shape of the corners, and by simply adjusting the border-radius, you can create most of the common CSS shapes.
You can easily add borders to some shapes as well!
⚠️ Limited support (Chrome-only for now) ⚠️
Isosceles triangles
]]>:is() is ideal for shortening selectors. Take the following example:
]]>The list includes old and obsolete methods (that you should not use), but it was a fun exercise trying to enumerate all the possibilities.
I don't recommend choosing a single method to always use. Instead, consider the layout you are working with and select the appropriate code. It's crucial to understand what each code is doing because not all of them are the same. To help you with this, you can check my exploration to understand the fundamentals of alignment in CSS.
That being said, here are my favorite methods for centering a single element horizontally and vertically for each type of layout.
]]>:nth-child and sibling-index(), we need fewer than 10 CSS declarations to correctly place up to 61 images.
Instead of:
]]>sibling-index()/sibling-count() functions and linear() will do the job!
offset combined with the new sibling-index() and sibling-count() functions, we can easily and precisely place images (or any elements) around a circle using a few lines of code.
:nth-child(An + B).
Instead of:
]]>sibling-index() function to get the position of any element relative to all its sibling elements. You can also rely on sibling-count() to get the number of siblings.
The results are also available within pseudo-elements.
]]>clip-path: shape()? With a simple code, you can have both the main shape and its cut-out version.
shape() and animating it using CSS variables and @property
corner-shape. As a bonus, you can add a border to it.
It's the only method that works with borders!
safe keyword? In some specific cases, your content may overflow the container and you won't be able to scroll to it. It happens with some alignment configurations such as center and end.
safe can prevent this behavior!
::before and ::after so we can tweak them to add a custom error message or any visual you want.
shape() function that produces a more compact code and gives better rendering. A single-element implementation optimized with CSS variables.
It will transform a shape created using <path d="..."> into a CSS code using clip-path: shape(). It's responsive, and the HTML code is a single element. No need to care about the viewBox, the generator will automatically find the smallest rectangle in which the shape fits.
Example of SVG path:
]]>shape() and create a cool CSS-only blob shape. Get the code from my online generator.
You can have a cool hover effect by applying a transition between two different shapes.
⚠️ Chrome-only for now ⚠️
]]>shape() function. A heart shape with a simple code.
shape() function to add rounded corners to a box with a triangular shape.
A complex-looking code but all you have to do is to update a few variables.
]]>shape() function.
clip-path: polygon() but what about the rounded corners variation? It's now possible with the new clip-path: shape(). The code is more complex but you can easily control it using CSS variables.
flex-wrap: wrap allows items to wrap onto multiple lines but it has another function. It transforms your flex container from a single-line to a multi-line container even if at the end you have only one flex line. This means we can use align-content to align the content.
In other words, you need to use flex-wrap: wrap to align the content using align-content even if there is no wrapping.
It's different from align-items which aligns the items inside the line whereas align-content aligns the whole line. Here is an interactive demo to see the behavior of each property:
attr() function, we can customize a progress element based on the progression. We can, for example, have a different coloration for each range of values! A single-element implementation without JavaSript.
mask property and one gradient.
mask property, then show it fully on hover. A single-element implementation using less than 10 CSS declarations.
offset property
mask property and two gradients.
attr(), and @property. No more JavaScript!
⚠️ Chrome-only for now ⚠️
]]>Ready for the new text-box property? With it, you can easily remove extra space above and below your text. Adjust the setting to see the effect of the different values.
⚠️ Support is limited (Chrome-only for now) ⚠️
Ab-xy-12-Êç
]]>
zoom property? It works the same way as a scale transformation but unlike scale, it affects the page layout. In other words, the page layout is recalculated considering the new dimension of the scaled element.
@property, :has() selector, and more!
Click for a cool effect!
]]>max attribute.
<figure> element)@property and CSS Mask
max attribute.
Yes, you can click to update the rating. It's an interactive widget!
<img> tag)
@starting-style you can create animations without using @keyframes. It's not a replacement for the classic way to create animations but it can be a useful CSS trick in some situations.
Here is a simple example with a rotation. I am using big values to simulate an infinite rotation.
]]>A chrome-only experimentation for now:
]]>@property and math functions
:root level and do whatever you want (like styling any elements on the page)
]]>margin: auto combined with width/max-width.
]]>clip-path & math functions
Single element implementation powered by modern CSS (@property, CSS Mask, Math functions, etc).
Full-bleed? It's when an element needs to bleed outside the main container and extend to the edge of the page.
steps() but you struggle with its value, right? You never know how many steps it requires and it never works as expected!
In most cases, adding an extra value will fix your issue.
]]>
As a bonus, you can also have an integer value!
]]>
text-indent can take an extra value each-line? It allows you to have an indentation after each line! Useful if you rely on <br> to add new lines.
]]>document.querySelector('.target').
]]><img> tag)
All the below are the same. You can save up to 32 chars!
]]><img> tag)
<img>)
One example:
]]>position: absolute element.
"if an absolute positioned element has no positioned ancestors, it uses the body element" NO, this is false!
The W3Schools page is showing a wrong information but the MDN page is showing the correct one.
 |
 |
What is the initial containing block?
It's a rectangle having the same dimension as the viewport (full width/height) and anchored at the canvas origin (moves on scroll). In other words, it's similar to the viewport but moves if we have scrolling.
Here is a demo to illustrate:
]]>height: auto
]]>No more JavaScript to do this. A few lines of CSS, one HTML element and you can update any value in real time.
]]><progress> tag)@property
It's a Chrome-only experimentation:
]]>@property and math functions
Adjust the below to get your quantity query selector!
]]>
Code available here: css-shape.com/rounded-dashes
Resize the below demo to notice the responsive part
]]>css-generators.com/wavy-circle
<img> element
"What is the width of the scrollbar?" A question we can answer using a few lines of modern CSS! No need for JavaScript and you get the value as a CSS variable defined at :root level.
@propertyself inside the scroll() value.
]]>:root level (avaiable to all the elements)font-size of your website using modern CSS features.
:root!
Use the @property instead and create "Typed CSS Variables"
Instead of doing this:
]]>
⚠️ There is no implementation yet, but it's good to know.
]]>
<progress> tag)@property
It's a Chrome-only experimentation:
]]>
clip-path: polygon(). An easy way to create Cut-out shapes.
Powered by modern CSS features:
@property & CSS variables
text-wrap. No more lonely words at the end of paragraphs, and titles will look much better.
]]>Powered by modern CSS features:
@property & CSS variables
You can also surprise yourself with Read more
]]><input> element)
Only one gradient and you can easily get the border-only variation.
Useful when you want to do some color manipulation.
]]>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
]]><img> tag
The modern way to create CSS Shapes
]]>Here is an example of a CSS code with a lot of redundancy
]]><img> tag)⚠️ Not suitable for touch screen (the sharp edges may hurt you) use wavy borders
Three different codes to create the same shape
<img> tag)
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!
<img> tag. Powered by CSS Mask, @property and optimized with CSS mask
The rotation will resume slowly on mouse-out as well.
]]>animation-composition and a few lines of code
<img> tag)
@property, animation-composition and more)
<img> tag)
align-content that works with block-level elements, but pay attention when you want to center elements such as <img>, <iframe>, <canvas>, <video>, etc.
⚠️ They won't get centered ⚠️
They will look centered but in reality, they are not and this is not a bug!
Images and similar inline-level elements have that strange white space under them due to the default baseline alignment, and that space is preserved when using align-content because we align the "whole content"
So don't forget to get rid of that space using vertical-align: top
That space may look small but it can make a difference especially if you use a big font-size.
This is the case with circle() and ellipse() of clip-path. No need to provide any argument and they will, by default, round your element. circle() is a particular case of the ellipse() and is useful with square elements.
The browser will default circle() to circle(closest-side at center) and ellipse() to ellipse(closest-side closest-side at center)
css-generators.com/flower-shapes
Get an optimized code in no time. Adjust the setting and then click!
⚠️ "&" in CSS is different from the one in Sass ⚠️
Your Sass code won't work the same way if you use it as a CSS code.
The below code won't give the same result when used with CSS Nesting and Sass
]]><img> tag)
<img> tag)
aspect-ratioclip-path (with a 3-point polygon)That's it, and it works with any kind of elements including images.
All of this, using only 3 properties and easy to control with CSS variables
min() or max()? You always struggle to know which one to use and you end up trying both until one of them works.
💡 Here is a figure to help you decide when to use them
You start with clamp() then:
max()min()
If you want to set a max-width to your element then it's min()
width: clamp(min,100%,max) ➞ width: min(100%, max)
border-image and add as many borders as you want to your images for a fancy decoration
<img> tag)
<img> tag)
Another list of stacked avatars using the same code structure
Still using only the <img> tag (No extra elements, No pseudo-elements) and a touch of magic 🪄
<img> tag)
<img> tag)
<img> tag)
<img> tag)
<img> tag)
<img> tag)Get the code in no time using an Online Generator for Starburst Shape
<img> tag)
<img> tag)@property
<img> tag)
<img> tag)
Zig-Zag edge generator 👉 css-generators.com/custom-borders
<img> tag)
<img> tag)
<img> tag)
<input> tag)
<img> tag)
<img> tag)
<img> tag)
conic-gradient()
<img> tag)<img> tag)
<img> tag)
<img> tag)
<img> tag)
Use an index like any programming language to iterate through the array. Practical when you are already using an index for something else.
<img> tag)
<img> tag)
<img> tag)
<img> tag)
<img> tag)
You can do it with border-image!
Only one line of code and you have your overlay 🤩
<img> tag)
<img> tag)
<img> tag)
<img> tag)object-fit and object-position<img> tag)Pay attention to the support of the @property.
@counter-style to customize your <ol> list with a simple code
counter()
<input> element)
conic-gradient() and the new color interpolation to create a nice color wheel 🤩
border-radius and no need to know the value of border.
color-mix() to manipulate the Hue of a color in the HSL color space
]]>color-mix() to create different shades from one color.
Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color
color-mix() function to create a color switch with a compact code
border-radiuscss-generators.com/gradient-shadows
border-radius
<img> tag)
:has() selector and style your container based on its number of elements (direct children)
⚠️ It doesn't count text nodes. Only tags!
]]>Use an online generator to easily get the code: css-generators.com/wavy-shapes
<img>s inside a container)border-radius
Use an online generator to easily get the code: css-generators.com/custom-corners
Use an online generator to easily get the code: css-generators.com/custom-borders
<img> tag)
<img> inside a container)
<img> tag)
<img> tag)
border-image
<div>!
Powered by CSS-in-SVG-in-CSS
]]>
<img> tag)You can also have a cool transition on hover
css-generators.com/section-divider
<img> tag)
<img> tag)
height:100%100vh<body>max-width and center your block element with one CSS declaration using margin-inline and max().
box-decoration-break: clone and CSS gradients.
contain prorperty. No JavaScript is needed.
Below, the right column will follow the height of the left column.
