Since the release of CSS3, we have been able to achieve a lot of visual effects that were previously only possible with images using the new properties of CSS. For example, rounded corners, circles, parallelograms and other visual effects.
However, as browsers become better at supporting new CSS properties, we can create more interesting visual effects with the help of CSS shapes (clip-path, mask, etc.). Here are 10 examples of shape visual effects implemented with CSS to show the charm of shapes.
Concave and convex visual effect
This example comes from an article on CSS-Tricks, which uses clip-path to achieve a bump and bump visual effect. As shown below:
The code address
Full-screen clipping, inverted triangle visual effect
Nowadays, full-screen images are more and more widely used on the web. Here’s an example of an inverted triangle using a TRANSFORM in CSS:
The code address
Use rounded corners to embellish the content
The following example uses rounded corners:
Window visual effect
Using clip-path in CSS, we can implement arbitrary shapes and also achieve some interactive effects. For example, the following example uses clip-path to implement a mouse-over interaction with shapes.
The code address
Diamond menu visual effect
The code address
Bevel animated visual effects
The code address
Explosion visual effects
Using SVG, you can achieve a text-like explosion animation:
The code address
Curve wrap effect
Images arranged around text on the previous Web were a difficult effect to achieve. With the new SHApe-outside property of CSS, however, it’s easy to create the following text that wraps around an image:
The code address
Corner visuals
Buttons are a common element in design, often with rounded corners and other visual effects. However, it is sometimes possible to design other corners with a little imagination.
The code address
Medal of Honor visual effects
The visual effects of MEDALS are great for highlighting important content. However, in previous Web development, we generally used images to do this. Now, you can do this directly using CSS.
The code address
conclusion
Use a variety of shapes of visual effects, can greatly enrich the visual creative effect. Especially now, with CSS Grid, shapes can be used to create more creative visuals.
The above example may not be applicable everywhere, but it shows how technology continues to push web visual creativity forward. All the more reason to experiment with new technologies on the Web in order to create more creative visuals.
This article is mainly compiled from 10 Examples of Unorthodox Container Shapes Created with CSS. Please kindly comment on any omissions, omissions or inadequacies.