Best of CSS-Tricks — August 2022

1. 1
   Article

   CSS-Tricks·4y

   CSS Grid and Custom Shapes, Part 1 | CSS-Tricks

   CSS Grid of Hexagons is a type of grid that works with shapes like hexagons or rhombuses. The goal of this post is to use the same and smallest amount of HTML code and still get the different grids we want. Each image is translated by the --_x and --_y variables that are based on those formulas. Only the second image ( nth-child(2) is undefined in any selector. The second image is undefined. It can be any image. It could be any photo.

   27
2. 2
   Article

   CSS-Tricks·4y

   CSS Grid and Custom Shapes, Part 2 | CSS-Tricks

   CodePen Embed Fallback uses CSS Grid, clip-path and mask techniques to create grids with fancy shapes. By the end of this article, we’ll end up with different ways to arrange images on the grid, including some rad hover effects that make for an authentic, interactive experience to view pictures. The code is easy to understand, but there is a little drawback. The border color needs to be the same as the main background to make the illusion perfect. This little drawback is.

   15

   1
3. 3
   Article

   CSS-Tricks·4y

   Committing CSS Crimes | CSS-Tricks

   Social media service Cohost allows users to have greater freedom with markup and inline styles than we may be typically used to. Some users have taken advantage of this freedom to commit CSS Crimes! It has resulted in creative recreations of familiar interfaces and interactive games by using properties in unconventional ways.

   12
4. 4
   Article

   CSS-Tricks·4y

   Zooming Images in a Grid Layout | CSS-Tricks

   CSS Grid is capable of automatically placing items on implicit rows and columns. The browser will first ignore min-height: 100% to calculate the size of the grid cells, but it will use the height: 0 in its calculation. But you said that the image size needs to be 0. But I am making an exception for the hovered image.

   12