-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
Each button must have its own symbol on it. To obtain this result, we can use an HTML5 data-* attribute, such as data-symbol. HTML5 considers all data-* attributes valid and free for developers to be used to hold some application-specific information, such as in this case. We can then insert the value of the custom attribute inside the push button using the content property. Let's see how, but first we need to update our <a> elements. So let's edit index.html:
<a href="#" class="punch" data-symbol="!">PUNCH</a> <a href="#" class="jump" data-symbol="★">JUMP</a>
To type the Black star (★) (Unicode character: U+2605), we can do a copy and paste from http://www.fileformat.info/info/unicode/char/2605/index.htm, or we can use the character map included in Windows.
Next, we need to add proper instructions to application.css:
/* text */
#arcade_game a:before{
font-family: 'Chango', cursive;
text-align: center;
color: rgba(255,255,255, 0.4);
text...
Change the font size
Change margin width
Change background colour