Design Goods

A quick reference for popular design articles, tutorials, and tips.

The Font-Face Rule and Useful Web Font Tricks

This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Topped up with some helpful tips, tricks and workarounds, this article will hopefully provide some useful insights.

jQuery Fundamentals

This is a hands-on class. We will spend a bit of time covering a concept, and then you’ll have the chance to work on an exercise related to the concept. Some of the exercises may seem trivial; others may be downright daunting. In either case, there is no grade; the goal is simply to get you comfortable working your way through problems you’ll commonly be called upon to solve using jQuery.

How HTML5 Is Aiding in Cross-Platform Development

As the mobile application space continues to explode, developers are increasingly using HTML5, JavaScript and CSS3 to aid in the creation of web apps and native mobile apps. This process is especially useful when dealing with cross-platform development or when working with content that already exists in some form on the web

Structural Tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in.

Internet Explorer In A Web Designer’s Life – Problems And Solutions

Internet Explorer, this current pain in the… code for designers nowadays, had its days of glory a long time ago, when IE6 was launched, cause at that time, believe it or not, IE6 was a top notch browser. With time, things have changed and changed dramatically, Internet Explorer having to face an incredible load of hate directed to itself, especially coming from web designers and developers.

CSS: Innovative Techniques and Practical Solutions

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

Useful HTML5 & CSS3 Toolbox For Web Developers

HTML5 and CSS3 are really revolutionizing web development and web design, because they are bringing so many new features to work with to the fields. In this article you’ll be able to find some great tools, cheat sheets and much more you could need to master these new features. Here we present you, a list HTML5 tutorials and techniques that you can’t miss if you are a web developer.

Introduction to CSS Escape Sequences

Regardless of where they appear, string values in CSS behave in a similar way. The most important thing to remember about them is that they are not HTML. This means, for instance, that inserting literal angle brackets without escaping them as HTML entity references (< and >) is perfectly legal.

WebKit Updates CSS3 Gradient Support, Matches Mozilla Syntax

On Friday, the WebKit team announced they were updating the CSS3 gradient support in the rendering engine, bringing it in line with Mozilla’s implementation. Nightly WebKit builds now include support for -webkit-linear-gradient and -webkit-radial-gradient in addition to the old -webkit-gradient value.

jQuery Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Colortip – a jQuery Tooltip Plugin

In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Copyright © 2011, Design Goods is a project curiated by Dustin Cartwright.