HTML and CSS Reference
In-Depth Information
I've styled the bars nicely and added a nifty little bit of JavaScript that resizes
the height of the bars and their container to perfectly fill the screen when the
page loads and when the screen is resized, making for an ideal adaptive example.
(There's also a small media query to change the font size when the height gets
small; Chapter 8 covers Media Queries in more detail.)
How did I do this? The markup is again very simple (I've removed some of the
<div> s for brevity; there are seven in all):
<div id=”wrapper” tabindex=”0”>
v >
v >
Now on to the CSS. I first selected the nested <div> s:
div div {
: ;
: ;
: )
p 70%);
box-shadow: inset 0 -10px 25px rgba(0,0,0,0.4);
: ;
: ;
Search WWH ::

Custom Search