DEV Community

Cover image for Using shapes in the web project
Keep Coding
Keep Coding

Posted on • Originally published at mdbootstrap.com

Using shapes in the web project

Shapes as a UI trend

When we look at various landing pages or look at Dribbble for inspiration, we find many graphical visualizations in which shapes are the focal point or essential elements. Current trends in web design clearly show that what catches the eye of the user and makes a given website or application interesting for him in terms of UI are two-dimensional figures with streamlined shapes, most often irregular, rounded, with subtle gradients or pastel in the background the colors. This trend does not surprise me at all, because the delicate shapes on which we add text or illustrations give the impression of lightness, minimalism, and at the same time can be diverse and tailored to the subject of a given web project.


Fancy Border Radius Tool

As we at MDB carefully follow frontend technological innovations and trends in web design, we decided to create many tools that will make it easier for you to apply many interesting UI ideas directly to your project built on the MDB package. You may already know some of these tools and some you do not, but today I would like to introduce you to the "Fancy Border Radius Tool". With this shape generator, you can quickly and easily create the shapes you want and match the vision of your project. To create any shape, you must move the four sliders, which will allow you to get a figure with a different border radius. Then copy the generated CSS and HTML code, paste it into the project, give the appropriate height, width, and background color.


Sample projects

Of course, the shape itself is not enough. For a better effect, it is worth adding a properly selected font and content or illustrations. In the three following projects, I will show you the various possibilities of using the "Fancy Border Radius Tool".

Intro with gradient shape and content

project1


Various shapes within the grid

project2


Shapes with illustrations

project3

Top comments (0)