Traditional Box Shaped Websites
Every website we browse on a daily basis has one thing in common, rectangles within rectangles. We’ve tried so hard to be creative but this restriction has always been around. Fluid designs, Bootstrap and other frameworks look great but websites haven’t quite achieved box-shaped free designs like prints.
CSS Shape
With CSS Shape you can have non-box shaped element in HTML. I’m not talking about triangles or trapezoid made with border properties rather an actual shape that can have text wrapped around the element.
CSS Markup
To use CSS Shapes, we first need our element to have width
and the element has to float
.
Markup for simple circle:
.circle { background: gray; width: 15em; height: 15em; float: left; shape-outside: circle(); -webkit-clip-path: circle(); clip-path: circle(); }
We use shape-ouside
alongside with clip-path
to do the trick here using same values for both properties.
List of available values:
circle()
ellipse()
inset()
: This is for rectangular shapes. It also allow border edges.polygon()
: This is for creating any shape with more than 3 vertices.url()
: Yes! you can also shape based on images.inherit
andinitial
If you want more margin between texts:
shape-margin: px | em | %
Polygon
When you use polygons you must have more than 3 vertices. Also if your beginning point and endpoint are different it closes itself.
To shape a simple star:
shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
Image
When identifying an image, the image must have transparency. In other words, only the image formats that support transparency are allowed such as png
, svg
, and gif
.
Browser Support
Browser supports are not quite as good as other specifications, though CSS Shapes Module 1 is under a Candidate Recommendation. Supoort in Microsoft Edge and Firefox are under consideration.
Leave a Reply