CSS Border Shorthand Property

The CSS border shorthand is a simple one and allows you to combine border-width, border-style and border-color into one property: border: 5px dashed #DF5B9C; Each side also has a shorthand: border-bottom: 2px solid #00BDA7; Border-style border-style can take one of the following values: dashed, dotted, double, groove, ridge, inset, outset, solid, hidden, none, initial or …
Read more

CSS Box-Shadow Shorthand Property

Box shadows created with CSS are fun and easy, especially when using the shorthand: box-shadow: 5px 5px 3px 1px rgba(0,0,0,0.4); The values go in this order: offset-x, offset-y, blur-radius, spread-radius and color. You can also define inset shadows: box-shadow: inset 5px 5px 3px 1px rgba(0,0,0,0.4); And even multiple box shadows: box-shadow: 5px 5px pink, -5px …
Read more

CSS Background Shorthand Property

Life’s too short to lose time with background properties. Use the shorthand instead. Of course, you don’t have to specify a value for every property, you can skip as many as you’d like: background: #FF8100 url(“gator.svg”) no-repeat right top fixed; Is equivalent to this: background-color: #FF8100; background-image: url(“gator.svg”); background-repeat: no-repeat; background-position: top right; background-attachment: fixed;

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 …
Read more