Recap: 10 Advanced CSS Techniques

November 19, 2011 Samantha Metheny

For our November 2 event, Emily Lewis and Jason Nakai discussed examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones). If you were unable to attend or need a refresher, we've got you covered:

Recap

10 Advanced (and Awesome) CSS Techniques:

  1. Text Shadows
  2. Box Shadows
  3. Generated Content
  4. Attribute Selectors
  5. Gradients
  6. Multiple Background Images
  7. Transitions
  8. Transforms
  9. Media Queries
  10. Feature Detection

1. Text Shadows

CSS property which casts drop shadows on text.
Or, it can be used as a glow
Or, it can also be more artistic, like a "relief" effect.

h3 { text-shadow: 1px 1px 2px #000;}

You can get crazy with it. Multiple effects are comma-separated and are applied front to back, with the first shadow on the top of the stack.

A super cool site for testing this: "mother effing text shadow" The site generates for you the text shadow dynamically on the screen.

Check Emily and Jason's SlideShare of their presentation for some really great resources on each of these advanced CSS techniques!

2. Box Shadows

Casts shadow effects on block-level elements

div { box-shadow: inset 2px 2px 3px 1px #666;}

Requires some vendor prefixes:
-moz-box-shadow: 2px 3px 3px #666;
-webkit-box-shadow: 2px 3px 3px #666;
box-shadow: 3px 3px 3px #666;

If you don't feel like writing all of your vendor prefixes, you can use the "prefix-free" auto-generator at Prefix-Free.

You can do really fancy effects by including multiple syntaxes.

Again, many tools and resources are available on the Web. Check the SlideShare link (above) for more details.

3. Generated Content

Using the :before and :after pseudo elements, you can insert content before and after the specified element. Use these to insert:

a:after {content:" \00a0\00bb";}

The content property contains the content to appear before or after the element. For text strings, contain the values in quotes. If you want to use a special character, make sure it is properly encoded.

li:hover:before {
content:url(arrow.png);
position:absolute;
top:-17px;
left:0;}

:before and :after can also be combined with pseudo-classs like :hover. See the SlideShare link for more details.

4. Attribute Selectors

Allows you to select and element based on its attributes.
It's really useful if you're a fan of putting icons in front of different types of files to be downloaded (PDFs, etc.)

a[href$="zip"]{...;}

input[type="submit"][value="Search"]{...;}

5. Gradients

Gradients allow smooth transitions between two or more colors. Using gradients can reduce the need for background images.

Browsers render gradients as images. so where you need to use an image, you can actually use gradients.

div {background-image:linear-gradient(-90deg, #fff 0%, #ccc 100%); }

div{background-image:radial-gradient(center, ellipse cover, #ff0 0%, #0f0 100%); }

Vendor prefixes are required:

-moz-linear-gradient
-o-linear-gradient
-webkit-linear-gradient
-moz-radial-gradient
-webkit-radial-gradient

To write your vendor prefixes, use a dynamic cross-browser css3 generator (even includes older syntaxes and prefixes) like the one at css3please.com

Or, you can try Colorzilla.com

You may also want to check out Lea Verou's CSS3 Patterns

Don't forget, there are many more resources at the SlideShare link.

6. Multiple Background Images

CSS3 allows you to specify more than one background image for an element.

article {
background:
url(curtainTop.png) 0 0 no-repeat,
url(curtainBottom.png) 0 100% no-repeat,
#000;
}

Note: For IE and other browsers that don't support multiple background images, you'll need to declare the background TWICE. (see above.)

7. Transitions

Enables smooth animations of css property changes over a specific amount of time.

div {transition: all .5x linear .2s;}

Vendor prefixes are required:

-moz-transition: all .5s linear .2s;
-o-transition: all .5s linear .2s;
-webkit-transition: all .5s linear .2s;
transition: all .5s linear .2s;

See the SlideShare for other tools and resources, but be sure to also check out the very cool cubic-bezier.com!

8. Transforms

Transform enables modifications to coordinate-based CSS properties:

h3 {transform: rotate(45deg);}

h3 {transform: translate(25px, 10px);}

Again, vendor prefixes are required with transforms:

-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

9. Media Queries

Media queries deliver styles based on the user's display:

@media screen and (max-width: 650px) {body {background: #f90;}
}

Nest resolution-specific styles within the @media query.

Media options include: all, handheld, projection, screen, tv.

Properties and values establish the conditions for rendering styles.

Make sure to use responsive design techniques when using media queries.

Tools and resources are listed at the SlideShare link.

10. Feature Detection

Modernizr (best bet)

jQuery.support (if you really want to)

Rolling your own (not suggested)

Browser sniffing (outdated)

Remember, LOTS of tools and resources are available at the SlideShare!

Rate Our Speakers

If you attended the event and have not yet rated our speakers, please head over to SpeakerRate and let Emily Lewis and Jason Nakai know you what thought.

Your input and feedback are essential for helping Webuquerque provide the best content possible. Be sure to tell us what you thought!

Video

Video of the presentation is available on Vimeo:

Slide Deck

The slide deck is available on SlideShare:

Photos

Photos are available on Flickr:

Thanks to All Our Volunteers!

Webuquerque just wouldn't be the same without helping hands from our community members:

Want to help? Let us know if you'd like to lend a hand. Interested in speaking? Let us know that too!

Stay Tuned for Our Next Event!

For our December 7 event, we are hosting another "Strictly Social" event, holiday style:

Let Us Know What You Think

As always, we want to know what's on your mind so we can do the best to ensure Webuquerque is all you want it to be. Make sure to let us know if you have any suggestions, comments or complaints.