Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css shapes


Published on

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

Published in: Software
  • Be the first to comment

Css shapes

  1. 1. Css Shapes Fashion the web
  2. 2. Think outside the box
  3. 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. 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. 5. Circle(R at Cx Cy) .element{ shape-outside: circle(50%); width: 300px height: 300px float: left; }
  6. 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. 7. Polygon(X1, Y1, X2, Y2, ….) .element{ shape-outside: polygon(0 0, 0 300px, 300px 600px); width: 300px height: 600px }
  8. 8. Inset(Top Right Bottom Left Border-Radius) .element{ shape-outside: inset(100px 100px 100px 100px); float: left; }
  9. 9. Animate Shapes - Resizing Effect .element{ shape-outside: circle(30%); transition: shape-outside 1s; float: left; } .element:hover{ shape-outside: circle(50%); }
  10. 10. Animate Shapes - Transformation Effect .element{ shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; } .element:hover{ shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); }
  11. 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: Furthermore, here are some links that can help getting started with Shapes: ● CSS Shapes Editor extension for Google Chrome ● Tutorial for Photoshop ● CSS Shapes polyfill
  12. 12. The Future of Css Shapes Shapes-Inside and Css Exclusion
  13. 13. “There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” - Milton Glaser
  14. 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. 15. Thanks! Contact me: