50 Free CSS-Only Icons for Website Graphics

by Jake Rocheleau
on May 22, 2014

in Graphic Design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn’t have much practical use but it’s definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source

Read More

Tips for Building Clean Website PSD Mockups in Photoshop

by Jake Rocheleau
on May 12, 2014

in Photoshop

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

If you’re a web or graphics designer then you should know about that oh-so-adorable design suite Adobe Photoshop. Folks who have been using the software for years can vouch that it’s quite difficult to master. There are so many techniques for creating UI elements, website layouts, icons, and other digital graphics. It’s crucial that you learn how to organize these assets into a complete, unified design.

adobe photoshop blue icon app redesign

In this article I’d like to cover methods of organizing PSD files in Photoshop. Whether you’re a one-man team or working in a large studio setting, it always helps to stay organized. These tips may appear like common-sense ideas but so many designers overlook this systematic and detailed approach.

Read More

Building a Mega-Navigation Menu with CSS3 and jQuery

by Jake Rocheleau
on May 5, 2014

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Larger navigation menus will typically include separate dropdown lists to appear on hover. But for some websites it can be necessary to expand this dropdown across the entire page. Designers might call this a “mega navigation” for its influence over the whole menu.

In this tutorial I want to demonstrate a method of creating one unified mega navigation menu. There are many different techniques you can use to achieve a similar effect. I’ll be using jQuery to embed sub-navigation content into a dropdown mega nav box. Take a look at my live demo to see the final design.

mega navigation menu howto tutorial preview jquery

Read More

30 Opera Browser Extensions for Web Designers and Developers

by Jake Rocheleau
on April 28, 2014

in design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

The Opera web browser is a great choice for reliable cross-platform Internet surfing. It’s typically quicker than Firefox and offers a longer development history than Chrome. The Opera team works hard to create an expansive browser with plenty of extra features to keep users coming back. And it’s fair to say the people who use Opera definitely enjoy the program.

This gallery is dedicated to extensions for Opera which can help you design, take apart, reconstruct, or analyze websites. Both designers and developers will find something useful in this collection. Whether you’re a long-time user or might just try Opera on a whim, this post has an extension for every web enthusiast.

Validator

w3c validator html opera browser extension

Read More
Page 3 of 4112345...Last »