A directory of resources inthe field of technical communication.

Articles>Web Design>CSS

144 found. Page 1 of 6.

About this Site | Advanced Search | Localization | Site Maps

1 2 3 4 5 6  NEXT PAGE »



The 960 Grid System Made Easy

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?

Johnson, Joshua. Six Revisions (2010). Articles>Web Design>CSS


Accessible CSS Forms: Using CSS to Create a Two-Column 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.

Website Optimization (2008). Articles>Web Design>CSS>Forms


Adventures in Web 3.0: Part 2 - CSS 3

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.

Crowther, Rob. Boog Design (2009). Articles>Web Design>HTML>CSS


Adventures in Web 3.0: Part 3 - More CSS 3

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.

Crowther, Rob. Boog Design (2009). Articles>Web Design>HTML>CSS


Automatic Numbering With CSS Counters

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.

Storey, David. Opera (2008). Articles>Web Design>CSS


Axiomatic CSS and Lobotomized Owls

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.

Pickering, Heydon. List Apart, A (2014). Articles>Web Design>CSS>Standards


Beautiful Fonts with @font-face

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.

Daggett, John. Mozilla.org (2009). Articles>Web Design>Typography>CSS


Better CSS Font Stacks

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.

Ford, Nathan. Unit Verse (2008). Articles>Web Design>Typography>CSS


Bezględnie Względny

Pozycjonowanie z kolei jest jednym z najczęściej mylnie interpretowanych aspektów wersji 2 CSS. Przyjrzyjmy się zatem nieco bliżej temu, jak ono działa.

Olsson, Tommy. Grabun.com (2004). (Polish) Articles>Web Design>Document Design>CSS


Book-Style Chapter Introductions Using Pure CSS

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.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Document Design>CSS


Bug Fix: IE Double Margin Float Bug

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.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS>Web Browsers


Build Awesome Apps with CSS3 Animations

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.

Rousset, David. SitePoint (2012). Articles>Web Design>CSS>Interaction Design


Building Accessible Static Navigation with C.S.S. and Microsoft Visual Studio 2005: A Help Authoring Guide

There are times when we need to build a navigation tree stucture to accomodate a small document collection. There is no need to have this nav list expand or contract, so employing a Behavior layer (unobtrusive DOM/JavaScript) is not appropriate.

Palinkas, Frank M. helpware.net (2009). Articles>Web Design>CSS>Help


Building Accessible Static Navigation with CSS

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS - no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>CSS


Case Study: Getting Hardboiled with CSS3 2D Transforms

In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.

Clarke, Andy. Typekit Blog (2011). Articles>Web Design>Interaction Design>CSS


Choose an Accessible Image Replacement Method

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.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>CSS


Combating Classitis with Cascades and Sequential Selectors

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.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS


Conditional Sibling Class Names for IE Patching

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.

Johansson, Roger. 456 Berea Street (2013). Articles>Web Design>CSS


Content Overlay with CSS

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.

Snook, Jonathan. Snook.ca (2008). Articles>Web Design>CSS>Interaction Design


Creating Bulletproof Graphic Link Buttons With CSS

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.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Graphic Design>CSS


Creating Killer Forms with CSS

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.

Robbins, Kyle. ReEncoded (2008). Articles>Web Design>CSS>Forms


CSS ‘Paged Media’ Brings Book Smarts to the Web

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.

Gilbertson, Scott. Webmonkey (2011). Articles>Web Design>eBooks>CSS


CSS 2.2

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.

Budd, Andy. Andy Budd (2007). Articles>Web Design>Standards>CSS


CSS 3 Attribute Selectors

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.

Schmitt, Christopher. Opera (2008). Articles>Web Design>Standards>CSS


CSS Attribute Selectors: Built-In Classes

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.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>CSS



Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon