Friday , 24 November 2017
Home » HTML/PHP/JS/CSS » A Definitive Guide To CSS Shapes

A Definitive Guide To CSS Shapes

Web designers are no more restricted to the square and rectangular shapes only. The evolving CSS specification will dramatically change the scenario and will offer flexibility to the web designers to design anything with CSS Shapes.

With the virtue of CSS Shapes, web developers can generate custom paths in the form of polygons, circles and other shapes. Thus, the content now can be wrapped in ellipses and circles, rather than being limited to the rectangles only.

One can define shapes, either by deriving it from images or creating them manually. Let’s delve deep into the topic.

Guide To CSS Shapes

 CSS Shapes: A Foreword

CSS Shapes are simple geometric shapes that can be used in CSS. And, CSS is the language that is ideal for describing the structured documents’ rendering on paper, on-screen, etc. According to the Level 1 of the CSS Shapes specification, the shapes can be applied to the elements defined with the float data type. For instance, if you are using a circle shape on a float, it will wrap the inline content around a circle rather than bounding box of the float.

Let’s consider an example.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

Here, the class is added to an image. The image is floated to left, certain value for height, width and margin are provided. By including the property shape-outside in an appropriate way, the text will be wrapped according to the mentioned shape (above, the shape is a circle).

What are the different shapes

The property shape-outside can accept different types of values, including circle, inset, polygon and ellipse. All these are considered as the basic shapes, here is a brief introduction to all the basic shapes.

  • inset()

If you want to define elements on rectangular shapes that float also offers, the inset() function can be used as the shape-outside property. While offering you the rectangular elements support, this function also helps one to set the border radius and four position arguments. However, to define a border radius for a rectangle, it must be preceded with the round keyword.

Syntax:

inset(top right bottom left round border-radius);

Example:

inset(20px 40px 20px 40px round 50%);

  • circle()

According to the CSS Shape specification, the value for the circle shape can be defined as mentioned in the below syntax. The radius is kept at 50% as it needs to be the half of the width of the element. The other parameters represent the x and y coordinate of the center of a circle. With this approach, you can wrap your text around a circle.

Syntax:

circle(r at cx cy);

 

Example:

circle(50% at 50% 50%);

 

// This can also be written as

circle (50%);

  • ellipse()

The ellipse is a curved shape that can be used to curve around various elements. Its implementation is quite similar to that of a circle, with the only difference that the ellipse will have two values for the radius.

Syntax 1:

shape-outside(rx ry at cx cy);

Here, you may use a relative or an absolute value for radius; in fact, you can even use keywords like closest-side and farthest-side. It will be as mentioned in the below example.

Example:

.shape { float: left; width: 100px; height: 100px; margin: 10px; }

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

To create an ellipse by passing absolute parameters, it will be as,

.ellipse-values { shape-outside: ellipse(60px 120px at 50% 50%); }

Similarly, you can tweak the code as required and shift the ellipse shape and wrap the content around the image in a perfect way. You just need to precisely observe the image and set parameters appropriately.

  • polygon()

This shape will offer you a great control for drawing a variety of shapes. Polygon value can form rigid shapes with as many coordinates as you want, but minimum three coordinates must be there. All the coordinates are required to be separated by a comma.

Example:

.shape-polygon { shape-outside: polygon(0 10px, 140px 20px, 160px 50px, 160px 100px, 100px 180px, 40px 190px, 0 200px); }

All these are the basic shapes. You can also use the reference box concept that can offer you an edge over CSS Shapes. There are basically four reference boxes and these are as follows.

  1. content-box: Constrained with original content, this helps wrap the content by considering the text. The radius for this box has to be a value greater than 0.
  1. margin-box: This is the default reference box of the circle. It is constrained with the margin of an element. Its value defines the shape that is covered by the outside margin edge.
  1. border-box: This reference box is constrained by the border and thus, offers value to define a shape enclosed by the outside border edge. It adheres to the general rules of border radius shaping for the outside of the border.
  1. padding-box: It defines the shape that lies external to the padding area. This reference box adheres to the general rules of border radius shaping for the inside of the border.

Go through this worthy guide for CSS Shapes thoroughly, it offers an absolute approach to get started with CSS shapes.

Author Signature: Addison Cohen is an application developer for Appsted Ltd, an iPhone app development company. He loves sharing latest information on the latest mobile technology.

One comment

  1. Its nice article keep going …!!!

Leave a Reply