I know it looks hefty, but the clip-path is defined using eight points (like shown in the figure). hc will be based on the width while vc on the height hc and vc : both of these will control our clip-path values and the shape we want to get.R: the ratio that will help us defines the height based on the width.Our octagon is defined with four variables: We'll use an octagonal shape because it's more of a generic shape from that we can use to create other shapes (a hexagon, a rhombus, a rectangle, etc.) simply by changing a few values. Let me blow your mind with another idea: What about making that calculation a variable so that we can easily switch between different grids without changing the code? We can certainly do that! We saw how we were able to make the hexagon and rhombus grids using the exact same code structure, but different calculations. Polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Īnd we’re done! A mere four changes to our code gets us a completely new grid but with a different shape. Our shape-outside value will look like this: An opaque color to shift the second row to the right so the hexagons aren’t directly stacked on top of one another (illustrated by the green arrow).A transparent one to create the “free space” while allowing the first row to stay in place (illustrated by the blue arrow above).Seen differently, we need to shift every second row so we need a kind of repetition - perfect for a repeating gradient! If, for example, we have 10 rows of hexagons, we only need to shift means every even row. But what kind of gradient fits our situation? What's cool about shape-outside is that it actually works with gradients. But to understand what kind of shape we need, let's zoom into the pattern. This explains exactly why the hexagons need to be inline-block elements. Notice "inline content" in the definition. By default, inline content wraps around its margin box shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes. The shape-outside CSS property defines a shape-which may be non-rectangular-around which adjacent inline content should wrap. Let's take a quick refresher on what it does: I am using the container::before pseudo-element to create a float element that take up all the height at the left of the grid, and that has a width equal to half a hexagon (plus its margin). The markup can go something like this:Įnter fullscreen mode Exit fullscreen mode Bennett Feely's Clippy is a great online generator for clip paths.Įach hexagon is an inline-block element. We will consider a variable S that will define the dimension of our element. This task is fairly easy using clip-path. This article is a generic version of a previous one where I only talked about hexagon shapes: įirst, we create our hexagon shape. For example, we can chuck more hexagons in there by adding more divs, and control both the sizing and spacing using CSS variables.Ĭool, right? And this is only one example among many grids we will build in the same manner. In addition to being responsive, the grid also scales. Resize the demo screen and see the magic. This is a fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS. Since the rise of Flexbox and CSS Grid, everyone is claming the same: "float is dead!", "stop using float!" but I'm here to resurrect our old friend float to create complex and responsive layouts that you cannot achieve using flexbox and CSS grid.
0 Comments
Leave a Reply. |