Six Revisions » CSS

Basic CSS3 Techniques That You Should Know

Jacob Gube — Tue, 16 Mar 2010 13:21:09 +0000

After 13 years of being a vital part of web designs, Cascading Style Sheets (CSS) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.

We’ll be looking at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment!

This is a follow-up of a previous article called CSS3 Techniques You Should Know which you should also check out.

Multiple Backgrounds

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Selectors

CSS3 selectors allow you to select elements to apply style properties with greater specificity, giving you opportunities to select complex groups of elements. The new selectors not only save you time, but also help you keep your HTML markup to a minimum. You’ll inevitably reduce the number of classes and IDs you’ll need, allowing you to become a bit more organized with your stylesheet.

The general sibling combinator

There is a new kind of combinator that is being introduced in CSS3, the general sibling selector. This selector targets all of the siblings of a particular element. For example, if you wanted to target paragraphs in the same hierarchy as your level-1 headings, you would do:

h1~p {
  color: red;
}

The selector above will match the first p element below (giving it a red color), but not the second p element, because it is not on the same level (e.g. not a sibling) as the h1 element.

Heading

This paragraph is a match

This paragraph is not a match

New pseudo-classes for greater specificity without scripting

New pseudo-classes introduced in CSS3 specifications allow you to select a group of elements that, before, would’ve required DOM selection using a scripting language such as JavaScript, or additional classes/ID’s.

Here are some new pseudo-classes:

:last-child selects only the last child element.
:nth-child(n) selects the n^th child, useful for zebra-striping tables.
:not(e) selects everything except e.

SitePoint has a complete list of CSS3 psuedo-classes.

Resizing Elements

With CSS3, you can now resize your elements using the resize property. Nice right? The catch: it only works in Safari right now. The following code block makes it possible to have a tiny triangle appear in the bottom right corner of an element that you can then drag to resize.

div {
  resize: both;
}

Better Fonts

The most commonly used fonts on the web are Arial, Helvetica, Verdana and Georgia because most computers have them preinstalled. With CSS3, you can break away from these fonts and use various types of fonts as long as it can be called from an internet-enabled location. When you call on your font, it will be displayed anywhere on the site. Because of copyright issues, you have to make sure that you can use the font before using the @font-face feature.

In the following example, the @font-face feature declares the name of the font family (you can name it anything you want) and the location of the font file (in this case a TrueType font file). Once it’s declared, you can use the font-family property to set the font of an element.

@font-face {
  font-family: SketchRockwell;
  src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
  font-family: SketchRockwell;
  font-size: 3.2em;
  letter-spacing: 1px;
  text-align: center;
}

Text Shadows

The text-shadow property allows you to add a dropshadow underneath HTML text elements. You should always make sure your text is readable in case the user’s browser doesn’t support advanced CSS3 properties.

In the following example, we apply a dark blue (#003471) text-shadow that’s 2px to the right and 5px to the bottom of the text and with a blur of radius of 2px, to all h1 elements.

h1 {
  text-shadow: #003471 2px 5px 2px;
}

Preview of text shadow CSS3 property in Firefox 3.5.5.

Rounded Corners

Creating rounded corners can be a bit of a task. However, with CSS3, it can be a breeze when using a new property called border-radius. This property sets the curvature for every corner of the box.

For example, the below code will produce 10px-rounded corners for divs:

div {
  border: 2px solid #434343;
  padding: 10px;
  background: #e3e3e3;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  width: 500px;
}

In the above code, -moz is for Firefox and -webkit is for Safari and Chrome.

Rounded corners in Firefox 3.5.5.

Summary

CSS3 gives us better control over our HTML elements, opening up possibilities of creating complex and flexible designs that have a reduced reliance on static graphics and scripting. We talked about some basic stuff that works in most modern web browsers (except IE8). To learn more about CSS3, check out the W3C CSS3 Current Work page and see CSS3 .Info for the latest news about the newest version of CSS.

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.

CSS3 Techniques You Should Know

Jacob Gube — Fri, 05 Feb 2010 13:47:05 +0000

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

Mozilla/Firefox/Gecko: -moz-
Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

A Note About Demos on This Page

The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.

Drop Shadows

The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;