YUI CSS Framework Tutorial

How to use the YUI CSS Framework to cut down on the time and stress it takes to produce a good layout. What is YUI? The Yahoo User Interface library is comprised mostly of Javascript utilities and controls to help front-end developers create a rich user interface. It also comes with a great CSS framework to make developing websites a lot faster. This CSS framework is what we’ll be focusing on today. It’s lightweight less than 6KB when minified, easy to use, and most importantly, it works with all major A-grade browsers…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Shorthand – A Guide to Cleaner and Faster Coding

As web designer’s we’re always looking for ways to speed up workflow. One of the simplest ways to speed up and clean up your coding is to learn CSS Shorthand. In order to fully grasp shorthand, it’s helpful to already have a decent knowledge of CSS. Here’s a a simple guide to bring you into the world of CSS Shorthand…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Solve Any CSS Problem In 3 Minutes (Or Less)

If you’ve spent any length of time building tableless web designs, you’ve probably come across some frustrating CSS problems. Sometimes floats don’t float right or links and images won’t line up. Internet Explorer offers its own brand of pain when it comes to CSS, with weird bugs like doubled float-margins and the ability to make entire sections of a layout disappear. It’s enough to make a good web designer run screaming for a print job. Here are some ideas to help solve your CSS layout problems…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Object-Oriented CSS: What, How, and Why

It sounds like an oxymoron, or at least an impossibility, doesn’t it? How can a static language that’s really more like markup than programming be object-oriented? In this tutorial, you’ll see the idea of object-oriented CSS, how it works, and reasons why you should be using it for your projects…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to Create Nice Scalable CSS Based Breadcrumbs |

Breadcrumbs are a useful way of ensuring that your visitors know exactly where they are. In this tutorial you will learn how to create scalable CSS Based Breadcrumbs using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Everything You Need To Know About CSS Selector Specificity

There’s an obscure topic of CSS that I think many people aren’t aware of. It’s called “specificity”. I suppose it’s not as glamorous as rounded corners, drop shadows or animations but it's still just as important in your day to day work as any other part of CSS…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to Build a Simple Button with CSS Image Sprites

The button is one of the most common elements in the world of the web. In modern web design buttons are used not only on forms, but also as visual aids that draw attention to important elements of the page. Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. A good one for anyone getting started with CSS…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

21 Awesome @font-face Embeddable Typefaces

While @font-face may not work in all browsers, it’s still one of the best solutions available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and show examples of over 20 fonts that are free to use with @font-face…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How To Use Pure CSS To Style Web Form Dynamically

Pure CSS styling of web form can be achieved by changing the border colour or background colour but how about styling a textfield and textarea with a nice round corner background image?

Let’s use a contact us form as an example to demonstrate this tutorial. This simple tutorial will show you how you can style your textfield and textarea in you web form with background image dynamically…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)