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)

CSS Pull Quotes

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.

Since techniques to hide portions of a webpage rely on using CSS or JavaScript, we’ll need to approach this problem from the other direction – in this case using CSS to display new content. In this tutorial we’ll place the pullquote text in the title attribute of a paragraph or page division, and use the :before pseudo element’s ability to generate content to display the pullquote on the page…

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

CSS3 – a big storm is coming

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…

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

Taming Long Words with CSS word-wrap

Web browsers have a long history of sharing features between them. The word-wrap CSS property is a feature that originally came from Microsoft and is included in CSS3.

Now available in Firefox 3.5, this CSS property allows the browser to arbitrarily break up long words or strings of characters to fit within a given element…

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

New CSS3 properties in Firefox 3.5

Firefox 3.5 supports several new CSS3 selectors. In this post we’ll talk about four of them: :nth-child, :nth-last-child, :nth-of-type and :nth-last-of-type.

Each of these is called a Pseudo-class and can be used to apply styles to existing selectors. The best way to describe how this works is with some examples…

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

@font-face: The Potential of Web Typography

Firefox 3.5 is out and with it comes the support for some new CSS3 selectors. The more users download it, the more designers will be able to take advantage of the @font-face CSS rule. How can @font-face be used with currently implemented CSS selectors to create engaging, nuanced and more mature typography? Here’s an article explaining all…

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

How to: Opacity with CSS

Do you know that an opacity or transparency can be applied to various aspects of a website without the use of Photoshop? Well you can with the use of CSS and even though there is not yet a CSS standard, the effect does work in all modern browsers and is easily achievable. Here are the basics of this trick, some things you can do with it and how you can get it to work on various browsers. All you need is a moderate knowledge of CSS but it’s really easy to understand…

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