Skip to content

My Top Five Favorite Features of CSS3

CSS3 is probably one of the coolest things to hit the web design scene since, I don’t know, HTML5. And here’s why: CSS3 has a lot of new features that simply take web site styling to the next level.

With CSS3, web browsers natively produce a lot of the styling effects that were once only achievable through creative HTML hacks and images editing programs like Photoshop. What’s great about CSS3 is that it’s good at reducing the amount of image files and code you have to place on your site as part of your design. This means reduced server requests and load times for your website. That precious bandwidth…

Also, when you want to edit the design on your website, changing a few lines of CSS is much, much easier and less time consuming than having to opening up Photoshop and edit old graphics. You might even have to recreate graphics from scratch to fit a new design. On the other hand, resizing an element, changing the border radius, changing colors and gradients, these are all things that take a few seconds to change in CSS.

Finally, using CSS3 just makes it easier to achieve most of the design aspects on a website. You can accomplish a lot with a little code, leaving you more time to listen to music and hang out with friends.

Here are my top 5 favorite CSS3 features, along with a quick code implementation that you could stick in any HTML page:

Box Shadows

You’ll usually find this effect used subtly to surround item containers on a webpage. Back in the day, the shadow had to be a separate image slice (or a few different images). With CSS3, you can now easily create a shadow around an element with some code, and be able to change the position, color, and blur of that shadow.

<style>
.example_boxshadow
{
width:200px;
height:100px;
background-color:blue;
box-shadow: 5px 5px 5px #555555;
}
</style>

<div class="example_boxshadow"></div>

Rounded Corners

This is already very popular on the web. Honestly, rounded corners just look more user friendly than square boxes. Best part now is, you can apply this effect to HTML elements with CSS3. That’s good because you’ll find rounded corners almost everywhere. Twitter for example, takes the “Round ALL the corners!” approach.


<style>
.example_borderradius
{
width:200px;
height:100px;
background-color:red;
border-radius:15px;
}
</style>

<div class="example_borderradius"></div>

 

Text Shadows

You can add a shadow to HTML text that can then be highlighted, copied and pasted just like normal text. The old way involved typing the words you wanted in Photoshop, applying a drop shadow, and saving those words as an image file. But why use images when you can use just text? You can change the shadow angle, the shadow blur, and the shadow color in CSS. You can also check out this CSS3 generator to see how it works.


<style>
.example_textshadow
{
font-size:32px;
text-shadow:3px 3px 3px #555555;
}
</style>

<p class="example_textshadow">Text shadow with CSS3.</p>

 

Opacity

This property makes can make elements more see-through. You could go about setting the opacity of an image in an image editor, and then save it as a .png or .gif file with transparency enabled. Or you could just write one line of code in CSS. It’s up to you. The transparency value ranges from 0 (completely see-through) to 1 (completely solid).


<style>
.example_opacity
{
opacity:0.2;
}
</style>

<img class="example_opacity" src="https://www.google.com/images/srpr/logo3w.png" / >

 

Background Gradients

Gradients created right in the browser as soon as you load the page? Cool! It’s  another really popular effect that was accomplished by using images (plus some CSS actually) and can now be done solely with CSS3. Notice that this code will only work on specific Firefox, Chrome, and Safari browsers. This feature is not as widely supported on all browsers and you have to write separate lines of code for different browsers. The old way of doing gradients involved generating a thin gradient image and repeating it across the page. If you want to stick with the old way, you can use this gradient generator. If you want to try the new CSS3 way, try this resource. It generates a lot of that compatability code for you.


<style>
.example_backgroundgradient
{
width:300px;
height:100px;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* Firefox3.6+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
}
</style>

<div class="example_backgroundgradient"></div>

 

The only real caveat of CSS3 is the fact that not all features are compatible in all browsers. CSS3 is constantly in development and browsers simply need time to catch up to all the latest features. However, the features mentioned above should work fine across the latest iterations of all the major browsers.

Definitely try to use some CSS3 if you’re making a site. Have fun with it. You’ll get to use all those trendy effects (hopefully sparingly, don’t give your site an overdose) and save yourself a lot of time that you would have spent trying to make the exact same thing in an image editor. Oh wait, did I even talk about CSS3 Animation and Transformation features that can twist and turn HTML as well as save you time writing Javascript? Well, just know that it’s really cool stuff.

What do you think of CSS3? Let us know in the comments below.

Ben Romy

Ben is a 2012 graduate of the iSchool, now working for MLB Advanced Media.

More Posts