Tutorial

CSS3: A Quick Intro

Published on September 3, 2020
Default avatar

By Alligator.io

CSS3: A Quick Intro

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In Web Design and Development, like most fields, you have to evolve to keep up with the times. This is especially true with new features that get added to one of a designers most often used tools, like CSS. CSS3, the latest specification for CSS, has several new features designers can start taking advantage of right now.

The biggest and most important change in CSS3 is definitely the modularization of the specification approval process. What this means is that each section of CSS3 (borders, box shadow, images, etc) has its own module. That means that they can be approved individually, and developed separately.

This means we get changes faster, and when they come they are more relevant to what the community and browser developers have been asking for. It also means it’s easier for browser to be up to date on the new standard, because it’s received piecemeal, rather than all at once. This means less worrying about how your content looks across different browsers and platforms.

We all know a few in our field who are more like dinosaurs than designers. Don’t be a dinosaur, stuck using outdated techniques and boring design practices. Elevate your designs and take advantage of the latest technologies with techniques like:

Transitions

Long have designers struggled to use Adobe Flash and JavaScript to accomplish image transitions. No more. Gone are the days of ugly, often tacky Flash transitions and difficult to implement JS animations. Now, with CSS3 transitions, designers can use a clean, lightweight browser-side solution to implement their transitions, instead of a heavy server-side method. There are two key ways to do this. First, and most simply, you can use the transition declaration and trigger mouse-based effects like hover or trigger the animation with a simple JS change. Alternatively you can use the @keyframe rule to specify specific changes to the animation that don’t require user input. You can read more about CSS3 transitions here.

Gradients

Tired of mucking about in Photoshop, struggling to get the gradient for those buttons just right? So is everyone else. Thankfully now, you don’t have to! CSS gradients allow designers to create beautiful gradients that look excellent on any display. Best of all, it’s all in a nice, light-weight CSS file that’s supported by all browsers, and doesn’t require you to use heavy, resource taxing images (are you noticing a theme here?). Gradients have actually been around for a while now but only now are they available for use in every browser. Right now, radial and linear repeating and non-repeating gradients are available and more are likely to be on the way.

3D Transforms

Let’s be honest for a second here. We designers can be a very…showy group of people. Some might say we enjoy lording our abilities over designers less in the know than we are. Now, if this sounds like you, or if you just want to build a beautiful, eye-catching portfolio, CSS3 3D transforms can really help your work stand out. Never ever underestimate the value of a little flash (pun shamelessly intended) in your web page design, especially when you want to stand out from a veritable sea of other designers.

Border Radius

Rounded corners look great. Rounded corners look natural. Rounded corners have historically been a pain in the ass to code, and using images can quickly increase file sizes. Now your buttons can have natural, rounded edges without excessive code! Use CSS3’s new border-radius property to create simple rounded edges that don’t require excess fiddling with height and width properties, and don’t break when you tweak content or location. If you want an example, try these code snippets (courtesy of webreference.com ) on a web page of your own.

CSS:


.box {
  border: 2px solid orange;
  border-radius : 25px;
  width: 100px;
  padding: 10px;
  text-align:center;
}

HTML:

  `<div class='box'>Submit</div>`

Border Image

Continuing on the subject of borders, how often have you wanted to have a nice, pretty border around a div or image, only to realize that you have to spend time in Photoshop and even more time making the border responsive because all of your default choices are just plain unattractive? Now your borders are only limited by your imagination and Photoshop/Illustrator skill. You can now create easy to work with image sprites and apply them with the border-image property. That will let you quickly and easily create those pretty borders you want, all without spending hours fiddling and adjusting things.

Web Fonts

It seems like only yesterday designers were forced to consult tables and lists of “web-safe” fonts. Well, those days are behind us now, and all of us should be grateful. The @font-face rule now allows you to use services like Google Web Fonts and typekit to include any font you could possibly imagine just be incorporating a new stylesheet. This means your typography choices are no longer limited to ones you know your end-user is likely to have access to. This also means no more specifying 12 different font-family’s just to be sure your text isn’t an ugly default font.

CSS Columns

Want to layout your articles in a responsive, column based layout? Not long ago that meant you had several options. First, you could use a table and be loathed by everyone in the design world. Second, you could use JS to flow your content into containing divs and be loathed by yourself for the torturous amount of time such a process would take. Now, however, no tables or trade-offs are needed! You can simply use the columns rule and you’re done. The only issue you may run into is with getting things to look the same across all browsers (I’m looking at you IE) but with Internet Explorer going the way of the dodo, it looks like that issue should be sorted out as well.

Selectors

Finally, and perhaps most importantly, we have new CSS selectors. It would take more space than I want to use to go into detail about them all, so we’ll just hit the highlights and you can check out the complete list here. We can still use the old CSS2 selectors as well, but now we have some new rules. What it comes down to is we now have the ability to select DOM elements based on what their attribute values are, instead of specifying ID’s and Classes for each element. Now you can style them based simply on their attribute field.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel