Cool CSS3 Features


index
Disabled back button Next Section
printable version
Section 1: Overview

CSS3 has introduced various improved features to further enhance the presentation of content on a website.

There is no doubt that CSS3 brings with it many interesting functions that allow designers to fuel their creativity and create novel designs.

Even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced.

Recall that many of these new features can be seen at CSS3 Click Chart.

Most of the notes in this section were derived from HTML5 & CSS3 for the Real World by Goldstein, Lazaris, and Weyl.

Section 2: Colors

Prior to CSS3, we almost always declared colors using the hexadecimal format (#FFF, or #FFFFFF for white).

It was also possible to declare colors using the rgb() notation, providing either integers (0–255) or percentages.

  • For example, white is rgb(255,255,255) or rgb(100%,100%,100%).

In addition, we had access to a few named colors, like purple, lime, aqua, red, and the like.

While the color keyword list has been extended in the CSS3 color module to include 147 additional keyword colors (that are generally well supported), CSS3 also provides us with a number of other options: HSL, HSLA, and RGBA.

  • The most notable change with these new color types is the ability to declare semitransparent colors.

RGBA

RGBA works just like RGB, except that it adds a fourth value: alpha, the opacity level.

  • The first three values still represent red, green, and blue.
  • For the alpha value, 1 means fully opaque, 0 is fully transparent, and 0.5 is 50% opaque.
  • You can use any number between 0 and 1, inclusively.

Unlike RGB, which can also be represented with hexadecimal notation as #RRGGBB, there is no hexadecimal notation for RGBA.

The following div has an RGBA color of 205,102,0,0.8 — in other words, solid dark orange that's 20% transparent:

Here is the CSS:

background: rgba(205,102,0,0.8) url(figures/bg-form.png) no-repeat bottom center;

Since Internet Explorer 8 and below lack support for RGBA, if you declare an RGBA color, make sure you precede it with a color IE can understand.

  • IE will render the last color it can make sense of, so it will just skip the RGBA color.
  • Modern browsers will understand both colors, but thanks to the CSS cascade, they'll overwrite the IE color with the RGBA color as it comes later.

HSL and HSLA

HSL stands for hue, saturation, and lightness.

  • Unlike RGB, where you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation, or the lightness, while keeping the same base hue.
  • The syntax for HSL comprises integer for hue, and percentage values for saturation and lightness.

Although monitors display colors as RGB, the browser simply converts the HSL value you give it into one the monitor can display.

The hsl() declaration accepts three values:

  • The hue, in degrees from 0 to 359. Some examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use everything in between.
  • The saturation, as a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray — essentially causing the hue value to be ignored.
  • A percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.

HSL also allows for an opacity value. For example, hsla(300, 100%, 50%, 0.5) is magenta with full saturation and normal lightness, which is 50% opaque.

HSL mimics the way the human eye perceives color, so it can be more intuitive for designers to understand — and, as mentioned above, it can make adjustments a bit quicker and easier.

  • Use whatever syntax you're most comfortable with — but remember that if you need to support IE8 or below, you'll generally want to limit yourself to hexadecimal notation.

Let's sum up with a review of all the ways to write colors in CSS. A shade of dark red can be written as:

  • #800000
  • maroon
  • rgb(128,0,0)
  • rgba(128,0,0,1.0)
  • hsl(0,100%,13%)
  • hsla(0,100%,13%,1.0)

Opacity

In addition to specifying transparency with HSLA and RGBA colors, CSS3 also provides us with the opacity property.

  • The opacity property sets the opaqueness of the element on which it's declared.
  • Similar to alpha transparency, the opacity value is a floating point number between (and including) 0 and 1.
  • An opacity value of 0 defines the element as fully transparent, whereas an opacity value of 1 means the element is fully opaque.

Let's look at an example:

div.halfopaque
{
background-color: rgb(0, 0, 0);
opacity: 0.5;
color: #000000;
}

div.halfalpha
{
background-color: rgba(0, 0, 0, 0.5);
color: #000000;
}

While the two declaration blocks above may seem to be identical at first glance, there's actually a key difference.

  • While opacity sets the opacity value for an element and all of its children, a semitransparent RGBA or HSLA color has no impact on elements other than the one it's declared on.

Looking at the example above, any text in the halfopaque div will also be 50% opaque (most likely making it difficult to read!); the text on the halfalpha div, though, will still be 100% opaque.

So, while the opacity property is a quick and easy solution for creating semitransparent elements, you should be aware of this consequence.

Section 3: Rounded Corners

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend.

CSS3 provides the border-radius property, which offers a clean and easy way of adding rounded corners to any or all four corners of an element on a page, and even works with elements with a background image.

Safari, Chrome, Opera, IE9, and Firefox 4 support rounded corners without a vendor prefix (just border-radius).

Here is an example of a link with rounded corners, using the CSS border-radius: 25px;:

<HTML5> & {CSS3}

The code for the button looks like:

a#rounded
{
display: block;
text-decoration: none;
border: 5px double;
border-radius: 25px;
color: #ffffff;
background-color: #484848;
text-align: center;
font-size: 28px;
margin: 5px 5px 9px 5px;
padding: 15px 0;
position: relative;
width:244px;
}

<a id="rounded" href="#">&lt;HTML5&gt; &amp; {CSS3}</a>

Older browsers require the vendor-prefixed properties.

  • Firefox 3.6 and earlier requires the -moz-border-radius property to control the corner radius of a border.
  • Older versions of Safari required the -webkit-border-radius or -khtml-border-radius properties.
  • When including prefixed properties, always follow with the correctly written, nonprefixed, standards-compliant syntax to ensure that your site is forward compatible!

.rounded-corners
{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* universal */
}

(Note about webkit)

The border-radius property is actually a shorthand.

  • For our a element, the corners are all the same size and symmetrical.
  • If we had wanted different-sized corners, we could declare up to four unique values—border-radius: 5px 10px 15px 20px;, for example.
  • Just like padding, margin, and border, you can adjust each value individually:

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 40px;

<a id="off_kilter" href="#">&lt;HTML5&gt; &amp; {CSS3}</a>

<HTML5> & {CSS3}

When using the shorthand border-radius, the order of the corners is top-left, top-right, bottom-right, and bottom-left.

You can also declare only two values, in which case the first is for top-left and bottom-right, and the second is for top-right and bottom-left.

If you declare three values, the first refers to top-left, the second sets both the top-right and bottom-left, and the third is bottom-right.

Section 4: Drop Shadows

CSS3 provides the ability to add drop shadows to elements using the box-shadow property.

  • This property lets you specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements.

We usually think of drop shadows as an effect that makes an element look like it's "hovering" over the page and leaving a shadow; however, with such fine-grained control over all those variables, you can be quite creative.

The following example uses a box-shadow with no blur to create the appearance of a 3D box:

<HTML5> & {CSS3}

In order to achieve this effect, the following line was added to the CSS that we saw on the previous page.

box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

The box-shadow property takes a comma-separated list of shadows as its value.

  • Each shadow is defined by two to four size values, a color, and the key term inset for inset—or internal—shadows.
  • If you fail to specify inset, the default is for the shadow to be drawn outside of the element.

Let's examine the above property-value pair in detail. Here it is again:

box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

  • The first value is the horizontal offset. A positive value will create a shadow to the right of the element, a negative value to the left. In our case, our shadow is two pixels to the right of the a.
  • The second value is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up. In our case, the shadow is five pixels below the a.
  • The third value, if included, is the blur distance of the shadow. The greater the value, the more the shadow is blurred. Only positive values are allowed. Our shadow is not blurred, so we can either include a value of zero (0), or omit the value altogether.
  • The fourth value determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow. Our shadow has no spread, so again we can either include a value of zero (0), or omit the value altogether.
  • The fifth value above is the color. You will generally want to declare the color of the shadow. If it's omitted, the spec states that it should default to the same as the color property of the element. Opera and Firefox support this default behavior, but WebKit doesn't, so be sure to include the color. In the example above, we used an RGBA color. In this particular design, the shadow is a solid color, so we could just have used the hex value. Most of the time, though, shadows will be partially transparent, so you'll be using RGBA or HSLA, usually.

By default, the shadow is a drop shadow—occurring on the outside of the box. You can create an inset shadow by adding the word inset to the start of your shadow declaration.

To include more than one box shadow on an element, define a comma-separated list of shadows.

  • When more than one shadow is specified, the shadows are layered front to back, as if the browser drew the last shadow first, and the previous shadow on top of that.
  • In addition, the shadow follows the edges of your element, rather than the pixels of your content. If you try to use drop shadows on semitransparent images, the shadow follows the rectangular borders of the image instead of the contour of the image's content.

Like an element's outline, box shadows are supposed to be invisible in terms of the box model.

  • They should have no impact on the layout of a page – they'll overlap other boxes and their shadows if necessary, but you may notice some bugs in some of the browsers.
Section 5: Text Shadow

Where box-shadow lets us add shadows to boxes, text-shadow adds shadows to individual characters in text nodes.

  • Added in CSS2, text-shadow is supported in all current browser releases except – wait for it – IE9.

The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; the exceptions are that there's no spread, and inset shadows aren’t permitted.

The Shadow knows!

The CSS looks like this:

text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);

