Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

CSS3

CSS is the language that you use to design your website. CSS3 is the latest version of CSS, that has some very cool new effects.

CSS is the language that you use to design your website. CSS3 is the latest version of CSS, that has some very cool new effects.

For example, say you want to create a button with a gradient. With CSS, your only option is to open up Photoshop, create a button with the gradient that you want to use and reference the background image in your CSS stylesheet.

background: url(‘img/gradient-button-background.png’) no-repeat;

Problem is, if you want to change the color or anything else, you have to go back into Photoshop, change the color, and then update the background PNG—a bit time consuming. Plus, adding images to your stylesheet can significantly impact your website’s load time.

With CSS3, you can use the gradient function to create the same effect. Heavy, image-laden files be damned!

So, what else can you do with a little CSS3? Why not try some of these fancy new tricks:

Box Shadows

Want to make your site look richer or make certain sections of the page pop out? Nothing says pop like a box shadow:

box-shadow: 1px 2px 3px 1px #000000;

RGB vs. RGBA

Previously, you were restricted to RGB or hexadecimal values when using color on your site. CSS3 allows you to use RGBA as well, which allows you to set the opacity of the colors that you’re using.

background: rgba(0,0,0, 0.4);

Rounded Corners, aka Border Radius

In order to produce rounded corners in CSS, you had to create image files that were the exact size of the box that you wanted to add curves to. Fun times.

border-radius: 3px 3px 3px 3px;

CSS3 supports rounded corners and even allows you to adjust the radius of these curves without ever having to touch a graphics program.

3D Transform

Ever used Illustrator to make your text look like the credits on the Star Wars movie? Or, make a 2D house pop out of the page by making it 3D? Guess what? You can do this now too with CSS3 Transform function.

transform: rotateY(90deg) translateZ(200px);

You can see all sorts of fancy examples of transformation here.

Web Fonts

The most popular new feature of CSS3 is definitely web fonts. You may not remember this, but only a few years ago we were all limited to a shortlist of web fonts which included Arial, Georgia, Impact, and Comic Sans.

No more! With CSS3’s @font-face feature you can literally add any font that your heart desires:

@font-face {
font-family: Wisdom;
src: url("fonts/WisdomScript.otf") format("opentype");
}

Of course, there is a little bit of a downside. Since CSS3 is still a working specification, meaning it hasn’t be finalized or established as the web standard, its not supported by all browsers.

Cocktail Party Fact

Ever since CSS3 came on the market, developers all over the world have been trying to outdo one another with their CSS3 fancy-ness.

The current winner? Jay Salvat who re-created the Mona Lisa using mostly CSS3 box-shadows.

Your email address will not be published.

4 comments

  1. Jennifer Langsam Replied

    I see this hasn’t been updated since 2012. Is there a newer version of CSS that we should be aware of?

  2. applebinge Replied

    The css code for “mona lisa” was a lot. Great work by @jaysalvat.

    • Kelli Replied

      Thanks for the heads-up! We’ve updated the link so please give it another try..

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.