Information Technology Reference
In-Depth Information
}
.score {
float:right;
margin-right:10px;
}
The HEADER section of the CSS is where we will have a little fun and utilize some of the
magic of CSS3. Before the widespread use of CSS3, if you wanted to create a section of
your page that made use of a gradient background, then you would have to rely on
creating images in a graphics design program and splice them to suite your needs. Now,
just like magic, you can add some not-as-simple-as-it-should-be code to your CSS to
create the same gradient effects you would get with Photoshop with just a few lines of
code. On top of those new nifty gradients, we can also add in a drop shadow to our
header
with only one tiny little line of CSS code. It's like magic!
Listing 2-4 could be considered the entree of our CSS file in that it contains a majority of
the properties that will be used to make our page look awesome.
Listing 2-4.
Who's That Tweet? CSS File, Part 3
/*** SECTION ***/
section {
margin:20px 10px;
padding:10px;
border-radius:7px;
background:#aaa;
-webkit- box-shadow:0 0 20px rgba(0,0,0,0.5);
box-shadow:0 0 20px rgba(0,0,0,0.5);
}
section.fail {
background:#990000;
color:#fff;
}
section.win {
background:#009900;
color:#fff;
}
section.fail li, section.win li {
border-bottom:1px solid #fff;
}
section.fail li:first-child, section.win li:first-child {
border-top: 2px groove #fff;
}
section #tweet {
width:100%;
margin-bottom:10px;
padding-bottom:10px;
}
section .avatar {
float:left;
width:48px;
height:48px;
}
section .content {
margin-left:58px;
min-height:48px;
