Oh Wow That’s Neat – 13: subtlepatterns.com

Subtlepatterns.com is a great free resource for high quality repeating backgrounds for use in your designs. It was created and is actively maintained by Atle Mo. With subtlepatterns.com you can simply browse all of the backgrounds and when you find one that you like you can download the image. He even provides a 2x version

Things You May Not Know About CSS Backgrounds

I have been using CSS background properties for quite a few years and have only used what I have needed. There are some pretty cool things that can be done with backgrounds that I was not so familiar with. In this article I’ll highlight some of these not so common options. background-origin The background-origin property

Quick Tip – 12: Rounding Corners in Illustrator

Ever needed to quickly and precisely round corners on vector shapes and typography already added to your designs in illustrator? Well, it’s pretty easy to do nowadays. Here’s How it Works Select the objects you want to have rounded corners on and then go to “Effects” in the top tools bar, then “Effects” under “Illustrator

Oh Wow That’s Neat – 12: SVG Optimiser

If you’ve ever created an SVG image in Adobe Illustrator you’ve seen some pretty crazy code. Just like all other code we write, it should be simple, clean, and lean. Also, like any other image type we want to make sure that it is optimized and has the highest quality with the smallest file size.

AngularJS Overview for Web Designers

AngularJS is a newer JavaScript framework geared towards the creation and maintenance of single page web applications. It is considered to be a “toolset for building the framework most suited to your application development” meaning that, for the most part, you can choose the elements that you want to use and swap out those that

Quick Tip – 11: Text Wrapping in Illustrator

Often when creating a web design mock-up you’ll have the need to wrap text around objects. Illustrator makes this very quick and easy to do. Here’s How it Works Just add the object that you want to wrap the text around in front of the text Make Text Wrap Then select the object and the

Oh Wow That’s Neat – 11: Whatfont Bookmarklet

Do you ever use browser developer tools just to figure out what fonts and font styles are being applied on your site and perhaps others? Well, there’s an easier way thanks to Chengyin Liu an engineer at Backplane. He has created the Whatfont Bookmarklet extension for Chrome. It’s pretty simple, just install the chrome extension,

User Experience Design With Illustrator

Every time I go to design a new site I jump directly into PhotoShop because, well, it’s the tool I’ve used since the very first site I designed as a professional. I know it very well and can move quickly and efficiently. PhotoShop became the industry standard as there weren’t a whole lot of other

Quick Tip – 10: Using Global Swatches in Illustrator

Ever wish that you could create high fidelity design mock-ups with the ability to make global color changes? Well, with Illustrator you can do exactly that. Here’s How it Works Create a new swatch in the swatches pallet Save the Swatch as “Global” When the swatch options dialog opens up check the “Global” option and

Oh Wow That’s Neat – 10: jQuery Notebook

Getting tired of those ugly old school WYSIWYG editors that have every setting under the sun? I know I am. Well, there are some other great solutions out there and jQuery Notebook is one of them. jQuery Notebook jQuery Notebook is a small JavaScript plugin that mimics the editor functionality seen in other platforms like

Gettin’ Modular With Web Components

Modular is the new black when speaking in terms of the web. From the back-end perspective, developers have been building modular, object-oriented code for a long time now. Well, as web technologies and our development processes continue to improve, more and more of these back-end, programmatic philosophies are finding their way into front-end development. The

Oh Wow That’s Neat – 09: Conditioner.js

Media queries are great and they have become the standard for responsive web design. They provide us the ability take control of our designs and dramatically change the way they look across a wide array of view port dimensions and devices. They are not without issues however. They are are only concerned with the width

Pseudo-Classes vs. Pseudo-Elements

For the longest time the only pseudo selectors that we could use were :link, :hover, :visited and :active and they could only be applied to a tags. As long as we were intending to support ie6 that was all we could do. As we’ve adopted philosophies like progressive enhancement, graceful degradation, or dropped support for

Oh Wow That’s Neat – 08: Cubic-Bezier.com

I don’t really come across much about the use of CSS3 cubic-bezier() functions for easing in animations. It is a timing function that can be used in place of the easing keyword for CSS animations. The beauty of using a cubic-bezier() timing function is that it allows you to to create an acceleration curve so

Modern Web Typography: Kerning

Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web. For those of you that may not be clear on what kerning is, it deals with the spacing between certain pairs of letters letters such as W

How to Use CSS Filter Effects

Before I get started you should know that at the time of writing CSS Filter Effects are not supported in the latest versions of ie(11) and Firefox(27) so if you are using them you should try Chrome, Safari, or Opera instead. CSS filter effects are quickly becoming one of the hottest topics among web designers.

Oh Wow That’s Neat – 06: www.fontwalk.de

www.fontwalk.de is a site that was created as a marketing tool for www.fontshop.com. I’m not so interested in their fonts, although it looks like they have a nice selection. I am more interested in the great design ideas behind the Font Walk site. It is a very non-traditional user experience that takes the parallax scrolling

Make it Count with CSS Counters

Often I’ve found myself in a spot where I’ve needed to style an ordered list in a way that I just couldn’t do with CSS. So I either had to live with it as it was or get tricky with JavaScript or something to create a custom list with the necessary markup. Then I stumbled

Quick Tip – 05: Small Caps Using font-variant

Ever needed to use small caps in a website? They can add a really nice typographic touch in certain circumstances, but I’ve never really taken advantage of them with CSS. It’s really easy to add small caps using font-variant, here’s how: The CSS: The HTML: The Demo: See I’m Using Small Caps Browser Support: The