Articles - Page 175

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

Business / 24 May 2011

Survival Tips: Doing Free Design Work for Friends and Family

As a designer, you’ve no doubt encountered situations where friends, family members, neighbors or even mere acquaintances ask you for a favor in the form of free design work. If you’ve ever given in to one of these requests, you probably know how quickly they can get out of hand.

How should you respond to these requests and what should you prepare for if you take one on? Today we explore the wonderful world of pro bono design.

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.

Graphics / 6 May 2011

55 T-Shirts Made Just for Designers

Everyone loves a good t-shirt. Today, we’ve got 55 of them that were specifically designed to appeal to graphic designers, web designer and coders.

We’ve scoured the web to find the coolest, funniest and most ridiculous designer-themed shirts and split them into five categories: Photoshop & Illustrator, Color, Typography, CSS & Code and Design. Enjoy!

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.

CSS / 29 Apr 2011

Fun With Pulsing Background Colors in CSS3

Let’s finish the week with something fun shall we? CSS keyframe animations currently have very limited browser support, but they’re still quite interesting to learn about and experiment with.

Below we build a simple web page that leverages Webkit keyframe animations to gently shift the background color on a never ending loop. Intrigued? Read on!

Graphics / 28 Apr 2011

Dribbble, Philosophy and the Art vs. Design Debate

Always eager to jump into a debate, today I tackle the concept that artsy eye candy is currently too prevalent in design. Design inspiration galleries and communities are constantly critiqued for displaying art when their focus should be on design.

Can we cut through the biases and assumptions of the common rhetoric and discover the proper place for artistic talent in relation to functional design? Let’s find out.

CSS / 21 Apr 2011

6 CSS Shorthand Tricks Every Developer Should Know

Recently, I decided that I needed a refresher in all of the various CSS shorthand properties. The best way to learn something is to teach it so here’s my attempt at exactly that.

Today we’ll learn how to use CSS shorthand for backgrounds, margins & padding, borders, fonts, list-styles and transitions.

Graphics / 20 Apr 2011

Designing a Web App Homepage: Examples, Tips and Peeves

The web is completely over-saturated with apps that help you connect with a social network, make grocery lists, manage large projects, decide who will make tea and every other crazy task you can imagine.

With all of this competition, how can you possibly convince visitors that your app is a the proverbial needle among the hay? Today we’ll look at some real examples to see if we can learn which strategies to mimic and which to avoid.

CSS / 8 Apr 2011

6 Useful CSS Button Recipes You Can Copy & Paste

CSS3 is completely changing the game for creating buttons on the web. Techniques that were once only possible with images are now easily executable with just a few lines of code. For this post we custom built six attractively styled CSS buttons for you to copy and paste right into your projects, zero attribution required.

As with anything good in CSS3, the buttons below work great in Webkit and Mozilla browsers, but various versions of IE will fall short.