Amazing CSS3 Techniques You Can’t live Without

Posted in Coding, Coding, HTML & CSS, Tutorials4 years ago • Written by 28 Comments

CSS3, along with HTML5, is quickly shaping up to be one of the most exciting and useful Web technologies in years. In this article, I will be explaining some of the new graphics-rich techniques and properties available with CSS3. You will learn what is likely to be approved as part of the final spec, what is still a work-in-progress, and how to deal with cross-browser incompatibilities and lack of support in older browsers. Ready? Here we go.

Introduction to CSS3

CSS3 is a collection of modules that extend the previous CSS2 specification that we all know and love. Most of the graphics effects discussed in this article come from the Backgrounds & Borders module. There are a number of other additions in CSS3, some of which are more layout-focused, others enable ways of dealing with content styling that previously required server-side HTML generation or JavaScript.

The important thing to remember is that CSS3 is still a work-in-progress, so just because some of the latest browsers support these features doesn’t mean that (a) you should expect all browsers to support these features soon, and that (b) you won’t have to change how you do things later on once CSS3 becomes a full fledged standard.

What Used to Require Images No Longer Does

The annoying problem of having to save out dozens of special image slices just to create a nice button or box style is solved with CSS3. Using several new properties, many of the common graphical effects we designers like to employ on a regular basis are easy to create right in the code. These include (click each image for demo & source code):

Shadows


Recently, designers were just starting to get used to the fact that you can easily add shadows behind text. Internet Explorer doesn’t yet support the text-shadow property, but Safari and Firefox have for some time. But what’s really exciting is now you can add drop-shadows to boxes and controls using the box-shadow property. The syntax for box-shadow is much the same as text-shadow, which we describe below.

Gradients


Wow! That is all done with CSS, no images required. Just so you realize how fast things are developing, CSS3 doesn’t actually specify a standard syntax for gradients yet, so currently there is one syntax used by WebKit (Safari, Chrome, etc.) and another used by Gecko (Firefox). We will explore both approaches in this article.

Borders with Rounded Corners


CSS has allowed several different border styles (double, inset, dotted, etc.) for some time, but now with CSS3 we have the ability to add a border radius to some or all corners. Yes, rounded corners are now possible without resorting to crazy JavaScript hacks or images! Another part of the CSS3 specification is border images, which is also interesting. It’s a rather complicated technique all by itself, so I will save that discussion for another time. You can read more about the spec at the W3C.

How to Style Boxes

A good mindset to employ when using the latest CSS3 techniques is first to find an acceptable baseline style that is supported by incompatible browsers. We’ll cover some thoughts about older browsers or IE support later in this article, but the idea here is to style a box or page element without using shadows, rounded corners, gradients, etc. and see if you are reasonably happy with the result. If it looks decent, then you can go ahead and add all the nice eye candy with the knowledge that if someone is using a browser without the necessary CSS3 support, they’ll still have a reasonable experience.

For today’s example, we’re going to through three stages to add in our special styles.

Start with the Baseline

.styledbox {
background-color: #fed;
border-top: solid 1px white;
border-bottom: solid 1px #669;
padding: 10px 18px 10px 18px;
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
margin-bottom: 10px;
}

This CSS code will get us started. Create a div and enter in some text, and you’ll see a basic box look.

Add Rounded Corners

As with most of these properties, we have to maintain more than one syntax to support multiple browsers (a real drawback currently). Since I develop first in Safari on the Mac, I’ll start with the WebKit version.

-webkit-border-radius: 8px

Aha! The corners are now rounded. Next, I’ll add the Gecko version:

-moz-border-radius: 8px
border-radius: 8px

When at all possible, always add the version without any prefix. That way you’re future proofing your style sheet in anticipation of the CSS3 final standard.

If you want to have additional control over the radius of each corner, use the border-[top-left|bottom-right|etc.]-radius syntax. Note that currently, the Gecko version is slightly different: -moz-border-radius-topleft, etc..

Add a Drop Shadow

Now, we’re going to add the drop shadow. If you’ve ever used the text-shadow property before, this syntax will look familiar.

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

Now here you’ll notice I’m not using typical hex codes for the colors but am using the new rgba syntax. The first three integers are the expected 0-255 range of colors values, but the last one is a decimal number from 0.0 to 1.0 that represents the alpha value (literally the opacity of the color). The ability to specify semi-transparent colors is truly welcome and allows us to create shadows that work well on different backgrounds.

