CSS Shapes – From a New Guy’s Perspective

Let me first reference the article from SitePoint here by Patrick Catanzariti. It is a really great article, and should totally read it for real detailed information on the matter. This is really going to be about my viewpoint on this new proposed property.

The divide between print and screen has been getting smaller and smaller all the time. Apart of technical differences, the ability to manipulate screens to look as polished as a print object has increasingly become easier and easier. There have always been weird ways developers have had to make things look nice around images however.

The CSS shapes properties look awesome. They seem like an understandable way to implement shapes in websites. For example, one thing that books have always done but websites have struggled with is non-linear contours in paragraphs. Many times in books you see the text curve around an image that contains curves as well. There really hasn’t been an easy way to implement this in website design, so being able to set the shape-outside property makes sense with in the space on the page.

The polygon implementation is particularly interesting. Using coordinates that connect through out the shape is nifty. Between using pixels and percentages I would definitely choose using percentages. That is because you can take you image in your image editor, and just use simple math along the edges of the image with the ruler.

I really haven’t done a ton of searching on the matter, but using x and y coordinates really makes sense in web design. I wonder how many properties actually use coordinates as parameters. Would the distance from left and distance from the top be considered the same thing? I could see that, but there could also be some subtle differences I just don’t see.

Either way, I wonder how long it will take for these properties to receive acceptance from the popular browsers. I noticed the “hack” you have to do with Chrome to get it to work, but I really could see more use cases for this stuff. 

Posted in Blog Posts, Web Development Tagged with: , , ,
%d bloggers like this: