Designing Your Next Generation Web Pages with CSS3

Designing Your Next Generation Web Pages with

CSS3

Gil Fink

CEO, sparXys

@gilfink, http://www.gilfink.net

Box of Doom Story • How hard it is to create a box with rounded

corners?

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

CSS3 to the Rescue border-radius property

Designing Your Next Generation Web Pages with

CSS3

Gil Fink

CEO, sparXys

@gilfink, http://www.gilfink.net

Agenda • CSS3: Recap

• Transitions, Transformations and Animation

• Responsive Design

• Q&A

• Summary

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

What’s new in CSS3? • Transitions

• Transformations

• Animations

• New layout options

• Extended existing properties: o Background

o Border

• And more

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; }

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); }

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 ; }

DEMO Transitions, transformations and animations

http://desandro.github.io/3dtransforms/examples/carousel-02-dynamic.html

http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

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)

Ways to Create a Responsive Design

• Flexible layouts o Flexbox

o Multi columns

o Grid layout

o Other CSS options

• Media queries

• And more

Flexible Layouts • Flexible layouts uses proportional sizes:

• How can we do that with CSS3?

Sub nav

content aside

Margins:2%

55% 15% 20%

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; }

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; }

DEMO

Multi Columns and Flexbox

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

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; } }

DEMO

Media Queries

Questions?

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!

Thank You!