CSS properties that affect type rendering

When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Make CSS3 buttons like a boss

High-quality interface elements are a great way to add that extra bit of refinement to a website. I’ve been maintaining a repo of CSS3 buttons for the past few months and I’m starting to see them slowly make their way out into the real world. This tutorial is going to give you a deeper understanding of the design thinking that goes into making these buttons and show you how to make them from scratch…

VN:F [1.9.22_1171]
Rating: +2 (from 4 votes)

Checkerboard, striped & other background patterns with CSS3 gradients

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more…

VN:F [1.9.22_1171]
Rating: +1 (from 5 votes)

Controlling text size in Safari for iOS without disabling user zoom

The default viewport settings – the size and scale of the viewport – in Mobile Safari/Safari for iOS are optimised for websites with a width of 980 pixels. This means that if you use a fluid/elastic layout or media queries to make your layout adaptable, Safari on iOS doesn’t take advantage of the flexibility that offers but shows the site zoomed out as if it had a fixed width. Another issue with Safari on iOS is how text size is handled when you change orientation from portrait to landscape on your iPhone/iPod/iPad. The default behaviour is to increase text size instead of using the extra available width to display more of the site. As a developer you can affect both of these issues or features if you prefer to call them that…

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

Everything You Wanted To Know About Gradients And a Few Things You Didn’t

An in depth article covering CSS3 gradients. The smartly applied gradient can be a valuable contributor to a designer’s vocabulary. Let’s take a quick look at how to create CSS gradients—hopefully we can make them seem a bit more accessible, and bring a bit more art into the browser…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

A Comprehensive Guide to CSS Resets

This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world.While almost all of these CSS resets are generally provided free for public use many through Creative Commons licensing, it is incumbent upon you to check the terms of use before putting them to use in your projects…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

An Introduction to CSS 3D Transforms

3D transforms change the way we think about the blank canvas of web design. Better yet, they change the canvas itself, trading in the flat surface for voluminous depth. We web designers, who have rejoiced for border-radius, box-shadow and background gradients, now have an incredible tool at our disposal in 3D transforms. They deserve just the same enthusiasm, research and experimentation we have seen on other CSS3 features. Now is the perfect time to take the plunge and start thinking about how to use three dimensions to elevate our craft…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)