Learn the Five Most Popular Attributes in CSS3

This is an incredibly helpful and informative CSS3 video tutorial for people looking to better understand how to go about using the most popular attributes made possible by this latest version of CSS.

Most tutorials spend the entire video sharing how to do one specific task or perhaps explain one theory, but this one is actually five lessons in one and is brilliantly executed. Natalie, the presenter in this video, is obviously very well versed in CSS and does not waste any time in moving from one attribute to the next.

The five CSS attributes discussed here are border radius, box shadow, hover transform, scale transform and opacity. These are all commonplace in our everyday online browsing experiences, but many people do not realize that it is CSS that is actually powering these powerful styling details.

These are all very easy to implement into just about any website or app and the example below of how to change normal boxes into boxes with rounded corners makes that quite clear. The first block of code is just a basic box. The second block of code is the same box, now with rounded corners. Notice that you may need to include a browser prefix for some browsers and/or some CSS attributes. You can visit the website canuseit.com to see a current listing of the latest compatibility reports.

.box {
    width: 450px;
    height: 300px;
    background-color: ececec;
    margin-top: 20px;
}

.box {
    width: 450px;
    height: 300px;
    background-color: ececec;
    margin-top: 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
}

Now with the addition of one more attribute, this same box can also be given a box shadow.

.box {
    width: 450px;
    height: 300px;
    background-color: ececec;
    margin-top: 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    box-shadow: 3px 3px 3px #333;
    moz-box-shadow: 3px 3px 3px #333;
}

The video continues to move through the next few attributes, but the idea is the same. Just add one more style element and make sure you check for browser compatibility and support for whatever you intend on using before implementing it.

We hope you’ve enjoyed this CSS tutorial, and that before you leave you can take the time to also check out this post on making animations with CSS3 transitions and transform features. Thanks for stopping by!