- What will the CSS Shapes specification allow us to do on our websites? Word Wrap! It provides web designers with a new way to change how the content flows inside and around arbitrarily complex shapes
Discuss how we can and when we can start using brand new capabilities like this. What do we need to be careful of? If you apply that line of CSS to your element, the shape won’t be applied to it unless two conditions are met:
The element must be floated. Future levels of CSS Shapes may allow us to define shapes on non-floated elements, but not yet.
The element must have intrinsic dimensions.The height and width set on an element will be used to establish a coordinate system on that element.
- How can we get started?
Currently Shapes is supported only in Webkit Nightly and Chrome Canary, Module Level 1 (allows content to flow around a shape)In order to use CSS Shapes in Chrome Canary today, you have to enable the experimental features flag.
You can apply a shape to an element using one of the Shapes properties–
shape-outside:
circle()
ellipse()
inset()
polygon()
- What are some good suggestions, tools, and concepts that you’d like to remember when you decide to include this technology in a web design in the future?
- Shapes property can be combined with Clipping and Masking, CSS Filters, and Compositing and Blending features.
- Since shapes is not supported in all browsers, it is important to check which browsers support it and set up an alternate layout for non-supported browsers. A good tool to use is “canisuse.com”.
- The best thing to do is to start experimenting with it and see what happens.
- Find another good article about this topic that you can share with us at the chat and explain why the article is worth looking at. http://www.html5rocks.com/en/tutorials/shapes/getting-started/