The general format is

text-shadow: topOffset leftOffset blurRadius color;

The example above has a semi-opaque shadow to the bottom right.

  • The shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity.
Section 6: Gradients

Gradients are smooth transitions between two or more specified colors.

  • In creating gradients, you can specify multiple in-between color values, called color stops.
  • Each color stop is made up of a color and a position; the browser fades the color from each stop to the next to create a smooth gradient.
  • Gradients can be utilized anywhere a background image can be used.
  • We saw an example that used gradients in an earlier demo page.

CSS3 provides us with the ability to create native radial and linear gradients.

  • Browser support for gradients and multiple backgrounds is still evolving.
  • Gradients no longer require the use of additional images.

Linear Gradients

Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis.

Here is an example:

Linear Gradient

To create a linear gradient you specify a direction, the starting color, the end color, and any color stops you want to add along that line.

  • The browser takes care of the rest, filling the entire element by painting lines of color perpendicular to the line of the gradient.
  • It produces a smooth fade from one color to the next, progressing in the direction you specify.

When it comes to browsers and linear gradients, things are unsettled.

  • WebKit first introduced gradients several years ago using a particular and, many argued, convoluted syntax.
  • Mozilla implemented gradients using a simpler and more straightforward syntax.
  • In January of 2011, the W3C included a proposed syntax in CSS3 that is very similar to Firefox's existing implementation.
  • The W3C syntax has also been adopted by WebKit, though at the time of writing it's still being implemented and yet to make its way into Chrome and Safari; they are still using the old-style syntax.
  • All the current implementations use vendor prefixes (-webkit-, -moz-, and -o-).

