CSS3 In a Nutshell – New Features, What it Can Do and Resources

CSS3 In a Nutshell – New Features, What it Can Do and Resources

CSS3 In a Nutshell – New Features, What it Can Do and Resources
CSS3 In a Nutshell – New Features, What it Can Do and Resources

CSS3 In a Nutshell – New Features, What it Can Do and Resources.Though, it’s been a while because it was formally launched.

If you happen to didn’t learn the article on HTML5 but, I strongly advise you accomplish that, as CSS3 works higher with the newest markup language from the World Extensive Net Consortium.

CSS2 appeared again in 1998, and since then loads has occurred on the web. Its solely revision was made in 2011, CSS2.1, however specialists within the trade say it was solely a matter of time till CSS3 ought to have been launched, because the options it comes with are fully essential and have been missed throughout the previous years.

What many individuals, didn’t find out about CSS3 was that its improvement began just one 12 months after the submission of its earlier model. So the W3C has been engaged on this improved model since 1999, for greater than 12 years till the primary CSS3 steady model was launched.

Though it feels like there's a large distinction between CSS2 and CSS3 (which is kind of true), all trendy browsers have been fairly fast to undertake the brand new addition to the W3C household. All main browsers help most CSS3 options which might be at present accessible.

As with HTML5, the Consortium nonetheless considers CSS3 to be beneath steady improvement and it is rather unlikely for it to get a remaining model, for a similar causes HTML5 will in all probability not. With the online necessities and the trade basically, altering so quick, coding wants to maneuver ahead on the similar tempo.

CSS3 in a Nutshell and Foremost Variations to CSS2
Possibly the largest distinction between CSS2 and CSS3 is the separation of modules.

Whereas within the earlier model the whole lot was a big single specification defining completely different options, CSS3 is split into a number of paperwork that are known as modules.

Each single module has new capabilities, with out hurting the compatibility of the earlier steady launch. After we discuss modules, we are able to title greater than fifty of them. Nonetheless, 4 of those have been revealed as formal suggestions. The large 4 is comprised of the next:

  • Media Queries (revealed in 2012)
  • Namespaces (revealed in 2011)
  • Selectors Stage 3 (revealed in 2011)
  • Shade (revealed in 2011)

The media queries may properly be an important addition to CSS. What it does is easy: it permits sure situations to be utilized to completely different stylesheets, making web sites fluid and match every kind of display sizes. Media queries enable builders to tailor to completely different resolutions with out having to vary or take away content material.

Media queries work very simply and after you have used them as soon as you might be just about set. Let’s look under at some traces of code.
@media display and (max-width: 600px)

By beginning to fashion within the media question above, you'll solely fashion for screens with a most width of 600 pixels. Within the instance above, all screens with a most width of 600 pixels will present you a white background.

Nonetheless, the max-width will not be the one situation you may apply to a stylesheet. You should utilize max-device-width too (which is the display decision, not like max-width which is the viewing space), you need to use min as a substitute of max, however you may also mix two situations, similar to within the instance under, which is able to solely apply for screens with a viewing space between 600 and 900 pixels.

@media display and (min-width: 600px) and (max-width: 900px)
CSS3 has some pre-defined stylesheets for moveable gadgets, similar to iPhone or iPad, which you'll see under:

As you may see above, the media queries can are available fairly useful when builders must make fluid grids work on completely different gadgets with completely different display sizes.

Another necessary design issues of CSS3 are, for instance, the borders, which now might be made rounded with out hacks. CSS3 has truly launched rounder borders, which is a large assist for designers and builders.

Nonetheless, many of those options don't work in older variations of Web Explorer, however this isn't one thing new for us, we’ve heard it earlier than. The one code you could add within the stylesheet (within the particular class) is one thing much like:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px strong #897048;
As you may see, it's a lot simpler than earlier than.

Gradients are additionally accessible in CSS3, one other cool addition that we've got needed to see for a while, in addition to field/textual content shadows and border photos.

To be able to add textual content shadow to content material with none hacks, CSS3 merely requires one thing much like the next line of code:

text-shadow: 2px 2px 2px #ddccb5;
Creating columns for content material has by no means been simpler than with CSS3, as now you have got 4 traces of code you need to use at any time. These are:

  • column-count
  • column-width
  • column-gap
  • column-rule

