Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

First Steps with CSS Shapes

In this tutorial, we shall delve into how as a designer, one can get started on working with several different kinds of CSS shapes. Keeping this in mind, we shall take a look into everything, right from circles to polygons and more.

In this tutorial, we shall delve into how as a designer, one can get started on working with several different kinds of CSS shapes. Keeping this in mind, we shall take a look into everything, right from circles to polygons and more.

For a pretty long time, designers had been limited to create their designs within the limits of a rectangle. And so, it is not surprising to see a majority of the content on the Internet still lying within the box-type shapes, simply because it was rather difficult to venture into non-rectangular shapes. However, all of that changed when Chrome 37 came with something new in the form of CSS Shapes.

With CSS Shapes, it is possible for web designers to now wrap their content around several shapes like circles, polygons and ellipses. Therefore, they can now necessarily do away with the rectangle.

A small example

Let us take a small example to demonstrate. You might want to float an image that has transparent parts expecting the content to wrap and fill the gaps; you are likely to be disappointed with the rectangular shape that stays around the element. This can easily be solved with CSS Shapes.

Listing 1: Sample showing shape element details

<img class=”element” src=”img.png” />
<p>Checking CSS Shapes…</p>
<style>
.element{
  shape-outside: url(img.png);
  shape-image-threshold: 0.4;
  float: left;
}
</style>

The CSS declaration going by shape-outside: url(img.png); tells the browser to extract a shape out of the image. As for the shape-image-threshold property, it is meant to declare the opacity level to be used for the creation of the shape. It value also needs to be between, 0 and 1, i.e. fully transparent to completely opaque. So, shape-image-threshold: 0.4; means pixels that have an opacity of 40 percent shall be used for creating the shape.

The float property happens to play a big role here. As the shape-outside is meant for defining the shape of the area around which the content is meant to wrap, the float property puts the effects of the shape.

Another very important point of note here is that elements have float areas on the siude opposite to their float value. If an element with a jar is being floated left, the area of float will be to the right of the jar. So, content only wraps around the shape on the opposite side to what is defines by the float property, but not both sides.

Creating shapes manually

While you can always extract shapes from images, it is also possible to code them manually. One can choose from functional values to create – ellipse(), circle(), polygon() and inset(). Here, each of the functions is known to accept co-ordinates and is coupled with a reference box to establish the co-ordinate system.

Circle() function

The circle function can be defined using circle(r at cx cy). Here, r is the radius of the circle. The coordinates of the center circle on the X and Y axis are represented by cx and cy. These are optional though and the intersection of the diagonals is used if you happen to omit them.

Listing 2: Sample Circle functions and complete html code.

   .circle {
       height: 300px;
       width: 300px;
       border-radius: 50%;
       background-color: #800000;
} 

<html>
<head>
<b>This is a circular shape -----></b>
<style type="text/css">
    .circle {
       height: 300px;
       width: 300px;
       border-radius: 50%;
       background-color: #800000;
}
body, html {
  height: 100%;
}
body {
  padding: 1;
  background-color: #C0C0C0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

If we open the html in browser, it will show the following output.

Figure 1: Circular shape

In the scenario given above, the content wraps around the circular path. The argument 50% specifies that area around which wrapping shall take place, i.e. half of the radius either vertically or horizontally. If you change the dimensions here, the radius of the shape will get influenced. This is what shows that CSS Shapes can be responsive.

A point to note again is that CSS Shapes just affect the float area around the element in question. The presence of a background will not be clipped by the shape. You will need to make use of CSS Masking to implement that. These may be clip-path or the mask-image properties.

Talking of the circle shape, the value of the percentages for the radius of the circle is calculated using a more complexformula, i.e. sqrt(width^2 + height^2) / sqrt(2). It is good to have an understanding of this since it will help you in determining the resulting circle’s shape if the element's dimensions are not equal.

All CSS unit types may be used for defining shape function coordinates – em, vh, rem, px, etc.

Reference boxes

A reference box is basically a virtual box around the element that defines the coordinate system meant for drawing and positioning the shape. The origin happens at the upper left corner. The x axis points to the right with the y axis pointing towards the bottom.

The property shape-outside changes the shape of the float area around which the content is to wrap. The float area extends to the outer areas of the box and is defined by the property margin. This is also known as the margin-box and is the default reference box.

The two given CSS declarations have the same results –

.element{
  shape-outside: circle(50% at 0 0);
  /* similar to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

In the above demo, we haven’t set a margin. So, it is set to default, i.e. the upper left of the element’s content area. Now, if you set a margin –

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 50px;
}

The coordinate system’s origin will now lie just outside the element’s content area, i.e. 50px up and left, just like the center circle.

Margin reference box for CSS Shapes

There are several margin reference box options that you can choose from. These are – border-box, content-box, margin-box and padding-box. The names here largely imply their boundaries.

The border-box is restricted by the outer edges of the borders of the element. This holds the same for padding-box, where it is constrained by the padding of the element. The content-box is similar as the actual surface area that is used by the element’s content.

It must be noted that one can only make use of one reference box with the declaration shape-outside. Each reference box is known to affect the shape in rather different ways.

Ellipse() function

An ellipse is defines by ellipse(rx ry at cx cy). Here, rx and ry happens to be the radii of the ellipse on the x and y axis and cx an cy form the coordinates of the center of the ellipse.

Listing 3: Ellipse function

.element{
  shape-outside: ellipse(100px 200px at 50% 50%);
  width: 200px;
  height: 400px;
}

Here the percentage values are calculated from the dimensions of the coordinates and you don’t need to fret over any mathematics here. You can thus omit the coordinates for the center of the ellipse.

The radii on the x and y axes can even be declared with keywords:farthest-side. This gives a radius which is equal to the distance between the ellipse center and the side of the reference box that is farthest away from it. As forclosest-side, itmeans the exact opposite, i.e. the shortest distance between a side and the center.

Listing 4: Ellipse with closest and farthest

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* similar to: */
  shape-outside: ellipse(100px 200px at 50% 50%);
  width: 200px;
  height: 400px;
}

This feature is largely helpful when you want the ellipse shape to adopt despite the element’s dimensions being likely to change in rather unpredictable manner.

The features farthest-side and closest-side may also be implemented for the circle() function.

Polygon() function

The polygon shape opens a great number of options for web designers. The format for a polygon is polygon(x1 y1 x2 y2 …..). Here, every vertex point of the polygon is specified by the coordinates x and y. The minimum number of points required to have a polygon is three, i.e. a triangle.

Listing 5: Polygon function

.element{
  shape-outside: polygon(0 0, 0 200px, 200px 400px);
  width: 200px;
  height: 400px;
}

If you wish to have responsive polygons, you may use percentage value for all or some of the coordinates.

Listing 6: Responsive polygon

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 30em;
  height: 60em;
}

