Css shapes

Css shapes is a new addition to the Css language which allows developers and designers wrap content around paths like, circles, ellipses and polygons.

1. Css Shapes Fashion the web

2. Think outside the box

3. Intro Css Shapes is a brand new addition to the css language which allows designers and developers to wrap content around paths. Shapes can be defined manually or they can be inferred from images. <img class = ”element” src = ”espresso.png” /> <p> Lorem ipsum… </p> <style> .element{ shape-outside: url( image.png ); shape-image-threshold: 0.5 ; float: left; } </style>

4. Create Shapes The css shapes specification defines four shape functions: Circle () Ellipse () Polygon () Inset() And three css attributes: Shape-margin Shape-outside Shape-image-threshold

5. Circle(R at Cx Cy) .element{ shape-outside: circle( 50 %); width: 300px ; height: 300px ; float : left; }

6. Ellipse(Rx Ry at Cx Cy) .element{ shape-outside: ellipse(closest-side farthest-side at 50 % 50 % ); shape-outside: ellipse( 150px 300px at 50 % 50 %); width: 300px ; height: 600px ; }

7. Polygon(X1, Y1, X2, Y2, ….) .element{ shape-outside: polygon( , 0 300px , 300px 600px ); width: 300px ; height: 600px ; }

8. Inset(Top Right Bottom Left Border-Radius) .element{ shape-outside: inset( 100px 100px 100px 100px ); float : left; }

9. Animate Shapes - Resizing Effect .element{ shape-outside: circle( 30 %); transition: shape-outside 1s ; float : left; } .element:hover{ shape-outside: circle( 50 %); }

10. Animate Shapes - Transformation Effect .element{ shape-outside: polygon( 0 0 , 100 % , 100 % 100 %, 0 100 %); transition: shape-outside 1s ; } .element:hover{ shape-outside: polygon( 0 0 , 100 % 50 %, 100 % 50 %, 0 100 %); }

11. Work with Shapes Css Shapes is still a newborn technology, thus currently only the major browsers support it. Stay tuned for upcoming supporting browsers here: http://caniuse.com/#feat=css-shapes Furthermore, here are some links that can help getting started with Shapes: CSS Shapes Editor extension for Google Chrome T utorial for Photoshop CSS Shapes polyfill

12. The Future of Css Shapes Shapes-Inside and Css Exclusion

13. “ There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for. ” - Milton Glaser

14. In a web where content is mostly trapped in simple boxes, CSS Shapes provide a way to create expressive layout, bridging the fidelity gap between web and print design

15. Thanks! Contact me: [email protected] https://il.linkedin.com/in/orchen https://www.facebook.com/orchen.io