The CSS3 Anthology: Take Your Sites to New Heights
Language: English
Pages: 400
ISBN: 0987153021
Format: PDF / Kindle (mobi) / ePub
The CSS Anthology: 101 Essential Tips, Tricks & Hacks is a compilation of best-practice solutions to the most challenging CSS problems. The fourth edition of this best-selling book has been completely revised and updated to cover newer techniques enabled by CSS3 and HTML5, and more recent trends in web design, such as responsive design.
It is the most complete question-and-answer book on CSS available, with over 100 tutorials that show readers how to gain more control over the appearance of their web pages, create sophisticated web page navigation controls, and design for alternative browsing devices, including phones and screen readers.
The CSS code used to create each of the components is available for download and guaranteed to be simple, efficient and cross-browser compatible.
Learning HTML5 by Creating Fun Games
Web Design: Best Portfolios (Icons)
Responsive Web Design by Example
Hello Web App: Learn How to Build a Web App
the same selector; for example, .message in your stylesheet. It will be the second instance of the rule that 4 http://reference.sitepoint.com/css/specificity 21 Download from Wow! eBook
opacity in our designs just using CSS. Solution I’m going to demonstrate two possible ways to make an element transparent. The first is to use the opacity property. This takes a value of between 0 and 1, where 0 is fully transparent and 1 is fully opaque: Images and Other Design Elements chapter_03/opacity.css (excerpt) h1 { width: 40%; padding: 0.6em 0.6em 0.6em 2em; margin: 40px 0 0 0; font-size: 127.6%; background-color: #fff; color: #000; opacity: 0.5; } .content { width: 60%; padding:
rgb(49,52,61); padding: 0.5em 0.5em 0.5em 1em; display: block; text-decoration: none; border-left: 5px solid rgb(239,213,252); } .nav ul li a:hover { Navigation background-color: rgb(255,255,255); color: rgb(49,52,61); border-left: 5px solid rgb(250,136,234); } All I’ve done here is change the colors and padding on the links within our nested li to create a pleasing effect; I also added some different rules for the hover state of these subitems. Remember that here you’re overwriting the
background-repeat: no-repeat; background-image: url(sprite-roll.png); text-decoration: none; color: rgb(136,136,136); } If you look at the list now in Figure 4.19, I can see the sprite showing the same image for all items. Figure 4.19. After adding the background image 155 156 The CSS3 Anthology We can now start to shift the background image into place to show the initial images (the gray icon). The first link is almost correct; I just want to tweak the position of the bird a little:
range of navigation styles, while using many CSS properties and techniques. As you can see, even the most complicated-looking menu can be broken down into some fairly simple techniques. For navigation inspiration, I’d recommend checking out the Navigation collection on the Pattern Tap website.6 With a solid knowledge of CSS and your own design skills, you should be able to create navigation that’s both attractive and usable with CSS. 5 6 http://users.tpg.com.au/j_birch/plugins/superfish/#options