Category Archives: Design
Apr 27, 2011 by Matt | Posted in Design
Web designers have been making dynamically-sized buttons using the “sliding doors” trick for awhile now, but isn’t that technique so 2003? Wouldn’t it be cooler to construct buttons using only CSS?
Line25 has a fresh tutorial on How To Create a Stylish Button Entirely with CSS3.
Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.
The tutorial only uses the -moz and -webkit gradient properties, but someone in the comments included ones for Opera, Internet Explorer 10 and the W3C’s proposed syntax for the actual CSS3 spec.
Mar 28
CSS3 has a nifty feature that I wasn’t aware of until recently: multiple backgrounds per element. This was something I used to wish for frequently before I got used to faking it by nesting DIVs and assigning them single backgrounds. Chris Coyier’s CSS-Tricks blog…
Feb 9
Michael, the guy behind Pro Blog Design and PliablePress, posted a link recently posted a link to a neat design blog recently. Known as “Little Big Details,” it features minor design elements that are exceptionally functional and possibly worth emulating. I like the concept,…
Jan 19
HTML5 Boilerplate is a default template that you can use as a starting point to build HTML5-ready web designs around. It has a few neat features, like: Full cross-browser compatibility…even with IE6. It uses some scripts to add support to those uncool browsers. You…
Dec 24
A new CSS grid framework has been gaining attention in the blogosphere lately. A 12-column fluid framework with a preferred width of 1140px. The developer picked that width because it fits nicely on a 1280 pixel wide monitor. The framework’s most notable strength, though,…
Dec 22
Apple has just launched a new OS X application intended for advertisers looking to run ads on Apple’s iAd network. The software package, called iAd Producer, gives you an iLife-style tool to visually design interactive HTML5 ads. The iAd Producer displays a chart giving…
Dec 10
The site for Ben the Bodyguard may be one of the most interesting web designs for a site advertising an upcoming iPhone app that I have ever seen. What the app does exactly, I do not know. What I do know is that the…
Dec 1
Webdesign Tuts has published a great tutorial on how to make “an illustrative wood design.” It walks you through the process of setting up a document in Photoshop, marking out regions for navigational elements and content and styling them with tasteful gradients and textures.…
Nov 24
With the iPhone 4, and later the fourth-generation iPod Touch, Apple introduced a much higher density of screen for their mobile devices. The Retina Display, has the same dimensions as its predecessors, but there are twice as many pixels per inch. This makes for…
Nov 19
Lots of websites now have mobile versions that optimize their designs for speed and ease-of-use on the iPhone, reducing scripts and designing for the device’s smaller screen. They usually use some sort of browser detection script that loads a different template on the mobile…