Inset() function

The inset() function allows for the creation of rectangular shapes around which you can wrap content. Now, this may sound a little contrary to the fact that CSS Shapes are in fact meant for building shapes that are anything other than boxes. Anything that you wish to implement with inset() can rather be implemented using float, margins or even the polygon function but inset offers a better readable expression.

The inset function can be declared using inset(top right bottom left border-radius). The first four define the edges of the element. The final argument is the border-radius and is meant for the rectangular shape. However, this remains optional and may be left out.

Listing 7: Inset function

.element{
  shape-outside: inset(50px 50px 50px 50px);
  /* gives a rectangular shape that is 50px inset on all sides */
  float: left;
}

We shall now implement a number of other shapes using CSS.

Other popular shapes

In this section we have written different sample code for various shapes. Any style can be used in the html file and the output will be displayed in the browser. We have shown some output below.

Listing 8: Oval shape

<html>
<head>
<b>This is a Oval shape -----></b>
<style type="text/css">
.oval {
   width: 300px; 
   height: 150px; 
   background: blue; 
   -moz-border-radius: 150px / 75px; 
   -webkit-border-radius: 150px / 75px; 
   border-radius: 150px / 75px;
}
body, html {
  height: 100%;
}
body {
  padding: 1;
  background-color: #C1C0C0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>
    <div class="oval"></div>
</body>
</html> 

The output will be as shown below.

Figure 2: Oval shape

Listing 9: Down triangle

#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 100px solid green;
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
}

This is the code for triangular shape.

Listing 10: Triangle

<html>
<head>
<b>This is a Triangle -----></b>
<style type="text/css">
.triangle { 
   width: 0; 
   height: 0;
   border-top: 400px solid green;
   border-left: 150px solid transparent; 
   border-right: 50px solid transparent; 
}
body, html {
  height: 100%;
}
body {
  padding: 1;
  background-color: #C0C0C0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html> 

The output will be as shown below.

Figure 3: Triangle

Listing 11: Diamond

<html>
<head>
<b>This is a Diamond -----></b>
<style type="text/css">
.diamond {
   width: 150px; 
   height: 150px; 
   background: yellow;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
body, html {
  height: 100%;
}
body {
  padding: 1;
  background-color: #C0C0C0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>
    <div class="diamond"></div>
</body>
</html> 

The output will be as shown below.

Figure 4: Diamond shape

Listing 12: Parallelogram

#parallelogram {
   width: 150px; 
   height: 80px;
   background: red;
   /* Skew */
   -webkit-transform: skew(30deg); 
   -moz-transform: skew(30deg); 
   -o-transform: skew(30deg);
   transform: skew(30deg);
}

Listing 13: A twelve pointed star

#twelve-point-star {
   height: 200px;
   width: 200px;
   background: green;
   position: absolute;
}
#twelve-point-star:before {
   height: 200px;
   width: 200px;
   background: green;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 200px;
   width: 200px;
   background: green;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

Listing 14: Speech bubble

#speech-bubble {
   width: 150px; 
   height: 90px; 
   background: black;
   position: absolute;
   -moz-border-radius: 20px; 
   -webkit-border-radius: 20px; 
   border-radius: 20px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-right: 30px solid black;
   border-bottom: 15px solid transparent;
   margin: 15px 0 0 -28px;
}

Conclusion

CSS Shapes have been a popular adoption among web designers, after it first made an appearance. In fact, having such features allowed designers to create fresh set of designs that looked turned out to be rather different from what was previously very common. It enabled designs to move away from the more common box shapes to different other shapes like polygons, circles, ellipses, etc.

In the above tutorial, we have clearly seen how such a wide range of shapes and effects can be implemented. While there are several other ways that can aid in designing more complex shapes, we have just about taken simple ones that can help a beginner get started with.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login