CSS3 Pushing the Limits

Stephen Greig

• Publisher: Wiley
• Year: 2013
• ISBN:
  9781118652619
• Edition: 1
• Topic: Informatik
• Subtopic: Softwareentwicklung

Push CSS3 and your design skills to the limit—and beyond!

Representing an evolutionary leap forward for CSS, CSS3 is chock-full of new capabilities that dramatically expand the boundaries of what a styling language can do. But many of those new features remain undocumented, making it difficult to learn what they are and how to use them to create the sophisticated sites and web apps clients demand and users have grown to expect.

Until now.

This book introduces you to all of CSS3's new and advanced features, and, with the help of dozens of real-world examples and live demos, it shows how to use those features to design dazzling, fully-responsive sites and web apps.

Among other things, you'll learn how to:

• Use advanced selectors and an array of powerful new text tools

• Create adaptable background images, decorative borders, and complex patterns

• Create amazing effects with 2D and 3D transforms, transitions, and keyframe-based animations

• Take advantage of new layout tools to solve an array of advanced layout challenges—fast

• Vastly simplify responsive site design using media queries and new layout modules

• Create abstract and scalable shapes and icons with pseudo-elements

• Leverage preprocessors and use CSS like a programming language within a stylesheet context

Don't pass up this opportunity to go beyond the basics and learn what CSS3 can really do!

Part I

New Toys

Chapter 1 Advanced Selectors

Chapter 2 New Tools for Text

Chapter 3 New Tools for Backgrounds and Borders

Chapter 4 Into the Browser with CSS3 Filters and Blending Modes

Chapter 1

Advanced Selectors

Web designers commonly get into the habit of using only a very small collection of basic CSS selectors, most notably the id, class, and descendant selectors, because that’s all they need…or so they think.

It’s true that you can accomplish almost everything with the class selector, but why compromise your nice, clean markup by adding unnecessary classes when you can choose from a range of more practical and efficient alternatives?

CSS3 has brought with it a whole host of such alternatives, some of which are simply wonderfully convenient and others that can make you excitedly ponder all the possibilities! What? CSS3 selectors are exciting!

In this chapter, you will learn about the different types of selectors, from sibling combinators to nth-child expressions. With the help of practical examples, you’ll be able to understand precisely what they do and how you can put them to use. I’ll finish the chapter by combining many of the various selector types that will be described between now and then to create some truly advanced CSS selectors.

Child and Sibling Selectors

The child and sibling combinators are actually among the more mature features in the Selectors module; however, despite this they’ve had trouble in finding the same kind of mainstream attention as id and class selectors enjoy. It’s about time they got a little nudge into the spotlight.

Child Combinator

Generally speaking, the cascade aspect of CSS is awesome, but sometimes you just don’t need or want it. Have you ever found yourself undoing your own styles in a nested unordered list, for example? This is where the child combinator can help out. Consider this example:

nav ul {

background: blue;

border: 2px solid red;

}

nav ul ul {

border: none;

background: none;

}

If you find that you have to re-declare your styles to fight against the cascade, there is almost definitely a better way of going about the task. As shown in the following snippet, the child combinator allows you to select only the ul that is a direct child of the nav element so that the styles aren’t applied to any nested ul elements:

nav > ul {

background: blue;

border: 2px solid red;

}

Simple stuff, right? Even better, this capability is supported in all major browsers, including Internet Explorer 7!

A few of the selectors discussed in this chapter, including the child combinator, have been around for a while and were actually first defined in the CSS 2.1 selector specification. However, I still see a staggering number of experienced web designers who remain oblivious to their existence, opting to stick with their trusty class and descendant selectors.

Adjacent Sibling Combinator

The adjacent sibling combinator targets the sibling that immediately follows an element. This selector has a number of uses. One common use is when you need to target, for example, the first p element to follow an h1 or an h2 in your body text, as follows:

p {

margin-top: 1.5em;

}

h2 + p {

margin-top: 0;

}

Nice and easy, and a practical solution to targeting elements that could otherwise be really awkward to style, particularly if some of your markup is generated by a content management system.

Major browser support for the adjacent sibling combinator is universal, again including IE7+!

General Sibling Combinator

The general sibling combinator selector is similar to the adjacent sibling combinator, but more [wait for it]…general! Whereas the previous selector targets only the sibling that immediately follows an element, this selector targets any sibling that follows an element.

Consider the following example:

HTML

<h2 class=”important”>Everything below is very important</h2>

<p>This text is very important.</p>

<p>This text is also very important.</p>

CSS

h2.important ~ p {

color: red;

}

This selector targets all p elements that follow an h2 with a class of important, allowing you to apply a text color of red to all paragraphs under that particular heading.

If your first thought regarding this selector is anything like mine was, you probably are thinking “Hmm, pretty cool, but to be honest I can see this sitting at the bottom of the virtual toolbox gathering layers of virtual dust.”

The reality, though, is quite the contrary! In fact, the general sibling combinator will prove to be one of the most vital ingredients in some of the most complex solutions you will read about in this book. Keep an eye out for its return towards the end of this chapter.

The general sibling combinator is much newer than those discussed earlier. Although it is compatible with all major browsers, Internet Explorer supports it only from version 9.

Attribute Selectors

Another method of selecting elements is through HTML attributes, in terms of whether an element has a certain attribute applied to it and/or the value of the attribute.

All the following attribute selectors have full major browser support, including IE7+.

Selecting Based on the Existence of an HTML Attribute

You can use a selector to target only those elements that have a s...