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)

Using the LESS CSS Preprocessor for Smarter Style Sheets

The simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. These limitations, like the inability to set variables or to perform operations, mean that we inevitably end up repeating the same pieces of styling in different places. Not good for following best practices—in this case, sticking to DRY don’t repeat yourself for less code and easier maintenance.

Enter the CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a new extended language, then compiling the code to vanilla CSS so that it can be read by Web browsers. Several CSS preprocessors are available today, most notably SASS and LESS…

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