CSS3 Pushing the Limits
Stephen Greig
- English
- ePUB (adapté aux mobiles)
- Disponible sur iOS et Android
CSS3 Pushing the Limits
Stephen Greig
Ă propos de ce livre
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!
Foire aux questions
Informations
id
, class
, and descendant
selectors, because thatâs all they needâŠor so they think.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?id
and class
selectors enjoy. Itâs about time they got a little nudge into the spotlight.nav ul {
background: blue;
border: 2px solid red;
}
nav ul ul {
border: none;
background: none;
}
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;
}
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;
}
<h2 class=âimportantâ>Everything below is very important</h2>
<p>This text is very important.</p>
<p>This text is also very important.</p>
h2.important ~ p {
color: red;
}
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.