CSS Tip: Learn CSS the easy way

css-tip.com · English

The best place to keep up to date with the new CSS features. Daily CSS tips and tricks to become a better web developer.

json fediverse

Open the feed

https://css-tip.com/feed/feed.json

Last post: Sep 22, 2026
Posts in 24 h · 7 days · 30 days: 0 · 1 · 4
Our last check: Answering
Served from: United States
Text score at discovery: 9,395
Format: json
Community: fediverse

Posts

What our queue read from this feed. Open one to read it here, or go to the site that published it.

The Fundamentals of CSS Alignment
Sep 4, 2025 · original
The Fundamentals of CSS Alignment September 04, 2025 (Last updated on April 17, 2026) 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! Table of Contents The Alignment Theory Grid Container Grid Anatomy Ready to align? Auto Sizing auto vs 1fr Grid I
Random Blob Shapes
Sep 22, 2026 · original
Creating CSS Shapes is cool, but what about Random CSS Shapes? Thanks to the new random() function, we can generate unique shapes. A new shape appears on each page load. You never see the same shape twice. First off, blob shapes with a cool hover effect! ⚠️ Chrome-only with experimental flag enabled ⚠️ See the Pen Random Blob Shapes (with hover effect) by Temani Afif ( @t_afif ) on CodePen . The code is a bit verbose, but one day we will have loops in CSS, and we can optimize it. .blob { --n : 13 ; /* if you change this, you need to add more points... we don't have loops in CSS */ --d : 20% ; /* control the depth, can be percentage */ width : 300px ; aspect-ratio : 1 ; --_r : element-scoped , 0px , var ( --d ) ; --x0 : ( 50% + ( 50% - random ( --0 var ( --_r ) ) ) * cos ( 0turn/ var ( --n ) ) ) ; --y0 : ( 50% + ( 50% - random ( --0 var ( --_r ) ) ) * sin ( 0turn/ var ( --n ) ) ) ; --x1 :
Complex border-only Shapes with Gradient Coloration
Sep 17, 2026 · original
You can combine border-shape and border-area to easily border-only shapes with gradient coloration easily. No more hacks or complex code, just 3 lines and you're done! .shape-gradient { border : 10px solid #0000 ; /* a transparent border */ border-shape : shape ( ) | polygon ( ) | etc ; /* the shape */ background : linear-gradient ( #0077b6 , #f4a261 ) border-area ; /* gradient + border-area */ } ⚠️ Chromium-only for now ⚠️ See the Pen Complex border-only gradient shapes by Temani Afif ( @t_afif ) on CodePen .
Dynamic Node Connection (CSS-only Diagram) II
Sep 9, 2026 · original
Extending the previous implementation to add more connection types. This time, the connectors will stick to the specified sides, regardless of the node's position. Another cool demo made possible with anchor positioning, border-shape , shape() , container queries, if() , and more! Drag the nodes in the demo below and see the magic in play! ⚠️ Chromium-only for now ⚠️ See the Pen CSS-only diagram with dynamic connections II by Temani Afif ( @t_afif ) on CodePen . I used three types of connections. A left-to-right connection: See the Pen left-to-right connection by Temani Afif ( @t_afif ) on CodePen . A left-to-left connection: See the Pen Left-to-left connection by Temani Afif ( @t_afif ) on CodePen . A right-to-right connection: See the Pen right-to-right connection by Temani Afif ( @t_afif ) on CodePen . The possibilities are endless. Stay tuned for more CSS-only diagrams!
Get Grid Information using pure CSS II
Sep 1, 2026 · original
Extending the previous implementation to consider a responsive grid with a random configuration. Each item can span multiple rows/columns and get placed anywhere on the grid. Whatever the placement, we can retrieve the position of each item using pure CSS. A task made possible using Scroll-Driven animations! Here is an interactive demo where each item shows all the information it gets (number of columns, number of rows, position, index/number of items). Resize the demo and see how all the values adjust in real time. ⚠️ (Chromium-only for now) ⚠️ See the Pen Grid information (chrome-only) by Temani Afif ( @t_afif ) on CodePen . All the values are integers, so it was an easy task to use counters and show them: .container * { /* number of column */ --n : ... ; /* number of rows */ --m : ... ; /* column start/end */ --col-s : ... ; --col-e : ... ; /* row start/end */ --row-s : ... ; --row-e
Hover Proximity with Scroll-Driven Animations
Aug 19, 2026 · original
Hover proximity? It's when you affect the hovered element and a few surrounding elements. A fancy effect made possible using modern CSS. ⚠️ (Chromium-only for now) ⚠️ See the Pen Hover Proximity with scroll-driven animations by Temani Afif ( @t_afif ) on CodePen . We first define a responsive grid structure and calculate the coordinates of each element : .container { --s : 50px ; /* size */ --g : 0px ; /* gap */ display : grid ; grid-template-columns : repeat ( auto-fill , minmax ( var ( --s ) , 1fr ) ) ; gap : var ( --g ) ; container-type : inline-size ; } .container * { /* number of columns */ --n : round ( down , ( 100cqw + var ( --g ) ) / ( var ( --s ) + var ( --g ) ) ) ; /* number of rows */ --m : round ( up , sibling-count ( ) / var ( --n ) ) ; /* coordinates */ --x : round ( down , ( sibling-index ( ) - 1 ) / var ( --n ) ) ; --y : mod ( sibling-index ( ) - 1 , var ( --n ) ) ; } Th
Get Grid Information using pure CSS
Aug 17, 2026 · original
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. The only requirement is to have equal-width columns. Rows can have different heights. .container { --s : 120px ; /* column size */ --g : 10px ; /* gap */ display : grid ; grid-template-columns : repeat ( auto-fill , minmax ( var ( --s ) , 1fr ) ) ; gap : var ( --g ) ; container-type : inline-size ; /* to be able to use 100cqw */ } .container * { /* number of columns */ --n : round ( down , ( 100cqw + var ( --g ) ) / ( var ( --s ) + var ( --g ) ) ) ; /* number of rows */ --m : round ( up , sibling-count ( ) / var ( --n ) ) ; /* item coordinates */ --x : round ( down , ( sibling-index ( ) - 1 ) / var ( --n ) ) ; /* row index */ --y : mod ( sibling-index ( ) - 1 , var ( --n ) ) ; /* column index */ } H
Breakout Background using Modern CSS
Aug 5, 2026 · original
Do you want to extend the background color of your element to the edge of the screen? A simple code using border-shape or border-image , and it's done! .breakout-background { border-shape : inset ( 0 -100vw ) circle ( 0 ) ; border-color : #faa307 ; } ⚠️ (Chromium only for now) ⚠️ See the Pen Breakout background using border-shape by Temani Afif ( @t_afif ) on CodePen . How Does it Work? # border-shape accepts two shape values (outer and inner); the border is rendered as the area between them. The outer shape is a rectangle that extends to the edge of the screen, and the inner shape is a zero-radius circle placed at the center. The idea is to make sure the inner shape is "nothing" to end with the outer shape fully filled. Here is a demo with a transition on hover to better understand what's going on. .breakout-background { border-shape : inset ( 0 ) circle ( 20% ) ; border-color : #faa307
A New Way to Round the Corners of CSS Shapes
Jul 29, 2026 · original
The polygon() value of clip-path accepts a new (optional) corner-rounding parameter that allows you to create curved and rounded shapes easily! The code is as simple as the one below. .shape { clip-path : polygon ( round 20px , /* your shape */ ) ; } You can also specify a very large value to achieve maximum rounding of the shape. Each corner has a maximum value that you cannot round above. The logic is the same as with border-radius for creating circles or pills. .shape { clip-path : polygon ( round 9e9px , /* your shape */ ) ; /* OR */ clip-path : polygon ( round calc ( infinity * 1px ) , /* your shape */ ) ; } ⚠️ Chromium-only for now ⚠️ See the Pen Rounding CSS Shapes using polygon() by Temani Afif ( @t_afif ) on CodePen . Until better support, we can still use other techniques, such as mask combined with gradients or shape() . Find most of the shapes within my online collection .
Responsive ASCII Arts using text-fit
Jul 21, 2026 · original
Using the new text-fit property, you can easily make your ASCII art responsive with a simple code! .box { white-space : pre ; /* preserve the white spaces */ font-size : 30px ; /* use a big font-size */ text-fit : shrink ; /* allow the font-size to shrink when the box is small */ } Resize the box in the demo below and see the magic in play! ⚠️ (Chromium only for now) ⚠️ See the Pen Responsive ascii art by Temani Afif ( @t_afif ) on CodePen . Art taken from: https://emojicombos.com/ascii-art As its name suggests, the text-fit property allows the text to fit the container by scaling the font size. We generally reach for the grow value to fill that little space at the end of each line. shrink is more useful when you want to scale down an overflowing text. We can have the same scaling factor for all the lines (it's the default behavior). It keeps the font size the same for all lines, but we
Responsive CSS Grid Layout with Animation
Jul 7, 2026 · original
Inspired by the demo of Bramus , I implemented an animated grid layout. On resize, the elements get a nice animation as they move to their new positions. You can even add or remove items, and everything will adjust smoothly as well. Try it! ⚠️ (Chromium only for now) ⚠️ See the Pen Animated grid layout on resize by Temani Afif ( @t_afif ) on CodePen . The main idea is to calculate the coordinates of each item within the grid, and instead of relying on the automatic placement, I place them using translate . When the layout is updated, all coordinates change, which in turn updates the translate values. We can apply a transition to the translate property to get a nice effect! .container { --g : 10px ; /* gap */ --s : 130px ; /* image size */ display : grid ; container-type : inline-size ; } .container * { grid-area : 1/1 ; width : var ( --s ) ; aspect-ratio : 1 ; /* The number of columns */
background-clip is getting an upgrade!
Jul 2, 2026 · original
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. .gradient-border { border : 10px solid #0000 ; background : linear-gradient ( #90e0ef , #f4a261 ) border-area ; } That value can also be combined with the text value to apply the gradient to the text. A simple way to have a text and border gradient while leaving the background transparent. .gradient-text-border { border : 10px solid #0000 ; color : #0000 ; background : linear-gradient ( #90e0ef , #f4a261 ) border-area text ; } ⚠️ Support is still limited (Chrome-only starting from V150) ⚠️ See the Pen Gradient text & border by Temani Afif ( @t_afif ) on CodePen . The longhand version looks like the one below. .gradient-text-border { border : 10px solid #0000 ; color : #0000 ; background-image : linear-gradient ( #FF4E50 , #40C0CB ) ; background-clip : border
Wiggly/Wavy Input Range Slider II
Jun 30, 2026 · original
Improving the wiggly/wavy range slider with a fancy tooltip showing the input value. It's an ugly one that follows the thumb and bounces in all directions! ⚠️ A Chrome-only experience ⚠️ See the Pen Wiggly/Wavy Range Slider with tooltip by Temani Afif ( @t_afif ) on CodePen . The tooltip is taken from the lazy tooltip follower , and its shape is generated using my fancy frame generator .
Responsive Separator for Horizontal List
Jun 26, 2026 · original
Separating a horizontal list of items with a divider is a common design pattern. The tricky part is making sure we have separators only between adjacent items, never at the beginning or the end of the row/line. There are many hacky ways to solve this, but the new Gap Decoration feature offers a simple, modern solution. No more hacks and only a few lines of code to get the shape of the divider you want. .vertical-line { column-rule : 3px solid #c1121f ; /* width = 3px */ rule-inset : calc ( .5lh - .75em/2 ) ; /* height = .75em */ } .horizontal-line { column-rule : .75em solid #c1121f ; /* width = .75em */ rule-inset : calc ( .5lh - 4px/2 ) ; /* height = 4px */ } .square { --s : 10px ; /* size */ column-rule : var ( --s ) solid #c1121f ; rule-inset : calc ( .5lh - var ( --s ) /2 ) ; } .circle { --s : 10px ; /* size */ column-rule : var ( --s ) dotted #c1121f ; rule-inset : calc ( .5lh - va
Wiggly/Wavy Input Range Slider
Jun 23, 2026 · original
Straight range sliders are boring, right? Let's, instead, draw the lines by hand and get some wiggly/wavy range sliders! A fancy demo powered by border-shape , Scroll-Driven Animations, @property , and more! The HTML code is nothing but the native input element. No extra element and, of course, no JavaScript. input type = " range " step = " .2 " max = " 20 " value = " 10 " input type = " range " value = " 80 " input type = " range " min = " -10 " step = " .1 " max = " 10 " value = " -5 " ⚠️ A Chrome-only experience ⚠️ See the Pen Wiggly/Wavy Range Slider by Temani Afif ( @t_afif ) on CodePen . You can easily control everything by adjusting a few CSS variables: input[type="range"] { --s : 30px ; /* size/height of the slider */ --t : 45px ; /* size of the thumb*/ --l : 6px ; /* line thickness */ --c : #547980 ; /* main color */ --p : shape ( ... ) ; /* shape of the line */ } You can get th
Dynamic Node Connection (CSS-only Diagram)
Jun 16, 2026 · original
I shared various CSS tips showing how modern CSS can be used to create a dynamic connection between two elements. I connected two circles with an arrow , a curved line , a straight line that bends , etc. I even made a CSS-only graph with a shortest-path algorithm . We can still do more and create a diagram like the one below. It's still a graph, but this time the nodes are square elements, and the connectors can have different shapes and positions based on the node's position! Here is a demo with two elements. Drag them around and see how the connection behaves. It will try to link the closest edges of both nodes, or their centers, if the distance between them gets smaller. Yes, there is a nice transition as well. ⚠️ Chromium-only for now ⚠️ See the Pen Dynamic node connection (drag the elements) by Temani Afif ( @t_afif ) on CodePen . A demo packed with modern CSS features such as Ancho
Bending a Straight Line using Modern CSS
May 28, 2026 · original
Updating the previous implementation with another idea of connection. This time, it's a straight line that adjusts based on the distance between the two circles. It bends when they get closer and stretches (becomes thinner) when they get farther. Implementing physics using pure CSS! Another demo powered by modern CSS (Anchor Positioning, border-shape , if() , and more). Drag the circles and see the magic in play! ⚠️ Chrome-only for now ⚠️ See the Pen Bending a straight line using pure CSS by Temani Afif ( @t_afif ) on CodePen . You can have as many elements as you want and adjust the connection setting (line length and number of curves) See the Pen Bending a straight line using pure CSS II by Temani Afif ( @t_afif ) on CodePen .
Connecting Circles With a Curved Line
May 26, 2026 · original
Reusing the previous implementation to transform the arrow shape into a curved line. The line's curve adjusts based on the distance and positions of the circles. A CSS-only implementation powered by the future of CSS (Anchor Positioning, shape() , border-shape , if() , and more). The HTML code is still the same: div class = " circle " name = " --a " / div div class = " circle " name = " --b " / div div class = " link " x = " --a " y = " --b " a / a b / b c / c d / d / div And the relevant CSS code is relatively small: .link { --b : 10px ; /* line thickness */ --x : attr ( x type ( custom-ident ) ) ; --y : attr ( y type ( custom-ident ) ) ; } .link * { position : absolute ; --_x : calc ( anchor ( var ( --x ) inside ) + anchor-size ( var ( --x ) ) /2 - .1px ) ; --_y : calc ( anchor ( var ( --y ) inside ) + anchor-size ( var ( --y ) ) /2 ) ; container-type : size ; } .link :is(a,b) { top :
Three Shape Variations using border-shape
May 19, 2026 · original
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. You can get the main shape by simply using border-shape and background: .shape { border-shape : shape ( /* you shape code */ ) ; background : #c1121f ; /* you can also have a gradient */ } To get the border-only version, you use border instead of background: .border-only { border-shape : shape ( /* you shape code */ ) ; border : 10px solid #c1121f ; } To get the cutout version, add inset(0) to the previous code. .cutout { border-shape : inset ( 0 ) shape ( /* you shape code */ ) ; border : 10px solid #c1121f ; } border-shape accepts two shape values. In such a case, the border is rendered as the area between the two shapes. The first value defines the outer boundary, and the second value defines the
An Interactive Image Slider/Carousel
May 13, 2026 · original
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. A CSS-only implementation that works with any number of images. Powered by modern CSS features such as shape() , sibling-index()/count() , animation-composition , etc. div class = " container " img src = " " img src = " " !-- add as many images as you want -- / div div class = " controls " button aria-label = " rewind " ⏪︎ / button button aria-label = " pause " ⏸ / button button aria-label = " fast forward " ⏩︎ / button / div .container { --w : 250px ; /* size of the image */ --d : 15s ; /* animation duration */ --n : 4 ; /* number of visible images */ display : flex ; overflow : hidden ; } img { width : var ( --w ) ; offset : shape ( from calc ( var ( --w ) /-2 ) 50% , hline by calc ( sibling-count ( ) * max ( 100%/ var ( --n ) , var

Discovered by the rss-feed-index crawler, which checks each feed at most once a month.

Same record as JSON: https://api.agentalog.com/api/feeds/fd_css_tip_com_390be1dc58c9658a. More from this site: css-tip.com in the Feeds tab.