Top 5 CSS Shorthand Properties

An excellent way to simplify and streamline your Cascading Style Sheets CSS is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties: Font Properties, List Properties, Background Properties, Border and Outline Properties and Transition Properties…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Pimp Your Tables with CSS3

You can use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class…

VN:F [1.9.22_1171]
Rating: +3 (from 7 votes)

CSS3 Solutions for Internet Explorer

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer IE6, IE7, and IE8 – all of which are still currently in significant use…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Ever Thought About Using @Font-face for Icons?

The evolution of Internet technologies never ceases to amaze. Seemingly daily, new concepts and techniques are being thought up by creative and talented people. With modern browsers being adopted at a greater rate, systems like CSS3 are becoming more and more viable for use on projects of all sizes. Clearly, this can be seen by looking at new services sprouting on-line like TypeKit. Conceptually, if we deconstruct a font down to it’s basic elements, we can make use of this technology for things other than type, icons…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Snazzy Hover Effects Using CSS

With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has.With very good browser support, we can do lots of cool things that we know will work in all major browsers. In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Cross-Browser CSS Gradient

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

Hide Stylesheet for IE6

IE6 has become the source of our frustrations — and for certain sites, giving it an unstyled, naked view is exactly what I want to do. Alpha-channel PNGs, min-width, max-width, rendering bugs galore — there are plenty of sites I’ve designed and maintain where the IE6 stats are low enough to drop the axe and move on. Now is the time! We can use conditional comments to hide styles from IE6 only…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Understanding CSS Specificity

The “C” in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn’t always the case. There’s something else you have to take into consideration, as well: specificity…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)