A session I delivered in GDG Rashlatz about 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; }
}

22. DEMO
Media Queries

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!