CSS Reference

Radial Gradients

You probably already know about CSS3’s new gradients that let you avoid spending hours doing pesky photoshop tweaks…right? Well, if not, you’ve got some homework to catch up on. If you’re all caught up with the class however, it’s time to move on to a more advanced gradient, the radial gradient. It’s just what it sounds like, a gradient with a radial, instead of linear flow. Picture ripples in a body of water. Or just look at the red-to-blue example below. It’s usable in everything other than IE 9 and under.

See the Pen Radial gradient by Alex Wolf (@alligatorio) on CodePen.

Columns

Do you like cool, magazine style column layouts for your content? Does the thought of building a responsive table to put them in make you shudder with trepidation?

Today, and everyday thereafter, for the low, low price of free you can create those nifty layouts without any messy tables or JS solutions. Just check out the example below.

See the Pen CSS3 Columns by Alex Wolf (@alligatorio) on CodePen.

Text Shadow

It’s very easy to make something look obnoxious and dated with it, but if used properly it can highlight and accentuate to a great degree. We’ve given you an example below that should get you started, just remember overdo at your own risks!

See the Pen Text shadow by Alex Wolf (@alligatorio) on CodePen.

Transitions

CSS transitions are a new and exciting way to create effects without any scripting. To make this work, all you need to do is to set your element’s size, and then create a rule for when you want your transition to take place, and specify a pseudo class like :hover to trigger the transition. And don’t forget to specify a time in seconds for how long you want the transition to take in seconds.

See the Pen CSS Transitions by Alex Wolf (@alligatorio) on CodePen.

Fontface and WebFont

CSS3 has opened the door for the brand new @fontface rule. This CSS rule has given rise to a powerful tool with Google’s WebFonts.

With it, designers can quickly search the list of WebFonts, pick one that meets their needs, and implement it easily. A standard example has been given below. Copy and paste it into your favorite text editor and then run it to see, in any modern browser, the power of WebFonts. You can go to the Google Fonts website for more fonts, or just play around with the one below. Remember, this is not and image file, so there’s no extra resources used, and you can add all of your drop shadows and other text effects just like usual.

See the Pen Custom fonts by Alex Wolf (@alligatorio) on CodePen.

Text Decoration

Text decoration is one of those things that everyone knows about but few people really leverage to its full potential. Hopefully this example below will give you some ideas, and interesting things to do with it.

See the Pen Text decoration by Alex Wolf (@alligatorio) on CodePen.

Background Attachment

Fixed backgrounds are becoming more and more popular for things like single page, scroll based websites. And with smartphones beginning to dominate some website markets, is that really a surprise? Make sure you can keep up and understand this property, and if you need some help getting a handle on it, or just want a refresher, see the examples below.

Single Background


body {
  background-image: url("images/img.png");
  background-attachment: fixed;
}

Multiple Backgrounds


body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}

Calc

You know all of those terrible percentage hacks you have to do sometimes? You know how annoying they are? Do you wanna stop doing them? Me too. Here is a way to avoid them in the future: the calc property.Of course, this is a slightly unfinished rule, and isn’t completely stable, but you can start working with it now and learn how it works. The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values. The example with syntax is below.


.banner {
 position: absolute;
 left: 5%;   /* for browsers without support for calc() */
 left: 40px;
 width: 90%; /* for browsers without support for calc() */
 width: calc(100% - 80px);
 border: solid black 1px;
 box-shadow: 1px 2px;
 background-color: yellow;
 padding: 6px;
 text-align: center;
}

✖ Clear

🕵 Search Results

🔎 Searching...