Articles Archive

cssimagehovers-f

10 Easy Image Hover Effects You Can Copy and Paste

screenshot

Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.

Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.

August 16th, 2013 Posted in CSS
featured-image-rss-jquery-reader

Build an Automated RSS Feed List With jQuery

preview tutorial rss feed reader jquery google api

The typical process of creating a dynamic feed listing requires some type of backend language. Obviously this can work out fine if you are familiar with Rails or PHP, but I want to present a method for pulling RSS feeds via jQuery. The problem is accessing Ajax requests from an external server and then converting this XML information to something a bit easier to read.

We will be focusing on the Google Feed API which is a lot easier than it looks. There are a number of custom possibilities to play with the options and access other alternative themes. All we need to pull is the first page of the feed item results, along with each title and the URL link. Once you have this script working it is very easy to customize the layout and even include a bit of content from the feed! Check out my sample demo below to get an idea of what we will be creating.

August 13th, 2013 Posted in JavaScript
8 Tips for Print Designers Switching to Web & Digital Design

8 Tips for Print Designers Switching to Web & Digital Design

screenshot

More designers are working across platforms these days, switching back and forth between print and digital projects. Although much of the theory is the same, in practice there are a lot of technical differences when it comes to working on something that will be printed versus a website. It takes a specific set of knowledge and skills to work effectively and efficiently in both environments.

But it is possible. Here we share eight tips for print designers making the switch to digital projects. (And I can vouch for every single tip as a designer who has made the switch.)

August 12th, 2013 Posted in Graphics
Printing-lede

10 Printing Terms You Need to Know

print-cmyk

More and more designers these days are working in a variety of mediums — both digital and print. But it can take a different set of specifications to put together a successful project for each. Print design has its own jargon.

Understanding how printing works (and how to speak the language of printers) is important for any designer. Don’t think this applies to you because most of your business is web-based? Consider this: At some point a client will ask for print components to go with the website, whether they are business cards or posters or just a great handout for presentations. Knowing the printing basics and terminology will help you bridge the gap. Here are ten key terms you need to know.

August 7th, 2013 Posted in Business
featured-image-wordpress-plugins-listing

40 Fantastic Open Source WordPress Plugins

2013 collection new wordpress plugins

There is an ever-growing library of plugins to be found in the official WordPress directory. These plugins are all free to download and many have also been submitted into Github as open source. It can be fun prowling the Newest and Recently Updated plugins to look for any gems. There are already so many solutions to various problems, but finding new stuff is always fun.

I have put together 40 new WordPress plugins for managing bits of functionality in your website. These are all free to download and you can even install them right from your WP Admin Plugins menu. Granted some of these examples may not prove useful to everyone. But it is encouraging to see lots of creativity from WordPress developers, along with the openness of sharing their efforts with the community.

August 5th, 2013 Posted in Web Standards
hiremecard-f

Code an Awesome Hire Me Card With Your Gravatar

screenshot

It’s been a while since we polished our HTML and CSS skills with a fun little demo, let’s end that streak with a project that’s both super attractive and super practical.

Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. Along the way we’ll learn a bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.

August 2nd, 2013 Posted in CSS
videogame-featured

15 Delightful, Immersive Video Game Website Designs

True gamers don’t just want to enjoy only the game’s experience; they want to know who makes the game, the video game company history, and the inspiration behind a video game. With the video game’s creativity and art comes an inspired art on it’s own: the video game website.

Video game websites are often unique and creative — rich with graphics, sliders, images, videos, leader boards and more. They also have to give the first impression for a game, as a video game website generally launches a while before the game is released. Let’s look at some of the best designed and developed video game websites created over the past couple of years.

July 31st, 2013 Posted in Inspiration
pastel-00

Current Color Trends: Muted Pastels

screenshot

Of late, you may have noticed a crop of new site designs have a softer and lighter look. After all the rainbow brights and even neon or fluorescent hues that have been so popular of late, it seems that some designers are taking a more subtle approach by using lighter or muted colors.

Although the same basic treatments are still being utilized — like colorized photography or color blocking — the new hues are making for a more refined and understated variation on these themes. Today we’re going to delve into this trend a little more, and explore various design examples and approaches.

July 30th, 2013 Posted in Graphics
portfoliomistakes-0

6 Portfolio Design Mistakes That Drive Me Nuts

screenshot

Your public portfolio is one of the most important things you’ll ever design. It presents you to the world and, if you’re a freelancer, tends to play a major role in whether or not people choose to hire you.

Because of my role as the editor of Design Shack, I’ve viewed a ton of online portfolios and today I’d like to walk through some of the weaknesses I see time and time again. Read on to see if you’ve made some of these mistakes.

July 26th, 2013 Posted in Business
Create a Simple jQuery Image Lightbox Gallery

Create a Simple jQuery Image Lightbox Gallery

css3 blog thumbnail gallery lightbox effect

When building your own WordPress theme, there are a number of items to consider. One such page element is a dynamic image gallery, either using a lightbox or some type of sliding panel. Both of these user interfaces mesh nicely into the content of an article. Since they can both work on typical websites it is nice to have the code ready for use in any other blog theme.

For this tutorial I want to focus on using the lightbox effect with a plugin called jQuery lightBox. This is very easy to setup and get customized on your own website. Granted there are a few awkward fixes within the CSS, but overall the plugin works perfectly. There are even some alternate parameters where you can specify properties like the animation speed or background opacity.

July 24th, 2013 Posted in JavaScript
Subscribe
Membership