Articles Archive

imagesplit-0

Perform a Split Reveal With CSS

screenshot

CSS can pull of a lot of really great image tricks: size manipulation, desaturation, even blur. One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS. Could you?

Today we’re going to code up a work around that allows us to achieve this very trick without an ounce of JavaScript or extra files. Let’s see how it works.

January 10th, 2013 Posted in CSS
moocardcontest-0

Winners Announced: Win a Free Set of 100 Business Cards From MOO!

screenshot

We’re delighted to have MOO provide us with a set of 100 Business Cards for three of our lucky readers! If you have not heard of MOO before, they love to print – whether it’s MOO’s renowned creative business cards, Postcards, Greeting cards, Stickers or any other products.

If you’re interested in scoring your own awesome set of printed MOO business cards, read on and learn how to enter!

January 9th, 2013 Posted in Competitions
psdcovers-0

Create Outstanding Product Shots in Seconds With PSDCovers

screenshot

Creating high quality 3D product mockups is a ton of work. I used to do print design work for various major store brands and I spent hours and hours toiling away in attempts to build attractive Photoshop mockups of various products.

If only PSDCovers.com had been around back then! This awesome resource is loaded with free packaging and product mockups that you can instantly apply your designs to in Photoshop. Sound too good to be true? Read on to see how it works.

January 8th, 2013 Posted in Software
st-dummycontent-0

Generating Placeholder Content in Sublime Text 2

screenshot

Everyone needs a little placeholder content now and then. Whether it’s a quick dummy image or a chunk of lorem ipsum, placeholder content can help fill the void when you need to flesh out a project but don’t necessarily have your pieces in place.

Today we’re going to take a look at how Sublime Text 2 can help you generate placeholder content automatically so you can save time and move on to the important stuff. Let’s check it out!

January 7th, 2013 Posted in Software
ps-css-0

Photoshop to CSS Conversion: 3 Methods Compared

screenshot

Converting Photoshop mockups to live web code is an extremely common practice among web designers. We’ve all done it a million times by hand, so it’s pretty exciting when we start seeing solutions pop up that will help us automate this process.

The latest version of Creative Cloud Photoshop CS6 has a built-in feature for converting Photoshop styles to CSS, and if you need another solution, there are two solid extensions that you can check out. Today we’ll compare the results of all three methods: Photoshop, CSS3Ps and CSSHat to see which is best.

January 3rd, 2013 Posted in CSS
altimage

Add Flair to Projects With Alternate Lettering

screenshot

Most typefaces have more than just 52 letters – 26 uppercase and 26 lowercase. They also contain an assortment of alternate characters that can help add flair and interest to your typography.

These special characters have been around since the beginning of type. Renowned typographer Johannes Gutenberg even used them in printing early copies of the Bible.

January 2nd, 2013 Posted in Typography
invoiceable-1

Invoiceable: The End of My Search for the Perfect Invoicing App

screenshot

I love getting paid, but I hate invoicing. It can be tedious, time consuming and even frustrating if you don’t have a good system in place. Long have I searched in vain for the perfect invoicing app that has the features I need without costing me a fortune.

Good news: I finally found it. Invoiceable is everything I’ve ever wanted in an invoicing app. It’s easy to use, the invoices are highly customizable and the service is free. Sounds too good to be true right? Read on to learn more.

December 31st, 2012 Posted in Software
iconfontgenerators-0

Four Custom Icon Font Generators Compared

screenshot

Icon fonts are all the rage right now. They make it so dang easy to embed vector graphics into a page that designers everywhere are turning to them as the primary way to handle icons.

The problem of course is, we need more control over which icons we embed. Sometimes we pull from a variety of sources, including our own work, and we need a good way to put it all together. Enter icon font generators. Follow along as we compare a few of our favorites.

December 27th, 2012 Posted in CSS
csscardtricks-1

CSS Card Tricks

screenshot

Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.

Along the way, we’ll see how to use before and after to build the cards with minimal markup. Let’s get started!

December 26th, 2012 Posted in CSS
dotgrid-5

Dotgrid.co: Your Next UI Sketch Book

screenshot

Today we’re going to take a step back from the digital world and take a look at a real life physical product: Dotgrid.co notebooks. These notebooks are made in the UK and are the work of Callum Chapman, a name you’ll likely recognize from the design community.

Callum has worked hard to create a solid product and I couldn’t be happier with my own Dotgrid.co notebook. Read on to see what they’re all about.

December 20th, 2012 Posted in Reviews
Subscribe
Membership