CSS Head

The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that works pretty well…

We put a lot of effort into the quality of the fonts in the Typekit library. As part of that work, we’ve been researching the relationship between font math and CSS, and would like to share what we’ve found. If you’ve ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this post is for you…

I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay to search / submit buttons, which also got rounded corners. After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI…

Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines…

As CSS browser support increases, including impressive strides by the IE9 team, more and more authors are plunging into CSS3. As they do so, they’re facing vendor prefixes—the — properties like -moz-border-radius, -webkit-animation, and so on. There’s been some grumbling about these prefixes.

We ought to praise vendors for using prefixes, and indeed encourage them to continue. Beyond that, I hold that prefixes should become a central part of the CSS standardization process. I do this not for the love of repetition, but out of a desire to see CSS evolve consistently. I believe that prefixes can actually accelerate the advancement and refinement of CSS…

With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code. But which image size will be big enough? Monitors and operating systems have evolved quickly, and as a result there is a wide range of available screen resolutions.

A better solution would be to scale the image to make it fit within different window sizes. Unfortunately, CSS 2.1 has no means of scaling background images. CSS3 backgrounds to the rescue…

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector with the colon, but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page…

I was browsing the web today and found something exciting. I noticed that there are unicode characters for chess pieces. Always looking for ways to play with CSS3 I decided to try and build a chess board using my new best friend :nth-child and some unicode characters…

Building stylish contact forms typically requires the use of images and maybe some JavaScript to create something that looks professional. However, with CSS3 it’s now much easier to create some nice effects that don’t require the use of any images, yet can still look clean and stylish.In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects…

One of the most powerful and useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well understood, especially by those just starting out with CSS. So, in this post I’ll try to shed some light on this little CSS gem…