background preloader


Facebook Twitter


Transparency. Threecol. How to Size Text in CSS. There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory. Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms. In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.

We’ll reach our destination by the traditional method of trial and error. With more than a nod to Owen Briggs’s pioneering work of 2002, I have created a base case with six iterations and 161 screenshots. Follow along, won’t you? The test suite#section1. CSS Selectors and Pseudo Selectors and browser support. This page has not been updated for some time and some of the browser versions are obsolete - I'm working on a better format for the page, so check back every now and then :) The following is a range of CSS tests of the most common browsers' support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you feel like reading more about the selectors and which attributes they support, the W3C is the place to go!

If you spot any errors (it happens to us all...) or have any comments, I'm on Twitter as @overflowhidden. Click here to see this page's history. :hover only works for a-elements in IE6. History (not complete): 2011.04.13: I've discovered a bug in Google Chrome regarding the adjacent selectors and created a test page to demonstrate the problem. 2010.03.18: Opera 10b3 replaced with Opera 10.5 beta. CSS Drop Shadows II: Fuzzy Shadows. We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it. Article Continues Below We thought wrong. The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow).

Then Jan pointed out a technique for making Internet Explorer render PNG’s alpha channel correctly. In this article we’ll learn how to: Hide a stylesheet from non-IE browsers so it doesn’t affect document validation. First, we’ll fabricate our fuzzy shadow edge. Start with an image like the “fake shadow offset” we described in the previous article. Ie.css Conditional Comments. CSS demonstrations. Below is a list of CSS demonstrations that range from the simplest for beginners, to the most complex for advanced users. If you do not find what you are looking for then please contact me with your requirements and I will let you know if it is possible using just CSS. Avatar ParadeSimple image display using :hover. What's on TVAnother method of displaying images using :hover.

A photograph galleryA photo gallery using thumbnail images. A photograph gallery - with links » 20-02-2009A photo gallery using thumbnail images amd linking to large images. A photograph gallery - using <object> » 06-06-2009A photo gallery using the object element. A mixed gallery - using <object> » 22-06-2009A mixed gallery using the object element. Photo Gallery Mk.IIA photo gallery with horizontal scrolling.

A gallery using :target » 25-11-2011A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button. Sliding photo-galleriesCompressed images that expand on :hover.