The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily. However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed. With all this code, how could this be the easy way to create a layout?
Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.
Unlike its predecessors, CSS3 is not a single, monolithic spec, but a collection of modules all of which are at different levels of completeness. For instance the selectors module became a candidate recommendation in November 2001 and is already widely supported. In this post I'm going to be experimenting with the Backgrounds and Borders module and the Transitions module, mostly because the recent Firefox 3.5 release includes improved (but still experimental) support for some of the more interesting bits of it.
There are some new CSS3 features supported in the latest Chrome release and Firefox alpha which make this worth a second post. This time I'm going to focus on background sizing, CSS gradients and RGBA colours.
When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them.
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational markup. Heydon Pickering offers an unexpected option for handling cascading styles more efficiently: a variation on the universal selector.
While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.
You want to use Gill Sans? Go right ahead. Nothing should stop you. Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience.
Today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial. We’ll use two types of selectors which I haven’t talked about yet here: adjacent sibling selectors and pseudo-element selectors. I’ll explain each type briefly before we get started.
The double-margin float bug -- an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size -- has been a source of irritation for CSS-loving web designers for years. While an easy (if mysterious) fix has been known for quite some time now, it occurs to me that perhaps not everyone knows about it. So I thought it couldn’t hurt to toss another explanation out there.
Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of the time hardware accelerated by the GPU, they definitely raise the quality bar of the new generation of HTML5 applications.
The technique of using CSS to replace normal HTML text, mostly for headings, with a background image in order to achieve a particular look has been talked about many, many times since early 2003.Several different image replacement methods have been proposed, each with their pros and cons. Some methods create accessibility problems, while others place restrictions on the type of image you can use or force you to use extraneous markup. No method that I am aware of is perfect.
There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too.
Traditionally, web developers have been using either CSS hacks or conditional comments to target different versions of Internet Explorer with CSS fixes. In the last few years more and more people have started using conditional class names.
Here's the problem: you have a container with some content in it like an image along with some initial descriptive text. Then, when users hover their mouse over the container, a hidden container is revealed to present additional information over top of the current information but in a way that retains content from the original container.
A CSS problem I have been wrestling with lately is how to create a bulletproof shrinkwrapping graphic button. By that I mean an image-based button that will expand and contract to fit the amount of text it contains. It is a very useful technique for CMS-driven sites that allow the client to change the text that is displayed on buttons, as well as for multilingual sites.
So you’ve been to about a million websites at this point in your cyber life. There’s a little bit of everything in the online jungle, with every different imaginable style, color, and layout. Everyone is trying to be different, trying to separate themselves from the pack. So why is it that nearly every website, from the coolest of the cool to the worst of the worst, seem to still be using the same, ugly form fields that are default. Well, that’s about to change, at least on your website. I’m going to give you some quick and easy tips to spice up your form fields and set your website apart from the rest.
What if you could flip through a regular news website like a magazine? Håkon Wium Lie, Opera Software’s CTO and creator of cascading stylesheets, has proposed a new set of CSS tools that transform longer web pages into a more book-like experience, where the reader flips from page to page instead of scrolling down one long screen.
There are various reasons why CSS 3 is taking so long. Many of the issues are technical and can’t be avoided; problems when testing, issues with backwards compatibility and bugs with browser implementation. However there also seems to be a lot of politics involved.
CSS attribute selectors allow us to pinpoint the values of attributes of an element and to style that element accordingly. CSS3 introduces three new selectors that can match strings against an attribute value at the beginning, the end, or anywhere within the value.This provides powerful new ways to style elements automatically that match very specific criteria. In this article, I will put these new attribute selectors in action and create some clever CSS rules that attach icons to links based on the value of the href attribute.
By using attribute selectors in your CSS, you’re able to target elements with specific attributes, or even specific values within those attributes. When using attribute selectors, the attribute is contained within [brackets], just like how .classes have a leading period, or #ids have a leading pound sign.