Though the changes implemented by CSS3 are still not supported on all browsers and cross-browser functionality across those that do support it can be a real pain, it’s still quite fun to experiment and see what’s possible.
In this brief tutorial we’ll take go crazy with CSS3 transitions in Webkit to create a simple web page that showcases some really nice color fade effects.April 20th, 2010 Posted in CSS, HTML
Last year mobile web usage increased 148% worldwide. In the near future as smarthpones become more and more ubiquitous this number will continue to shoot up. As a developer, the time has arrived for you to seriously consider whether you should begin accommodating your mobile audience.
Today we’ll look at a few quick ways to make your site a little friendlier for mobile devices.March 23rd, 2010 Posted in CSS, HTML, Layouts
How do you begin building a website?
The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.
Tables of information are boring.
In a sense, they’re meant to be that way. A good table communicates a lot of information in a concise, easy to understand way. Because the emphasis really should be on the information, over-designing a table can kill the effectiveness. However, in the right hands, clever design can not only make a table more attractive, but can actually increase readability.
Today we’ll take a look at several ways you can improve the functionality and aesthetics of your tables. One of the most common places we currently find tables online is on a web app’s pricing page so most of our examples will take this form, just keep in mind that these principles can apply to any type of informative grid (whether or not it’s actually a <table>).January 26th, 2010 Posted in CSS, HTML, Inspiration, Layouts
How do you mockup a website?
The typical workflow starts in Photoshop and then transitions over to HTML and CSS to mimic the original PSD as best as possible. However, there is a growing trend in web design to scrap the Photoshop step in favor of creating the initial comp right in the browser with your favorite editor. I’m sure right about now your head is buzzing with reasons why this approach would limit your design, but there’s actually a lot more you can do right in the browser than you might think. This article will provide you with the tools and tricks you need to create brilliant, working mockups as your very first step in the design process.January 8th, 2010 Posted in CSS, Layouts
Learning to write clean, optimized CSS requires lots of practice and an unstoppable compulsive desire for neatness. Keeping your CSS trim and tidy isn’t all about feeding your crazy psychological need for cleanliness though, in the case of particularly large websites, the payoff is faster loading pages. Faster loading times equals increased usability and higher user satisfaction.
This post will examine several techniques you can use to optimize your CSS as well as several online tools that can automatically compress your code.December 4th, 2009 Posted in CSS
Today we’re going to create a working horizontal CSS menu from scratch. We’ll be using transparent PNGs (sorry outdated browser users) to create a glossy horizontal bar, the color of which can easily be changed using only CSS. Before we get started, check out what we’ll be building in the live demo.November 20th, 2009 Posted in CSS, HTML