Articles - Page 152

Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.

Inspiration / 17 Jun 2011

50 Creative and Clever Examples of Outdoor Advertising

Outdoor advertising is an incredibly rich and diverse medium that allows a very unique spectrum of creativity for designers to play with. Sometimes you have to catch someone’s attention in a split second, other times you can do something fun and interactive.

Today we’ve scoured Ads of the World and come up with fifty particularly creative billboards, bus stops, subway ceilings and more. If you need a fresh blast of creativity to boost your next project, take a look!

Graphics / 16 Jun 2011

Awesome and Unusual Places to Steal Color Palettes From

A good color palette can make or break a design. It sets the tone, conveys emotion and can even drastically affect usability. With all this pressure, choosing a color palette is tricky business.

Today we’re going to think outside the box and explore some fresh and interesting ways to select the colors for your project by pointing out some great sources of inspiration. Let’s get started.

Business / 10 Jun 2011

What to Do With Your Portfolio’s Contact Form: 3 Popular Solutions

You’ve got your portfolio site almost finished and it’s time to tackle that task you’ve been putting off: the contact form. Some designers love forms, but many of us find them boring and annoying and would rather spend our day creating anything else.

One of the most difficult parts of this task is simply deciding what fields and questions to place in your contact form. What information should you be gathering from potential clients? Today we’ll answer that question by looking at three different common solutions.

CSS / 3 Jun 2011

Mastering CSS Reflections in Webkit

The box-reflect property is just one of many awesome new CSS3 effects that Webkit brings to the table. Unfortunately, it’s not the easiest to use. There’s a lot of syntax that can be confusing and today we’re going to sift through it and explain it in detail so you can get the hang of it.

It’s important to note that, at this point, box-reflect is only supported by Webkit browsers. It’s a superfluous visual effect so you can use it as long as you accept that it’s not going to render in anything but Chrome and Safari.

Typography / 2 Jun 2011

50 Examples of Beautiful Typographic Art

Everyone loves a good typography roundup. Type is the muse of so many extremely talented designers and the web is simply overflowing with beautiful examples just waiting to inspire you to create your own masterpiece.

Today we’ve got a collection of fifty of the most attractive typographic art pieces we could find from artists all over the world. Take a look!

JavaScript / 25 May 2011

Create an Awesome Zooming Web Page With jQuery

Want to create a really unique and eye-catching effect for your site? How about an animation that zooms into a specific portion of the page when you click on it?

It may sound like a lot of work but with jQuery and Zoomooz.js, it’s a snap! I’ll walk you through the process step by step as we build a stunning zooming thumbnail gallery.

HTML / 19 May 2011

How to Link to Specific Points in a Page and Animate the Scroll

You’ve seen it done before, you click a link in the navigation and it takes you not to another page but a specific point within the current page. How is this accomplished? With some extremely basic HTML that you can pick up in a few seconds!

To take it further, we’re also going to see how to animate the transition using a little jQuery.

CSS / 12 May 2011

20 Amazing Examples of Using Media Queries for Responsive Web Design

Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs.

To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to present experiences specifically catered to different visitors.

CSS / 11 May 2011

Build a Pure CSS Slideshow With Webkit Keyframes

While playing around with Webkit Keyframe Animations I figured out a way to create an awesome little image slider using only CSS. It’s definitely a bit unconventional but it’s a great way to learn to think outside of the box with what you can do with CSS3.

Keep in mind that since we’re using Webkit Keyframes, this is purely an educational experiment and will only work in Safari or Chrome. As more browsers begin to support keyframe animations in the future, this method should become perfectly usable in your own web projects.

CSS / 5 May 2011

5 Cool CSS Hover Effects You Can Copy and Paste

Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.

If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.

CSS / 5 May 2011

Create an Awesome Animated Thumbnail Gallery With CSS

Today we’re going to have some more fun with CSS3 transitions. There’s a popular jQuery trick that expands the crop of an image when you hover over it and I wanted to replicate it using only CSS. To take things further, I put this effect into action in a thumbnail gallery.

Keep reading to see the live demo and follow along step by step as we explain how this works and build the whole thing from scratch.