Designing Your Next Generation Web Pages with CSS3
0 likes706 views
This document discusses using CSS3 for designing next generation web pages. It begins with how creating rounded corners previously required images but can now be done with CSS3's border-radius property. It then covers new CSS3 features like transitions, transformations, and animations that can provide visual effects without JavaScript. The document also discusses responsive design approaches like flexible layouts using Flexbox and grids, along with media queries, to adapt designs across devices. Code examples are provided and demos are referenced to illustrate these CSS3 capabilities for modern web page design.
Designing Your Next Generation Web Pages with CSS3
- 1. Designing Your Next Generation Web Pages with CSS3 Gil Fink CEO, sparXys @gilfink, http://www.gilfink.net
- 2. Box of Doom Story • How hard it is to create a box with rounded corners?
- 3. Once Upon a Time… • Creating rounded corners involved: o Constructing the box with images and CSS border property • Left corner image • Right corner image • Usage of border property / Usage of a third border line image o Using a lot of CSS manipulations
- 5. CSS3 to the Rescue border-radius property
- 6. Designing Your Next Generation Web Pages with CSS3 Gil Fink CEO, sparXys @gilfink, http://www.gilfink.net
- 7. Agenda • CSS3: Recap • Transitions, Transformations and Animation • Responsive Design • Q&A • Summary
- 8. CSS3 in a Nutshell • CSS: Cascading Style Sheets o Describe the presentation semantics of HTML web pages o Helps separate a document’s content from its layout and style • Work on CSS3 began after CSS2 entered the recommendation stage in 1999 • CSS3 is divided into modules o Each module add new capabilities or extend features defined in CSS2
- 9. What’s new in CSS3? • Transitions • Transformations • Animations • New layout options • Extended existing properties: o Background o Border • And more
- 10. Transitions • CSS3 support transitions • Use the transition property and element events to apply transitions div { width: 50px; height: 50px; transition: width 2s; /* width change will apply a 2 second transition */ } div:hover { /* hover will trigger the transition */ width: 150px; }
- 11. Transformations • CSS3 supports two and three dimensional element transformations o Use the transform property with transformation function • You can apply transformations such as o Translate o Scale o Rotate o And more #element { transform: rotate(30deg); }
- 12. Animation • CSS3 enables simple animations • Use the @keyframes rule and animation property @keyframes myAnim { 0% { right: 0px; } 25% { right: 25px; background: blue; } 75% { right: 75px; background: red; } 100% { right: 100px; } } div { animation: myAnim 5s linear 5s infinite alternate ; }
- 13. DEMO Transitions, transformations and animations http://desandro.github.io/3dtransforms/exampl es/carousel-02-dynamic.html http://desandro.github.io/3dtransforms/exampl es/cube-02-show-sides.html
- 14. Responsive Design • Optimization approach for UX view over a range of devices o Mobile, desktop, TV, Tablet and etc. o UI depends on the device and its specifics (resolution, DPI and more)
- 15. Ways to Create a Responsive Design • Flexible layouts o Flexbox o Multi columns o Grid layout o Other CSS options • Media queries • And more
- 16. Flexible Layouts • Flexible layouts uses proportional sizes: • How can we do that with CSS3? Sub nav content aside Margins:2% 55%15% 20%
- 17. Multi Columns • Arrange content in columns like in newspapers • Content flows from one column to another div { width: 200px; column-width: 60px; column-count: 3; column-gap: 2em; }
- 18. Flexible Box • Position boxed elements inside a container element • Controls how boxed elements relate to one another o Flow direction, order and alignment o Box sizes in response to container size .container { display: flexbox; flex-direction: row; border: 1px solid black; width: 400px; padding: 10px; }
- 19. DEMO Multi Columns and Flexbox
- 20. Media Queries • Detect media features and respond accordingly • Change the presentation of the content in response to media changes • Consist of a type and zero or more expressions o Types can be screen, projection and resolution o Expressions are the checks that will evaluated
- 21. Coding Media Queries • If a media query expression is evaluated to true, the styles in the query block are applied • Rule of thumb - put media queries at the end of the CSS file .someDiv { width: 250px; height: 250px; } @media only screen and (max-width: 1024px) { .someDiv { width: 150px; height: 200px; } } @media only screen and (max-width: 800px) { .someDiv { width: 120px; height: 180px; } } @media only screen and (max-width: 320px) { .someDiv { width: 80px; height: 120px; } }
- 23. Questions?
- 24. Summary • CSS3 changes the way we can design web pages: o More layout and style options o Options to replace JavaScript animation, transitions and transformations • Make use of CSS3 today!
- 25. Thank You!