HTML and CSS Reference
In-Depth Information
Figure 10-36. The dConstrict 2012 website uses media queries to adapt the content to different viewport sizes
And Even Further…
We've just barely scratched the surface of CSS3 in this chapter, and we couldn't even go into depth on
every last detail of what we did cover. This topic is long enough as it is. But we hope we've given you
enough of a taste to set you on your way so you can explore more of the latest innovations CSS is bringing
to the table. Here are a few more topics you might like to look into:
Transitions - Animate changes to CSS properties, such as fading a color or expanding a box
( )
Transforms - Reshape, resize, rotate, and distort elements on the page (
transforms/ )
3D transforms - Shift and distort elements in 3-dimensional space (
transforms/ )
Animation - Create motion in timed sequences ( )
Border images - Use tiling images to draw decorative borders (
background/#the-border-image )
calc() - A function to dynamically calculate the size and shape of objects on the page, used
wherever a length value would appear, for example width:calc(100% - 40px)
( )
Flexible box layout - Position elements in flexible, expanding stacks (
flexbox/ )
Grid layout - Define a grid layout in columns and rows ( )
Search WWH ::

Custom Search