Search Results For: images

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.

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.

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.

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.

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.

Graphics / 7 Apr 2011

A Complete Beginner’s Guide to Masking in Photoshop

Several years ago a friend of mine asked me to teach him how masks work in Photoshop. This is my incredibly late response.

We’ll go over the basics of what masks are, what they’re used for and how wielding them properly will take your Photoshop skills to an entirely new level.

Inspiration / 1 Apr 2011

20 Great Sign Up Form Examples to Learn From

Sign up forms come in many different shapes and sizes. Some are a single field, others are a multi-step process that stretch over several screens.

Today we’ll take a look at 20 attractive and functional forms to see if we can find any useful ideas that you can apply the next time you’re building a sign up form.

Business / 25 Feb 2011

10 Expert Tips for Selling Your Designs on Etsy

Etsy is a community that fascinates me. Thinking it was limited to scrapbooks and crafts I paid little attention to the site for years, but recently I discovered that there’s a lot more to this group than meets the eye. It turns out there are several very talented designers on Etsy making a decent amount of cash selling stock designs.

Today we’re going to take a closer look at some of the successful sellers of graphic design templates on Etsy to see if we can glean any trends and tips from them.