Information Technology Reference
In-Depth Information
Our
h2
tag is going to be the lucky recipient of our
text-shadow
. If you look in the HTML
markup for this application, you can see that this
h2
tag houses a blurb of text that will
be presented to the user. Depending on the current state of the game, the text will
change up to four times and will be updated by the application'sJavaScript. As
previouslymentioned, if we were doing this the old way, we would have had to create
four separate images containing the text we wanted and either manually inject those
images into the page when needed or assign them as background images to CSS
classes to be assigned to our blurb container as needed. While that would not have
been hard to do, it would have required more code to be written as well as more
graphical resources to be loaded on the device, which if the user is in an area with a
slow data connection, can cause a noticeable moment of lag or cause the user to
become emotionally disconnected fromyour app!
In Listing 3-3, we're going to set up the list items:
Listing 3-3.
CSS for I Love Ham- Part 2
/*** SECTION ***/
section {
margin:20px 10px;
padding:10px;
}
sectionul {
width:100%;
margin:25px 0;
}
section li {
margin:10px 0;
padding:10px 5px 10px;
min-height:22px;
line-height:32px;
border-radius:7px;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#a1a1a1), to(#A1A1A1), color-
stop(.6,#8A8A8A));
-webkit- box-shadow:0 0 20px rgba(0,0,0,0.5);
box-shadow:2px 2px 10px rgba(0,0,0,0.8);
}
You will also notice we are doing something a little different with the List Items in our
CSS as well. Here, we are adding a nice gradient background to the buttons to give
them a little more oomph. Unlike the previous gradient backgrounds we created in our
first application, this one is using a three color gradient system to give it more of a
beveled effect. Also, just like our
text-shadows
, using CSS helps cut back on wasting
our client's resources, for example loading images that we do not use. I know I'm really
hammering that point home, but that's because it is a truly important rule to follow!
Never carelessly waste your client's resources, especially when living in the current
world of outlandish data caps or slow data connections. Last but not least in our CSS
file (See Listing 3-4), I am going to introduce you to two very handy CSS selectors to
familiarize yourself with—the :
beforeand :afterselectors
.