Again, don’t forget the alternative versions:

-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

Adding a Gradient Fill

OK, this is where things are going to get tricky. The CSS3 spec for gradients is so new and undefined that there’s a completely different syntax whether you’re talking about WebKit or Gecko. I had to spend some time going back and forth between BBEdit and Safari to get it just right, and then when I switched over to Firefox, it took another while before I could figure out how to duplicate my results.

Gradients can be applied to a few common properties. Usually you’ll want to use background. Here’s the WebKit syntax:

background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #fffffa),
            color-stop(30%, #fed),
            color-stop(80%, #fed),
            color-stop(100%, #fffffa)
            );

For each color-stop, you can use a percentage or a position value (px, etc.). I think percentage is nice because it will scale with the box.

The Gecko syntax is different in rather confusing ways, but requires less typing:

background: -moz-linear-gradient(
            top, #eef, #cce 30%, #cce 80%, #eef 100%
            );

I recommend starting with the background selector for the solid color, then do the WebKit version, then do the Gecko version, for a total of three background selectors. Browsers will go down the list and use the one that they understand.

Final Result: (demo & source code here)

Bonus Feature: gradients on top of images!

As you can see, the final product looks really nice. You can even stack multiple boxes on each other and see how the shadow effects and corners are drawn. But then I had an idea. I’d heard that CSS3 supports multiple backgrounds, so could I actually create a gradient with alpha transparency on top of a background image? The answer is: yes.

background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, rgba(255,255,255,0.8)),
            color-stop(30%, rgba(255,255,255,0))
            ), url(http://www.siteshine.com/images/tan_background.jpg);
background: -moz-linear-gradient(
            top, rgba(255,255,255,0.8), rgba(255,255,255,0) 30%
            ), url(http://www.siteshine.com/images/tan_background.jpg);

The key is to specify the WebKit version with the gradient, followed by a comma, followed by the url to the image. And then do that all over again with the Gecko version. That provides us with a beautiful “shine” effect at the top of the box rendered directly on the image. With CSS3, you won’t have to worry about height-related image tiling issues for glows or shadows again!

Styling Forms

Form styles can be tricky as browsers sometimes won’t render controls styled by CSS (they continue using the native OS’s UI elements). Or they use some of the selectors and ignore others. Generally, your best bet is to stick with text fields and buttons, and use Javascript-based custom controls for drop-downs, radio buttons, check boxes, etc.

Here’s an example of a couple of form elements styled using CSS3:

One cool thing I did was add extra styling for a “glow” ring when the form element has the focus using the :focus pseudo-class.

You can also create an awesome button using a single span tag. Check this out:

<p>Here is some text. <span class="roundbutton1">Click Me</span> And more text.</p>

What About Older Browsers?

The key with supporting older browsers or particularly Internet Explorer is to choose your battles carefully. Some designers will decide they need every user’s experience to be top-notch and so will eschew virtually all CSS3 effects in lieu of using images as before. Other designers may be so gung-ho about CSS3 that they forget that many users will not experience that great of a visual design.

What I recommend is to try as hard as you can to create elements using standard CSS2 syntax first. If you get to an acceptable place, then add the CSS3 effects you want. If you don’t find the baseline acceptable, then you’ll need to go the old-school way. If you go through this thought process with every element individually, then you’ll probably end up with a site design that has some elements done old-school for maximum compatibility, and other elements (perhaps less critical ones) spiffied up for the latest CSS3 browsers.

What doesn’t make sense is to spend time creating image-based versions, then creating alternative CSS3 versions. Yes, serving two different versions depending on the user’s browser could save a small amount of bandwidth, but I don’t see it as being worth the effort. Go with one version or the other and stick to that.

Conclusion

CSS3 promises to end many a headache for graphics designers and give the Web site development community a great, open-standards tool with which to create fantastic effects and visual styles — all without the need for any special backend software or browser plugin. While there are some hoops to jump through and some compatibility issues at this point, the ease of implementing CSS3 styles simply can’t be matched. If you’ve been wrestling with Photoshop and obscure HTML/CSS markup and hacks to create common graphic effects, those days will soon be over! And that’s a good thing.

2 Written ArticlesWebsite

Jared White is Creative Director at Siteshine, a Web design and social media company based in Santa Rosa, CA. Jared is passionate about user experience and making complex technology seem simple. When he's not wearing his Web designer hat, Jared enjoys composing and listening to music, reading books on spirituality, and spending time at home with his wife and his cat, Tiger. You can reach Jared on Twitter and AskMe.

28 Comments Best Comments First
  • Avinash

    Monday, April 5th, 2010 16:25

    1

    Power of CSS3 is Amazing !!
    This Could bring a Great Change in Web Development.

    ~Avinash

    0
  • Shane

    Tuesday, April 6th, 2010 12:46

    9

    Great post, CSS3 is very impressive and incredibly useful.
    Thanks for sharing.

    0
  • Jared White

    Tuesday, April 6th, 2010 19:49

    10

    Thanks to everyone who enjoyed reading this article. I appreciate the feedback! If you have any questions or ideas for a follow-up article, please let me know. :)

    0
  • Smashing Share

    Wednesday, April 7th, 2010 06:16

    11

    Nice article! Very well written

    0
  • Michael Hart

    Thursday, April 8th, 2010 13:37

    13

    Great article! I love CSS3…don’t know how I ever designed without it.

    @Sam- I think Opera has it’s own proprietary prefix. So they should work by replacing ‘-moz’ with ‘-o’. So -moz-box-shadow becomes -o-box shadow.

    However, I haven’t tested this… I just read it elsewhere recently.
    Cheers!

    0
  • Sam

    Wednesday, April 7th, 2010 17:26

    12

    Great post. But don’t know why these properties don’t work in Opera?

    0
    • Trent

      Tuesday, September 6th, 2011 08:11

      27

      That’s so great if support from IE7, in my country there are so much people use IE 7 is main browser . Is there tutorial to make the same effect without use CSS3 ?? thanks a lot.

      0
    • Jared White

      Thursday, April 8th, 2010 20:58

      14

      There might be some Opera-specific prefixes that would work, but I don’t use Opera so I didn’t include them. Probably they would have info on that so you can just go through this code and replace -webkit with -opera or whatever they might call it.

      0
  • Jordan Walker

    Tuesday, April 6th, 2010 15:51

    8

    nice tutorial with valid information regarding cSS3

    0
  • straightalk

    Tuesday, April 6th, 2010 02:44

    7

    Very interesting technique I saw this in a code last year and didn’t pay much mind to it, Thank You Stephan for pointing it back to Me.. Very appreciated!

    I will have to Incorporated it soon! =)

    Norman Flecha
    STRAIGHTALK

    0
  • Chris

    Monday, April 5th, 2010 19:39

    2

    Awesome!
    Thanks for sharing this :)

    0
  • Stephan

    Monday, April 5th, 2010 15:41

    3

    A great list! Definitely some code to put in your snippets if you haven’t already!

    0
  • Ally

    Monday, April 5th, 2010 22:31

    4

    Thanks for the tips! I’ve been meaning to looking into the css for drop shadows.

    0
  • Bill @ Edward Rayne

    Monday, April 5th, 2010 21:37

    6

    Nice write up. We have been using CSS3 for rounded corners and drop shadows for a while but so until IE supports gradients we have chosen to stick with images. Like you said above we still have to choose our battles when employing modern techniques because of poor browser support.

    0
  • Ken

    Monday, April 5th, 2010 20:20

    5

    very nice effects and there is a big chance of saving money on graphic design stuff but a kind of useless since even IE8 (IE7+6 are in the dark anyway…) is not supporting them.

    0
    • John

      Thursday, February 3rd, 2011 17:33

      19

      It’s something I like to call browser degradation. You apply CSS3 rules for browsers that support them (Yes, IE7 and IE8 do support some of the CSS3 rules), and allow your site to gracefully degrade for those that do not.

      0
  • koelimaya

    Saturday, May 15th, 2010 14:14

    15

    thank you for posting this article, this is very useful for me

    0
  • Damon Day

    Thursday, June 2nd, 2011 14:46

    24

    I really gave up on trying to learn CSS and coding a long time ago. Honestly I don’t know what I would do without wordpress and all of the plugins that I can download for my site. I am very thankful that someone that knows much more than I, will take the time to develop a plugin and allow myself and the hundreds of thousands of other people just like me to use it.

    It really is amazing what someone can do these days with basically zero coding knowledge.

    0
  • Helena

    Wednesday, June 15th, 2011 07:24

    25

    I love what you guys are up too. This kind of clever work and coverage! Keep up the terrific works guys I’ve incorporated you guys to my blogroll.

    0
  • Adam

    Wednesday, August 24th, 2011 21:47

    26

    Great one-stop resource. Thanks.

    Once HTML5 is fully supported, it and CSS3 are going to change the way developers/designers are going to make rich content for the Internet. I’d say the biggest thing holding back HTML5 is processor speeds. Many of the things it can do (especially where it comes to SVG and 3D) can eat up a majority of a processor’s resources, especially on older systems. Perhaps computer manufacturers will start making systems with a processor dedicated to HTML5 and another for the rest of the system’s resources?

    0
  • Dan

    Sunday, February 12th, 2012 16:17

    28

    CSS3 and HTML5 is awesome, and its just the tip of the iceberg so to speak. Its quite daunting though to keep up with all the changes though..I’ve found The Book of CSS3 to be quite a useful reference. Nice tutorial btw

    0
  • Herr

    Friday, May 13th, 2011 18:14

    23

    I like your site! Better than the others I have recently visited covering this. The page layout is simple yet effective, mind if I steal or copy this? Just kidding…Thanks!

    0
  • Cazare Eforie

    Thursday, May 12th, 2011 17:06

    22

    I like how CSS3 works for styling the text. Before i had to use photoshop. It was not hard but had to waist some good time almost for nothing.

    0
  • Brett Widmann

    Monday, December 20th, 2010 03:09

    17

    This is great! Some of these snippets should help me a lot!

    0
  • brad

    Wednesday, October 6th, 2010 19:37

    16

    CSS3 would be much more exciting if Internet Explorer didn’t exist. It holds back the industry so much because none of this will work in most, if not all, version of IE

    0
  • AJ

    Wednesday, January 5th, 2011 22:06

    18

    Only one thing I don’t like about this article. Anyone who uses points for their font sizing should be asking themselves WHY??

    In your first code snippet, you included this…
    ****
    font-size: 10pt;
    ****

    points was developed for the print world, and that is where it should stay, it has no place in web design, IMO. Ems, percentages or px would be a much better choice.

    0
  • Gallbladder

    Wednesday, April 20th, 2011 21:12

    21

    I had some problems to add shadows behind text, but now I think i did it :)

    0
  • camisas

    Wednesday, March 23rd, 2011 12:39

    20

    I think I have to study css3. Old css is not enough!

    0
  • Dan

    Sunday, February 12th, 2012 16:17

    28

    CSS3 and HTML5 is awesome, and its just the tip of the iceberg so to speak. Its quite daunting though to keep up with all the changes though..I’ve found The Book of CSS3 to be quite a useful reference. Nice tutorial btw

    0
  • Adam

    Wednesday, August 24th, 2011 21:47

    26

    Great one-stop resource. Thanks.

    Once HTML5 is fully supported, it and CSS3 are going to change the way developers/designers are going to make rich content for the Internet. I’d say the biggest thing holding back HTML5 is processor speeds. Many of the things it can do (especially where it comes to SVG and 3D) can eat up a majority of a processor’s resources, especially on older systems. Perhaps computer manufacturers will start making systems with a processor dedicated to HTML5 and another for the rest of the system’s resources?

    0
  • Helena

    Wednesday, June 15th, 2011 07:24

    25

    I love what you guys are up too. This kind of clever work and coverage! Keep up the terrific works guys I’ve incorporated you guys to my blogroll.

    0
  • Damon Day

    Thursday, June 2nd, 2011 14:46

    24

    I really gave up on trying to learn CSS and coding a long time ago. Honestly I don’t know what I would do without wordpress and all of the plugins that I can download for my site. I am very thankful that someone that knows much more than I, will take the time to develop a plugin and allow myself and the hundreds of thousands of other people just like me to use it.

    It really is amazing what someone can do these days with basically zero coding knowledge.

    0
  • Herr

    Friday, May 13th, 2011 18:14

    23

    I like your site! Better than the others I have recently visited covering this. The page layout is simple yet effective, mind if I steal or copy this? Just kidding…Thanks!

    0
  • Cazare Eforie

    Thursday, May 12th, 2011 17:06

    22

    I like how CSS3 works for styling the text. Before i had to use photoshop. It was not hard but had to waist some good time almost for nothing.

    0
  • Gallbladder

    Wednesday, April 20th, 2011 21:12

    21

    I had some problems to add shadows behind text, but now I think i did it :)

    0
  • camisas

    Wednesday, March 23rd, 2011 12:39

    20

    I think I have to study css3. Old css is not enough!

    0
  • AJ

    Wednesday, January 5th, 2011 22:06

    18

    Only one thing I don’t like about this article. Anyone who uses points for their font sizing should be asking themselves WHY??

    In your first code snippet, you included this…
    ****
    font-size: 10pt;
    ****

    points was developed for the print world, and that is where it should stay, it has no place in web design, IMO. Ems, percentages or px would be a much better choice.

    0
  • Brett Widmann

    Monday, December 20th, 2010 03:09

    17

    This is great! Some of these snippets should help me a lot!

    0
  • brad

    Wednesday, October 6th, 2010 19:37

    16

    CSS3 would be much more exciting if Internet Explorer didn’t exist. It holds back the industry so much because none of this will work in most, if not all, version of IE

    0
  • koelimaya

    Saturday, May 15th, 2010 14:14

    15

    thank you for posting this article, this is very useful for me

    0
  • Michael Hart

    Thursday, April 8th, 2010 13:37

    13

    Great article! I love CSS3…don’t know how I ever designed without it.

    @Sam- I think Opera has it’s own proprietary prefix. So they should work by replacing ‘-moz’ with ‘-o’. So -moz-box-shadow becomes -o-box shadow.

    However, I haven’t tested this… I just read it elsewhere recently.
    Cheers!

    0
  • Sam

    Wednesday, April 7th, 2010 17:26

    12

    Great post. But don’t know why these properties don’t work in Opera?

    0
    • Jared White

      Thursday, April 8th, 2010 20:58

      14

      There might be some Opera-specific prefixes that would work, but I don’t use Opera so I didn’t include them. Probably they would have info on that so you can just go through this code and replace -webkit with -opera or whatever they might call it.

      0
    • Trent

      Tuesday, September 6th, 2011 08:11

      27

      That’s so great if support from IE7, in my country there are so much people use IE 7 is main browser . Is there tutorial to make the same effect without use CSS3 ?? thanks a lot.

      0
  • Smashing Share

    Wednesday, April 7th, 2010 06:16

    11

    Nice article! Very well written

    0
  • Jared White

    Tuesday, April 6th, 2010 19:49

    10

    Thanks to everyone who enjoyed reading this article. I appreciate the feedback! If you have any questions or ideas for a follow-up article, please let me know. :)

    0
  • Shane

    Tuesday, April 6th, 2010 12:46

    9

    Great post, CSS3 is very impressive and incredibly useful.
    Thanks for sharing.

    0
  • Jordan Walker

    Tuesday, April 6th, 2010 15:51

    8

    nice tutorial with valid information regarding cSS3

    0
  • straightalk

    Tuesday, April 6th, 2010 02:44

    7

    Very interesting technique I saw this in a code last year and didn’t pay much mind to it, Thank You Stephan for pointing it back to Me.. Very appreciated!

    I will have to Incorporated it soon! =)

    Norman Flecha
    STRAIGHTALK

    0
  • Bill @ Edward Rayne

    Monday, April 5th, 2010 21:37

    6

    Nice write up. We have been using CSS3 for rounded corners and drop shadows for a while but so until IE supports gradients we have chosen to stick with images. Like you said above we still have to choose our battles when employing modern techniques because of poor browser support.

    0
  • Ken

    Monday, April 5th, 2010 20:20

    5

    very nice effects and there is a big chance of saving money on graphic design stuff but a kind of useless since even IE8 (IE7+6 are in the dark anyway…) is not supporting them.

    0
    • John

      Thursday, February 3rd, 2011 17:33

      19

      It’s something I like to call browser degradation. You apply CSS3 rules for browsers that support them (Yes, IE7 and IE8 do support some of the CSS3 rules), and allow your site to gracefully degrade for those that do not.

      0
  • Ally

    Monday, April 5th, 2010 22:31

    4

    Thanks for the tips! I’ve been meaning to looking into the css for drop shadows.

    0
  • Stephan

    Monday, April 5th, 2010 15:41

    3

    A great list! Definitely some code to put in your snippets if you haven’t already!

    0
  • Chris

    Monday, April 5th, 2010 19:39

    2

    Awesome!
    Thanks for sharing this :)

    0
  • Avinash

    Monday, April 5th, 2010 16:25

    1

    Power of CSS3 is Amazing !!
    This Could bring a Great Change in Web Development.

    ~Avinash

    0

Comments are closed.

54.237.153.141 - unknown - unknown - US