CSS3 for Web Designers, 2nd edition

CSS3 for Web Designers, 2nd edition

English | 2015 | ISBN: 978-1-9375572-0-1 | 153 Pages | PDF, EPUB +video | 31 MB

From advanced selectors to generated content to web fonts, and from gradients, shadows, and rounded corners to elegant animations, CSS3 holds a universe of creative possibilities. No one can better guide you through these galaxies than Dan Cederholm. In this second edition, he tackles new properties and techniques, including micro layouts. Learn what works, how it works, and how to adapt for browsers where it doesn’t.
Many of the CSS3 properties Dan discussed in 2010 now have wider browser support, which means you can feel even more confident putting them to use. In this updated edition, Dan has carefully refreshed code samples, removed old hacks that are no longer necessary, and written a whole new chapter on micro layouts. There’s no better time to dive in to—or polish up—your CSS3 skills.


Vertical centering
Baffling front-end devs for over a decade, the lack of a true vertical centering mechanism in CSS has been an almost laughable omission. I recall several times trying to explain to non-designers that, “no, there’s really no reliable way to do that.” A blank stare of disbelief usually follows. Then, “well just use a <table>.”
Fortunately, flexbox finally solves this! Let’s go through an extremely simple example to demonstrate. FIGURE 7.11shows a lovely purple container, with a box of content that’s centered both horizontally and vertically.
The markup for this little pattern could look something like this:

It’s essentially a container wrapped around a block of heading and paragraph. Simple stuff.
Now let’s add the flexbox magic here to get things centered. In this case, all of our flexbox properties will get applied on the container. I’m going to show the example using only the essential, non-prefixed properties and values for now, and we’ll loop back around to browser compatibility later.

So we have a box that’s 300px tall, and we want to the items within to be centered vertically and horizontally. The first rule we need on this container is display: flex;which tells the browser the contents of this element will be flexible. This enables flexbox on this particular container.
Secondly, align-itemsis a flexbox property that tells the browser how to align the contents of the container along the cross axis (vertical). We’ve set that to centerhere, but other values include flex-start, flex-end, stretch, and baseline. If we’d said align-items: flex-end;, for example, the items in the container would stick to the bottom of the box (FIG 7.12).
Lastly, justify-content: center;ensures the items in the container are centered horizontally.
And folks, that’s it for perfect centering in CSS3 using flexbox. Should the contents or dimensions of the box change, flexbox will keep it centered no matter what (FIG 7.13). As you can imagine, this is especially handy when dealing with flexible layouts on various device screen sizes.