Download to read offline
Uploaded byGil Fink
Designing Your Next Generation Web Pages with CSS3
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.
More Related Content
Similar to Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3
- 1. Designing Your Next GenerationWeb Pages with CSS3 Gil Fink CEO, sparXys @gilfink, http://www.gilfink.net
- 2. Box of DoomStory • How hard it is to create a box with rounded corners?
- 3. Once Upon aTime… • 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 theRescue border-radius property
- 6. Designing Your Next GenerationWeb 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 aNutshell • 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 inCSS3? • Transitions • Transformations • Animations • New layout options • Extended existing properties: o Background o Border • And more
- 10. Transitions • CSS3 supporttransitions • 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 supportstwo 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 enablessimple 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 andanimations 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 • Optimizationapproach 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 Createa Responsive Design • Flexible layouts o Flexbox o Multi columns o Grid layout o Other CSS options • Media queries • And more
- 16. Flexible Layouts • Flexiblelayouts uses proportional sizes: • How can we do that with CSS3? Sub nav content aside Margins:2% 55%15% 20%
- 17. Multi Columns • Arrangecontent 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 • Positionboxed 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 andFlexbox
- 20. Media Queries • Detectmedia 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; } }
- 22.
- 23.
- 24. Summary • CSS3 changesthe 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.