The Z-Index CSS Property: A Comprehensive Look

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges…

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

How to simplify your markup using ID for anchors

CSS Signatures are all the rage these days. If you’re not familiar with a CSS Signature, it’s basically nothing more than an ID on your body tag. The fundamental purpose of the CSS Signature is to allow a user to specify style adjustments to your site in their own user style sheets. Whether or not users are actually capitalizing on this is a discussion for another day, but doing this has other benefits like having an extra id to use when dealing with CSS specificity. Additionally, we can use this to capitalize on a little known fact about HTML and anchors: you can use anchors to jump to any element on your page with an ID attribute…

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

CSS: Design Out Of The Box

Are you tired of your typical columned and boxed layout? It is time to learn how to break out of the box and do something creative. In this post, I’ve collected some of the best examples that are designed out of the box. I’ve also provided some quick CSS tips with demo files on how to break out of the box by creatively using background images and the CSS position property…

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

11 Classic CSS Techniques Made Simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In this tutorial, you’ll see eleven different time-consuming effects that can be achieved quite easily with CSS3…

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

Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list…

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

3 Easy and Fast CSS Techniques for Faux Image Cropping

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. That’s why it’s called Faux Image Cropping.

These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus…

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

Simple CSS Tricks to Greatly Improve Site Typography

When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right…

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

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!)…

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

Horizontal and Vertical Centering Using CSS: A Beginner’s Guide

There comes a time in every web designer’s life, when you’re trying to center an HTML element and it’s failing miserably. You’re ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like: center, align, and valign. In this tutorial we’re going to shed some light on the subject, and hopefully help demystify the process of centering HTML elements using CSS…

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

How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling…

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