One other nice time saver is the choice of inserting a number of backgrounds immediately from CSS, as a substitute of utilizing every kind of hacks as we used to do earlier than. The code is easy to put in writing and to recollect, and I'm certain you'll use it in some unspecified time in the future in time.

top: 100px;
width: 200px;
padding: 20px;
background: url(prime.gif) prime proper no-repeat,
url(backside.gif) prime left repeat-y,
url(center.gif) backside repeat-z;

Vendor prefixes

Again when CSS3 was newly launched, vendor prefixes have been used on a regular basis, as they helped browsers interpret the code. Generally you continue to want to make use of them at present, in case the browser you might be testing in doesn’t learn the code. So under is a brief record of all the seller prefixes for main browsers:

-moz- : Firefox
-webkit- : Webkit browsers similar to Safari and Chrome
-o- : Opera
-ms- : Web Explorer
Be aware that, in keeping with an official press launch from a number of weeks in the past, Opera will quickly construct their new desktop and cellular browser on WebKit too, as a substitute of their present Presto rendering engine. Which means the -o- vendor prefix will disappear in some unspecified time in the future in time, leaving us with solely three main ones.

New pseudo-classes

The arrival of CSS3 brings us a bunch of latest pseudo-classes, together with structural ones, that focus on parts based mostly on their place within the doc and relation to completely different different parts.

:only-child – in case you have got a component within the doc tree that's the solely baby of its mum or dad, it may be focused by this pseudo-class.
:empty – targets parts that don’t have any kids or any textual content, for instance an empty component similar to

:nth-child(n) – it takes benefit of numeric (n) values and targets baby parts in relation to their place inside the mum or dad. To provide you a exact instance, an inventory of weblog feedback would in all probability look extra interesting with alternating background colours – this may be carried out utilizing this pseudo-class.
:first-of-type – this targets the primary of a selected kind of component inside a mum or dad, and is the other of :last-of-type.

:first-child – targets the primary baby component in a mum or dad, no matter its kind. It's the reverse of :last-child.

:not(s) – this one targets parts that aren't matched by the required selector (s).
:root – this one targets the basis component of a doc.
There are extra pseudo-classes added to the brand new CSS3, however as that is mainly an article for inexperienced persons, it's not actually price mentioning them.


There aren't many examples of CSS3 that I can present you, because it often is utilized in collaboration with HTML5 or jQuery. CSS is for styling and enhancement, not for creating functions. Due to this fact there are solely two fascinating hyperlinks I need to share with you.

Rotating A number of Photos

Robotic Animation
The place to be taught?
As I suggested you within the HTML5 article (and even far more now), CSS3 is unimaginable to grasp until you have got prior CSS data. I assume because you’ve learn this text, that you've prior CSS expertise, so that you simply must construct on that.

In any other case, you could take it from the highest. To ease you into the CSS3 studying course of, I'll suggest a number of sources:

  • Sensible CSS3: Growing and Design by Chris Mills
  • CSS3: The Lacking Handbook by David Sawyer McFarland
  • CSS3: Visible QuickStart Information by Jason Cranford Teaque
  • The Ebook of CSS3: A Developer’s Information to the Way forward for Net Design by Peter Gasston


    HTML5 and CSS3 are right here to remain, and together, these two instruments are very highly effective and may create stunning, high-quality options.

    Due to this fact you could be taught them and begin utilizing them at present, in any other case, you'll fall behind your opponents.

    As promised earlier than, I'll begin engaged on placing collectively a number of HTML5/CSS3 tutorials in order that it is possible for you to to be taught much more from 1WD. Nonetheless, till that comes, please ensure you have a minimum of some fundamental data of HTML5 and CSS3, in order that we're all on the identical web page after we begin. See you subsequent time!

    CSS3 In a Nutshell – New Features, What it Can Do and Resources

    CSS3 In a Nutshell – New Features, What it Can Do and Resources

    CSS3 In a Nutshell – New Features, What it Can Do and Resources

    CSS3 In a Nutshell – New Features, What it Can Do and Resources
    CSS3 In a Nutshell – New Features, What it Can Do and Resources

    CSS3 In a Nutshell – New Features, What it Can Do and Resources
    CSS3 In a Nutshell – New Features, What it Can Do and Resources

    CSS3 In a Nutshell – New Features, What it Can Do and Resources