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…
Direct link: Stopping the CSS positioning panic Part 1
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…
Direct link: Pure CSS opacity and how to have opaque children
An article for CSS beginners that explains the mysteries of forcing parent divs to contain their children. Two methods are described – overflow: hidden, and clearfix…
Direct link: CSS Fundamentals: Containing Children
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…
Direct link: Four Sided PNG Drop Shadows with CSS
Direct link: CSS – Imageless Rounded Corners
Direct link: CSS String Truncation with Ellipsis
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…
Direct link: Advanced CSS Printing Using CSS Page Breaks
There are quite a few tutorials out there that demonstrate how to create tabs with CSS and jQuery. Here’s one that’s easy to understand even for a beginner…
Direct link: Easy Tab Tutorial with CSS and jQuery – Tabbed Navigation
Pull quotes are commonly used in print publications to draw emphasis to a particular quote or excerpt from a document, typically placing it in a larger typeface nearby on the page. When creating a well formed HTML document, pullquotes introduce a challenge in that they require a passage of text to be repeated on the page. This has the potential to introduce confusion when the document is read without the accompanying style sheet. Ideally then, a pullquote should be considered a stylistic element and as such should be seperated from the document itself and rendered with a stylesheet.
Direct link: CSS Pull Quotes
A big storm is coming, and it hopefully will blow away a lot of things that are wrong with web design. While the current CSS standard offered tremendous steps away from traditional print design, with CSS3 media queries and multi-column layouts it will be a whole new ballgame. The possibilies we have now hopefully change the way we approach website design like few things we’ve seen up until now…
Direct link: CSS3 – a big storm is coming