Designing Your Next Generation Web Pages with CSS3
Post on 13-Jul-2015
379 Views
Preview:
Transcript
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!
top related