The code for the above example appears below:

#gradient1
{
background-image: -moz-linear-gradient(bottom, #FFF, #CD6600); /* FF3.6 */
background-image: -ms-linear-gradient(bottom, #FFF, #CD6600); /* IE10+ */
background-image: -o-linear-gradient(bottom, #FFF, #CD6600); /* Opera 11.1+ */
background-image: -webkit-linear-gradient(bottom, #FFF, #CD6600); /* Safari 5.1+, Chrome 10+ */
background-image: linear-gradient(bottom, #ffffff, #CD6600); /* standard */
}

Inside those parentheses, you specify the direction of the gradient, and then provide some color stops.

  • For the direction, you can provide either the angle along which the gradient should proceed, or the side or corner from which it should start—in which case it will proceed towards the opposite side or corner.
  • For angles, you use values in degrees (deg). 0deg points to the right, 90deg is up, and so on counterclockwise.
  • For a side or corner, use the top, bottom, left, and right keywords.
  • After specifying the direction, provide your color stops; these are made up of a color and a percentage or length specifying how far along the gradient that stop is located.

See The New (and hopefully final) Linear Gradient Syntax for more details and examples.

Radial Gradients

Radial gradients are circular or elliptical gradients.

  • Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.
  • Radial gradients are supported in WebKit and Mozilla (beginning with Firefox 3.6).

Let’s start with a simple circular gradient to illustrate the standard syntax:

background-image: -moz-radial-gradient(#FFF, #000);
background-image: -moz-radial-gradient(center, #FFF, #000);
background-image: -moz-radial-gradient(center, ellipse cover, #FFF, #000);

The above three declarations are functionally identical, and will all result in the gradient shown below.

  • At the minimum, you need to provide a start color and an end color.
  • You can also provide a position for the center of the gradient as the first parameter, and a shape and size as the second parameter.

Radial Gradient

For more details about radial gradients, see CSS3 Radial Gradient Syntax Breakdown.

Section 7: Other Cool Stuff

There is a host of additional cool things that you can do in CSS, but we're running out of time. Here are a few you might be interested in: