An In Depth Coverage Of CSS Layers, Z-Index, Relative And Absolute Positioning

CSS can be difficult to learn. When we’re talking about CSS Layers, Z-Index, Absolute and Relative Positioning, CSS beginners often struggle to grasp the concepts. This article attempts to explain these concepts in an easy to understand way…

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

CSS Positioning Properties Quick Reference Guide

This article is aimed at experienced CSS developers who need a reference for the properties related to positioning in CSS 2. Each section of this article includes a link to the relevant section of the SitePoint CSS Reference and the W3C CSS 2 Specification…

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

20+ Resources and Tutorials for Creative Forms using CSS

Forms do not have to be boring and ugly, they too can be beautiful. With the proper understanding of each element (radio buttons, checkboxes, textareas..), CSS know-how, a little patience and some creativity you can make your forms beautiful. Throw in, the always important, semantics and accessibilty and things can get tricky.

Here are 20+ resources and tutorials for deisgning creative forms with CSS…

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

Stopping the CSS positioning panic Part 1

CSS positioning is quite easy. I guess no-one explained it plain and simple before.

The first part this post will focus on the four types of CSS positioning: static, relative, absolute and fixed. The second part will focus on the float property that is obviously related to an element’s position in our site…

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

Pure CSS opacity and how to have opaque children

Opacity is a desirable thing in this day and age; especially with the design trends that typified the web2.0 movement. Here are two different methods of achieving CSS opacity. One where the children inherit the opacity, the other where content can have its own opacity level…

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

Four Sided PNG Drop Shadows with CSS

In the PNG Drop Shadows article we explored a new CSS method that uses the PNG image format to apply drop shadows to any arbitrary box, producing excellent looking shadows. That’s great, but the method limits us to having shadows on just two sides of the content box. Clients aren’t going to be satisfied with that stricture for very long, so we need to pump up our shadows to cover all four sides of the box, just in case…

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

CSS – Imageless Rounded Corners

Over the past few years, many web designers have decided rounded-corners improve the layout/usability of their sites. Typically, two techniques are used: using background images with layered elements or simulating rounded corners with elements inserted via JavaScript. Both techniques have a drawback, requiring extra load time for images to download or for JavaScript to execute. It would be nice if browsers had built in CSS support handling the rounding of corners. Fortunately, CSS3 will include a “border-radius” rule to specify how to handle corner rounding. Although no browsers fully support CSS3 yet, there are browser specific rules implementing the CSS3 rounded corners…

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

Advanced CSS Printing Using CSS Page Breaks

Here’s an article explaining how to make your pages printer-friendly by using CSS/XHTML page breaks.

There are numerous spots that are good for page breaks:

  • Between page sections (h2 or h3 tags, depending on your site format)
  • Between the end of an article and subsequent comments / trackbacks
  • Between longs blocks of content

Using page breaks in CSS is simple…

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