Joshua Johnson

CSS / 20 Dec 2011

Make It Snow on Your Website With CSS Keyframe Animations

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

Graphics / 19 Dec 2011

Branding Lessons From the Guitar Gods: Taylor, Gibson, Fender and More

Today we’re going to discuss how design projects often require you to take a step back from who you are as a designer and forget your own personal taste while taking on the personality of a given brand.

The companies who hire you will have vastly different brands, strategies, and most importantly, customers. This principle is displayed quite prominently in the brands of major guitar manufacturers. Let’s dive in and see how Taylor, Fender, Dean, Gibson and more target the right customers through design.

Freebies / 17 Dec 2011

Weekly Freebies: 15 Fantastically Fat Free Fonts

In the past, we posted an awesome roundup of 15 Gorgeous and Thin Free Fonts to add to your collection. To round out the selection we’re following that up with some nice fat fonts to utilize when you need to make a big, bold statement.

Follow along as we introduce you to some of the most popular fat free fonts around. You’ll find some great serif, sans-serif, slab serif, display and even cursive typefaces to add to your collection.

Layouts / 15 Dec 2011

Tips and Ideas for Designing With Blurred Images

“The supreme accomplishment is to blur the line between work and play.”
– Arnold Toynbee

The topic of today’s discussion is blurry photos. No, not the kind that you accidentally take because your kids won’t sit still. The intentional kind, the use of which can serve several practical purposes in design.

We’ll learn all about how to use blur effects to help make text more legible, direct the viewer’s attention, and just make backgrounds more fun. We’ll also take a look at some different types of blurs and how to properly apply selective blurring.

CSS / 14 Dec 2011

Four Simple and Fun CSS Button Hover Effects for Beginners

Today we’re going to take a step back from advanced discussions about CSS preprocessors and return to some good old basics. We’ll work up four super simple CSS buttons, each with a unique animated hover effect.

Follow along with me and create your own fun button styles. Also feel free to grab my code and use it on your projects. If you’re a CSS newbie looking for a good way to make your buttons more interesting, this article is for you!

CSS / 13 Dec 2011

Extends and Control Directives: Two Crazy Things Sass Can Do That LESS Can’t

LESS and Sass are aimed at accomplishing the same thing, and are indeed so similar that you could easily confuse the two, but are they really created equal? Is there anything that one can do that the other can’t?

On a feature to feature basis, each syntax has one or two things that the other doesn’t. However, despite the fact that I was initially drawn to LESS’ simplicity, in the long run I couldn’t help but be sucked in by a few key features that make Sass really powerful. Follow along as I blow your mind with some of the amazing and unique features of Sass.

Layouts / 12 Dec 2011

Designing Engaging Header Images: Think Outside the Box

One of the first things you do in designing a site is to decide what that first chunk of pixels that users will see looks like. You’ve got to grab their attention and communicate your message above the fold or risk that person moving on to their next open tab.

Unfortunately, many of us fall into predictable patterns for this piece of the site. We use the same old tricks, shapes and plugins and come up with a result that might look great, but isn’t really that exciting. Today we’ll take a brief look at how you can make your header images more interesting. Along the way we’ll see some live examples from sites that have implemented these techniques successfully.

Freebies / 9 Dec 2011

Weekly Freebies: 20 Fantastic Free PSD UI Kits

Designing user interface elements from scratch is a time consuming a laborious task. Don’t get me wrong, it’s incredibly fun and I highly recommend the practice, but for those occasions when you just need a good mockup or even want to spend the core of your time on other aspects of a design, using a pre-built UI kit can be an awesome time saver.

Today we’ve got a collection of twenty awesome free UI kits that have been meticulously designed down the the last pixel. Each represents hours of work and is sure to help make your design look great.

Layouts / 8 Dec 2011

Popular Web Design Trends in 2011: Over 50 Inspiring Examples

December is here and it seems we’re finally wrapping up 2011. It’s been a year filled with new and exciting forefronts for the web. CSS3, HTML5 and responsive design were at the top of the most-discussed topics. We also mark the passing of the old ways. Flash, Silverlight and similar proprietary plugins received an all out assault in 2011, one that they may never recover from.

To end the year with an informative retrospective, we’ve scoured the web in search of patterns and trends that emerged or became increasingly popular throughout 2011. Follow along as we examine over fifty websites in an attempt to spot similar tricks and themes. I guarantee it’ll be difficult to read without spotting a few trends that you jumped on in your own projects this year!

CSS / 6 Dec 2011

3 Things You Never Thought to Do With Media Queries

You already know how to use media queries to create a responsive design, but have you tried to use them for anything else? Is it possible that media queries can be used natively to improve your workflow?

Follow along as we completely break from tradition and hijack media queries to help us test and tweak a design. You’ve never seen media queries like this before!

CSS / 5 Dec 2011

10 LESS CSS Examples You Should Steal for Your Projects

LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted. Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more.

One of the most major hurdles to getting started with these tools is simply figuring out just what the heck you’re going to do with them. We’ll help you out in a big way today by hooking you up with ten incredibly useful LESS snippets that you can drop into your projects today.

Competitions / 5 Dec 2011

Win a Pack of 100 Free Custom Business Cards From MOO!

Great news! We’ve selected our three winners! If you have been selected, you will be contacted shortly with information on how to claim your prize. So watch that inbox, you just might be one of the lucky few.