Last week i went to a Meetup and watched a great talk by Razvan Caliman, who works for adobe, named The Expressive Web where he talked about several upcoming CSS features. Some of them are already partially supported by modern browsers (no IE8, you are not modern) and some of them are not but are still cool features. Browsers like Chrome Canary or Webkit Nightly support most of these features, so you can play with them there. From all the things he talked CSS Shapes and CSS Masking got my attention.
CSS Shapes and Masking are features that, if all browsers had support for them, you could use right away in your project. For example taking a square picture and making it circular for a login button in your navigation bar can now been done via CSS without post process or any library/JS/Whatever. Also you can float text beautifully around a picture of any element with CSS Shapes, and the entire presentation of your web page goes to another level. Below I'm giving some examples how I used these features for my own website.
First things first, in order to see the end result in your browser you need to enable the experimental web on Chrome Canary.
Once you done that check my original about page and then check how it looks using CSS Shapes and Masking. In case you haven't install canary, this is how the about looks after applying the new CSS.
The important bit here is how the same amount of information is being presented aesthetically better, using less space. Also note that this is an experiment, the page can look 100 times better. Here is an example of adobe using the same features to present Alice in Wonderland. Amazing huh?
So initially i wanted to make my picture circular, because this is the latest trend on the web. That was pretty simple to be honest, i used the following CSS on my IMG tag.
Note here that just doing clip-path won't work (or at least didn't work for me). Applying the above made my picture circular, floating left and with a margin of 5 pixels. All jolly good fun. You can also use any other shape you want. You can read more about clipping and masking in this article.
Now that i made my picture circular, i wanted the text to float around it beautifully and shapes was my friend. There are two features that i used, shape-inside and shape-outside, and yes you can use them both for the same element. shape-outside is the feature that dictates to the browser how the text should float around the element. So by applying shape-outside: circle(134px at 50% 50%); on my IMG tag i told the browser to wrap the text around it and treat it like a circle (and not like a square that the image actually is). After applying that the IMG CSS looked like that:
Now the last bit was to make the text, that had the social media, circular too (i like circles) and float it to the right side of the main text. That proved to be trickier than i thought, but thanks to Razvan that helped me on Twitter i solved it.
My DOM initially was like that, and it didn't work:
Changing the DOM though did the trick. I ended up moving the social Div inside the main text div and that did the trick, it worked!!
Razvan further explains the mistaked i made in codepen.io demo i posted above.
Using the shape-inside feature you are dictating the browser to wrap the contents of the element as a specific shape. As with shape-outside, you can use any shape you fancy.
More about shapes here.
The final thing was to make the text wrap the newly created circular div correctly. That was now easy, since we did it before with the image. So using shape-outside again does the trick again.
And that's it. Now everything works as i wanted to work and looks great. All these things are of course experimental but the image clipping works just fine on Chrome and on Safari. I might be using it for my project on the user login drop-down instead of the border-radius. In the future all new browsers will support that feature and many more.
You can read more about new (or existing) CSS feature over to w3.org