Font in your Face

So, you are a web designer going about your daily life, struggling with IE 6, huffing about CSS 3/HTML 5, berating your designers for not using web-safe fonts, and there comes a brick hurling towards you named @font-face. You are dumbstruck. You have no idea what hit you. Everyone is asking about it, and you pretend to know about it. Then you quickly google for it and are hit with even more bricks. I was one such web designer and I spent 4 days in agony, learning about @font-face. I wrote this down, so that no other web designer has to face this torture anymore. So here is the “A to Z” of what @font-face means now and what it will mean for the future of web design.

Manian, Divya. Nimbupani Designs (2009). Articles>Web Design>Typography>CSS

Twelve Really Useful CSS3 Tips And Techniques

CSS 3 no doubt is amazing. I have been using slight bits of it in some of my other web projects, and i am more than pleased with it. Its simplicity runs so well with its advanced features such as rounded corner rendering and font file reading. Rounded up here are my 12 favorite tutorials to help you learn many of CSS 3’s new and exciting features very quickly.

Johnson, Andy. Web Design Tutorials (2009). Articles>Web Design>CSS

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

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

Guide to CSS Font Stacks: Techniques and Resources

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Chapman, Cameron. Smashing (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

Why Stylesheet Abstraction Matters

CSS is simple. You assign style primitives to elements and some of those primitives cascade down to the elements contained within. I get it. It’s simple to understand. But CSS is not simple to use or maintain. It’s time for stylesheets to evolve so that we can take web design to the next level.

Eppstein, Chris. Git Hub (2009). Articles>Web Design>CSS>Planning

Using JavaScript to Style Active Navigation Elements

I’m all about efficiency when I’m writing web code. Any time I find myself writing the same functionality more than once or twice, I try to consider whether my repeated code could be wrapped into a function of some sort. Navigation is often one of those areas where I try to improve my efficiency.

Glazebrook, Rob L. CSS Newbie (2009). Articles>Web Design>CSS>JavaScript

Stop Hacking, or be Stopped

CSS has experienced a colourful and unusual history. From historic slow adoption to the current slow rate of development, ugly hacks have meant filling in the gaps is par for the course. But now that Internet Explorer 7 is looming, we're getting ready to deal with the first really major upgrade to a browser's rendering engine since we've started using CSS-based layouts in earnest.

Shea, Dave. Vitamin (2006). Articles>Web Design>CSS

Web Based, The

Our best CSS gallery is a showcase of well designed websites by the best web designers and web developers around the world, css gallery help you to get inspirations for the web site projects as well as to learn and see what can be achieved through pure css layouts and web standard.

Web Based, The. Resources>Web Design>CSS>Blogs

Fifty Extremely Useful And Powerful CSS Tools

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

Friedman, Vitaly. Smashing (2008). Articles>Web Design>CSS

Powerful CSS-Techniques For Effective Coding

Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy. In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding.

Friedman, Vitaly. Smashing (2008). Articles>Web Design>CSS

CSS: Techniques, Tutorials, Layouts

Since web-development is a quite dynamic field nowadays, new techniques are being developed and updated all the time. A primary example are CSS-related techniques, which emerge almost every day and offer more possibilities for fellows web-developers. We keep an eye on the recent developments and collect new ideas and methods for our readers. A “fresh” round-up of the “fresh” CSS techniques, tutorials and layouts.

Lennartz, Sven. Smashing (2006). Articles>Web Design>CSS

Modern CSS Layouts: The Essential Characteristics 

Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs. But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites.

Gillenwater, Zoe Mickley. Smashing (2009). Articles>Web Design>CSS