CSS Shapes

Transcript

1. CSS  SHAPES     MAHDI  PEDRAMRAZI  
2. Rectangular  Layout.   Web  Developers  are  forced  to   create  web  content  for   rectangular  boxes.  
3. Breaking  the  Constraints  of  the   Rectangle   CSS  Shapes  allow  web  designers  to   wrap  content  around  custom  paths,   like  circles,  ellipses  and  polygons  
4. Rectangular  Layout  Example  
5. Not  User  Friendly  
6. CSS  Shapes  to  rescue  
7. Extract  a  Shape  From  the  Image  
8. CreaLng  Circles   circle(r  at  cx  cy)   r  =  radius   cx  =  x-­‐axis  (op6onal)   cy  =  y-­‐axis  (op6onal)  
9. Shape  CoordinaLng  System   The  origin  of  the  coordinate  system  is  at  its  upper-­‐leO  corner     with  the  X-­‐axis  poinLng  to  the  right  and  the  Y-­‐axis  poinLng  down.  
10. Reference  box   •  Margin  box  is  the  default  reference  box  
11. Default  Reference:  Margin  box  
12. Read  More  on  Reference  Box     Understand  reference  boxes  for  CSS  Shapes.  
13. CreaLng  Ellipse   ellipse(rx  ry  at  cx  cy)   cx  =  x-­‐axis  (op6onal)   cy  =  y-­‐axis  (op6onal)  
14. Polygon  Shape  
15. Browser  Support     •  WebKit  and  Blink.     •  Chrome  37   •  Opera  24.     •  It  will  be  available  in  Safari  8  (and  the  7.1  and   6.2  updates)  
16. Enable  CSS  Shapes   -­‐  Copy  and  paste     chrome://flags/#enable-­‐experimental-­‐web-­‐plaaorm-­‐features   into  the  address  bar     -­‐  Press  enter.  Click  the  ‘Enable’  link  within  that  secLon     -­‐  Click  the  ‘Relaunch  Now’  budon  at  the  bodom  of  the   browser  window.   -­‐  Install  CSS  Shape  Editor:     hdps://chrome.google.com/webstore/detail/css-­‐shapes-­‐ editor/nenndldnbcncjmeacmnondmkkfedmgmp  
17. Demo     Alice  in  wonderland   Espresso       W3c  DocumentaLon   DocumentaLon    
18. Thank  You