Using CSS Shapes for Interesting User Controls and Navigation

Create unique user controls and navigation with CSS Shapes

Aligning horizontally or vertically, this is the traditional order of user controls on the screen, just like a list of menu items. But what if we change it to a smoother layout that includes bends, curves, and grooves? It only takes a few lines of code to achieve it. In the era of modern minimalist design, the curved layout of user controls adds just the right amount of vitality to web design.

Thanks to CSS Shapes, encoding is extremely simple.

CSS Shapes (particularly shape-outside attribute) are a standard that assigns geometry to floating elements. The content then surrounds the floating elements along the boundaries of these shapes.

This standard use case is often presented as a design of text, edited content—plain text flows along its floating shape on its sides. However, in this post, we use user controls instead of plain text to see how these shapes inject smooth contours into their layout.

The first demonstration is a design that can be used in the product page, where any product-related operation controls can be aligned along the shape of the product itself.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343279003.png?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation">
<div>
  <label for="one">One Bottle</label>
</div>
<div>
  <label for="six">Six Pack</label>
</div>
<div>
  <label for="twelve">Twelve Pack</label>
</div>
<div>
  <label for="crate">Entire Crate</label>
</div>

img {
  height: 600px;
  float: left;
  shape-outside: url("bottle.png");
  filter: brightness(1.5);
}
input {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  margin-left: 20px;
  box-sizing: content-box;
  border: 10px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b231714;
  border-radius: 50%;
  background: linear-gradient(45deg, pink, beige);
  cursor: pointer;
}

The image of the bottle floats to the left and uses shape-outside attribute to give shape boundaries. The image itself is used as a reference for shapes.

Note: Only images with transparent backgrounds can generate shapes based on the outline of the image.

The default style of the radio button is replaced by a custom style. Once the browser applies the shape to the floating image, the radio buttons are automatically aligned along the shape of the bottle.

This way, we don't have to bother to assign positions to each radio button individually to create such a design. Any buttons added afterward will automatically align with the previous buttons according to the shape of the bottle.

Here is another example, inspired by the Wikipedia homepage. This is a perfect example of the kind of unconventional main menu layout we are considering.

It's easy to implement with shape-outside :

<div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation">
  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Formation</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Atmosphere</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Heat</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Gravitation</a>
  </div>
</div>
<div class="right">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation">
  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Moon</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Climate</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rotation</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Orbit</a>
  </div>
</div>

img {
  height: 250px;
  float: left;
  shape-outside: circle(40%);
}

main > div { grid-area: 1/1; } 

.right { transform: rotatey(180deg) translatex(250px); }

.right > a { 
  display: inline-block; 
  transform: rotateY(180deg) translateX(-40px); 
}

main > div:nth-of-type(2) img { visibility: hidden; }

Elements can only float to the left or right. There is no center floating element, and the content surrounds both sides. To achieve the design where the link surrounds both sides of the image, I created two sets of links and flipped one of them horizontally. I've used the same image with the circle() CSS shape value in both groups, so the shape matches even after rotation. The link text of the flip group will be displayed in an upside-down sideways, so it is rotated back.

Although two images can be superimposed on each other without visible overflow, it is better to hide one of them using opacity or visibility attributes.

The third example is because of the use of dynamic HTML elements<details></details> And it looks a bit vivid. This demonstration is a great example of a design that displays additional information about products, etc., which is hidden from users by default.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343437928.png?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation">
<details>
  <summary>Click to know more!</summary>
  <ul>
    <li>The diamond is now known as the Sancy</li>
    <li>It comprises two back-to-back crowns</li>
    <li>It's likely of Indian origin</li>
  </ul>
</details>

img {
  height: 200px;
  float: left;
  shape-outside: url("diamond.png");
  shape-margin: 20px;
}
summary {
  background: red;
  color: white;
  cursor: pointer;
  font-weight: bold;
  width: 80%; 
  height: 30px;
  line-height: 30px;
}

The image floats to the left and gives the same CSS shape as the image. shape-margin property adds margin space around the shape assigned to the floating element. When clicking<summary></summary> When the element is, the parent<details></details> The element displays its contents, which automatically surround the shape of the floating diamond image.

<details></details> The content of an element does not have to be a list like it did in the demo. Any inlined content will be wrapped around the shape of the floating image.

The last example uses polygon shapes instead of images or simple shapes (such as circles and ovals). By adding another coordinate to the shape, the polygon can be easily bent, resulting in more angled geometry.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343443133.png?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation">
<div>
  <ul>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Shop</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Media</a></li>
  </ul>
</div>

div {
  width: 0;
  height: 0;
  --d: 200px;
  border-right: var(--d) solid transparent;
  border-bottom: var(--d) solid transparent;
  border-left: var(--d) solid red;
  float: left;
  shape-outside: polygon(0 0, var(--d) 0, 0 var(--d));
}
ul {
  list-style: none;
  padding-top: 25px;
}

Use the border properties to create a red triangle floating to the left. To create a triangle CSS shape that matches the red triangle, we use the polygon function as the value of shape-outside property. The value of polygon() function is the three coordinates of the triangle, separated by commas. The links are automatically aligned around the floating triangle, forming an inclined menu layout along the diagonal edges of the triangle.

As you can see, even for a simple diagonal layout of user controls, CSS Shapes does a great job of adding some vitality to the design. Using CSS Shapes is much better than rotating a row of user controls—the alignment of individual controls and text will also rotate, resulting in layout exceptions. In contrast, CSS Shape simply arranges individual controls along the provided shape boundary.

Please note that in the above code example, the image path needs to be replaced with the actual image path. I have tried my best to retain the original meaning and have made synonyms and adjusted sentences to some sentences to achieve pseudo-original effect.

The above is the detailed content of Using CSS Shapes for Interesting User Controls and Navigation. For more information, please follow other related articles on the PHP Chinese website!