Powered by GoodBarry

“Ninja Training for Web Designers”

The Perfect 3 Column Liquid Layout (Percentage widths)

Thursday, July 24, 2008 - Lawrence Hsu | BC

No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.

The Perfect 3 Column Liquid Layout (Percentage widths) by Matthew James Taylor

Faux Absolute Positioning

Wednesday, July 23, 2008 - Lawrence Hsu | BC

There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it’s time to share the technique with the rest of the world and see how we can work together to improve it. I’m calling it “faux absolute positioning” after the faux columns technique that simulates the presence of a column.

Faux Absolute Positioning from A List Apart

Introducing SenCSS

Monday, July 21, 2008 - Lawrence Hsu | BC

SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.

Introducing SenCSS from Kilian Valkhof

Some New CSS Features in Firefox 3

Friday, July 18, 2008 - Lawrence Hsu | BC

Our developer documentation already has a list of the new CSS features in Firefox 3. I'd like to talk in some more detail about some of the more interesting or useful ones.

Some New CSS Features in Firefox 3 by David Baron

Block Quotes and Pull Quotes: Examples and Good Practices

Tuesday, July 15, 2008 - Lawrence Hsu | BC

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.

Block Quotes and Pull Quotes: Examples and Good Practices from Smashing Magazine

CSS Support in Email Clients

Saturday, July 12, 2008 - Lawrence Hsu | BC

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

CSS Support in Email Clients from Campaign Monitor

Easy Vertical Centering with CSS

Friday, July 04, 2008 - Lawrence Hsu | BC

One of the first things I learned to do in CSS was how to horizontally and vertically center a fixed width and height element. This could be an image for a splash page (god forbid) or a small centered site that some designers love to do. Originally this was accomplished with absolutely positioning an element 50% from the top and 50% from the left of the viewport. This of course only places the top left corner of the element at the center of the viewport and you then need to drag the element back into a central position with a negative margin equal to half the height and half the width of the element.

Easy Vertical Centering with CSS by Paul OB

Pastel Color Menu with Dynamic Submenu Using CSS

Wednesday, July 02, 2008 - Lawrence Hsu | BC

This tutorial illustrates how to design a nice pastel color menu with a dynamic submenu which appears when you select a link in the main menu, using CSS and some lines of javascript code.

Pastel Color Menu with Dynamic Submenu Using CSS from Woork

Tripoli

Saturday, June 28, 2008 - Lawrence Hsu | BC

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

Tripoli from DevKick

10 Examples of Beautiful CSS Typography and how they did it…

Thursday, June 26, 2008 - Lawrence Hsu | BC

There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. We want to know what did they do, and how/why does it result in beautiful type? NOTE: Do not simply steal the design/code/style listed here, learn from it. I have seen a few sites that have ripped off the design elements of these sites and it is awful.

10 Examples of Beautiful CSS Typography and how they did it… by Ross Johnson

Beautiful CSS Buttons With Icon Set

Monday, June 23, 2008 - Lawrence Hsu | BC

I love clean design and in general simple solutions to design nice and attractive elements for my websites. This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

Beautiful CSS Buttons With Icon Set from Woork

CSS Decorative Gallery

Tuesday, June 17, 2008 - Lawrence Hsu | BC

I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

CSS Decorative Gallery from Web Designer Wall

Two Hidden Features New in Firefox 3

Saturday, June 14, 2008 - Lawrence Hsu | BC

For us developers, much has been said about the main improvements coming in Firefox 3. Stuff like built-in support for features web applications that work offline with locally cached data, and full-page zoom that makes it easier to design for visually impaired users, are all great to see, but in this post I’m going to take the opportunity to look at a couple of features that could be easily overlooked.

Firefox 3 finally supports display: inline-block!@#%$^

Two Hidden Features New in Firefox 3 from Sitepoint

Which CSS Grid Framework Should You Use for Web Design?

Thursday, June 12, 2008 - Lawrence Hsu | BC

Ever wondered how all those slick "magazine" themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework - at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it's possible to design complex web page layouts without a framework, it's arguably an act in masochism. In this article you'll get an overview of the current batch of Frameworks and which you should choose to use.

In case you were wondering, I personally prefer Blueprint CSS as well.

Which CSS Grid Framework Should You Use for Web Design? from Nettuts

Gallery of CSS Galleries

Sunday, June 08, 2008 - Lawrence Hsu | BC

From the land of the rising sun. I wonder if there will be a gallery of gallery of CSS galleries in the future.

Gallery Gallery

Top reasons your CSS columns are messed up

Saturday, June 07, 2008 - Lawrence Hsu | BC

Do not miss this post from Kyle Neath.

I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, without all the cruft of having ten thousand column combinations available. Keeping these quick tips in mind at all times will allow you to do something I like to call defensive coding — and really that’s all CSS frameworks are: defensively coded snippets of CSS.

Top reasons your CSS columns are messed up from Warpspire

Homer CSS

Friday, May 30, 2008 - Lawrence Hsu | BC

Some guy drew Homer using CSS. *COLLAPSE*

Lightweight JavaScript Accordion with CSS

Thursday, May 29, 2008 - Lawrence Hsu | BC

The JavaScript accordion above is 1.65 kilobytes when packed. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.

Lightweight JavaScript Accordion with CSS by Michael Leigeber

8 Fonts Your Probably Don't Use in CSS But Should

Wednesday, May 28, 2008 - Lawrence Hsu | BC

CSS has brought us many capabilities in terms of typography and the web, but we always seem to be limited to the same 4-5 typefaces over and over again. There is an inherant problem, if the font you specify isn’t on the viewers computer it won’t render in that font. So as designers and developers we end up selecting the ones that we can safely assume is available on most computers today. So most pages use Arial, Helvetica, or Georgia as their typefaces… and the world of the web remains slightly more bland.

8 Fonts Your Probably Don't Use in CSS But Should by Ross Johnson

How To Create A "Mootools Homepage" Inspired Navigation Effect Using JQuery

Monday, May 26, 2008 - Lawrence Hsu | BC

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery!

How To Create A "Mootools Homepage" Inspired Navigation Effect Using JQuery from Nettuts

Recent Posts

Category

Archive

    Back to Top