PlanMx

Develop your online brand | PlanMX Marketing Web

Use CSS Shapes to create attractive curves in your Web Design.

Rules for using add-ons - corners - lines to create layouts for web pages are becoming more familiar and unimpressive. Although there are new designs such as grid designs, everything seems to be unharmed to the top in web design.

Pay attention to magazines and newspapers, you will realize how creative layout design. The text is always covered very impressive. So in today's article, let's take a look at CSS Shapes.

You can see more: Use PurifyCSS and Grunt to remove unneeded CSS

1. Quick Intro to CSS Shapes

CSS Shapes help you create abstract layouts, which are more impressive than simple rectangles and squares. CSS includedshape-marginandshape-outside. CSS also supports web browsers very well. Web browsers compatible with CSS are Chrome, Safari and Opera, with-webkit-prefix, hence-webkit-shape-outside.

shape-outside will handle so that the content is displayed in the outer part according to the curve, a new beauty and unique than the box model. While shape-inside will handle the content displayed inside, creating simple but impressive circles.

The shape-margincan be placed around any design that is in useshape-outside.

Let's look at some examples.

Creating a Shape

We can understand CSS Shapes as a circle. Here is a "div" (my circle):

<div class="circle"></div>

<p>Lorem ipsum…</p>

<p>Lorem ipsum…</p>

<p>Lorem ipsum…</p>

And here are some basic indicators:

.circle

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

 

However, because border-radius does not define the shape of the design, you will not see the circle.

If you use DevTools to test the element, you will notice that it is actually a box.

In order for the text to have a curve of your choice, you need to change the shape of the element byshape-outside. In this case, I will addcircle()as the value:

.circle

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

-webkit-shape-outside: circle();

shape-outside: circle();

 

Our text now creates a curve.

Now, if you check, you will see the text is arranged in a circle as shown below:

Customizing the Circle

circle()to get a few values to determine the radius and center coordinates respectively:circle(r at x y). The radius value will depend on the element size. If the element is 300px wide, its radius will be 150px.

Next, the x and y coordinates will also depend on the element size. The default rate is 50% 50%.

These two values will be useful when you want to resize the shape while keeping the actual element size or moving the shape while keeping the element in place. In the following example, we will reduce the circle radius to 60px and center it to 30% 70%, so move the circle to the bottom left of the element box.

When you want to resize the shape, use these values.

When changing the size of a circle, both the center and radius coordinates must be assigned a clear value:

circle( 60px at 30% 70% ) // correct.

circle( 60px ) // invalid.

circle( at 30% 70% ) // invalid.

2. Shape Box Model

CSS Shapes are like an element, but they are applied outside the scope of the element. So you can set it separately. For example, you enterborder-boxwhile setting the shape forpadding-box. To change the box, add the box-model- keywords, content-box, margin-box, border-box, hoặc padding-box.

.circle

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

padding: 10px;

border: 20px solid #ccc;

margin: 30px;

-webkit-shape-outside: circle() padding-box;

shape-outside: circle() padding-box;

 

The default box model will be margin-box. And in the example below, I changed it to padding-box. Now we will see the text going across the border, touching the element's padding and the curve appearing.

Creating More Shapes

Some features of CSS Shapes and some other shapes:

ellipse():This function will allow you to create an ellipse. But unlike circle (), the ellipse () function uses two radial (horizontal and vertical) measurements. So the ellipses will have the index (100px 180px at 10% 20%).

polygon():This function will allow you to create more complex shapes such as triangles, hexes and other special shapes.

Conclusion:

In this article, we have learned about the basics of CSS Shapes. You can create a shape and size it.

Web Design