Joshua Johnson
Equal parts editor, writer, designer, & photographer. Hit me up on Twitter, read my Mac tutorials or check out my photos.
Code a Fantastic Animated Circular Thumbnail Gallery With CSS
Thumbnail galleries are a constant source of fascination for me. There’s so much more fun to be had than simply creating a grid of squares and calling it a day. Especially since CSS3 gives us so many powerful new tools to work with.
Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.
February 15th, 2013 Posted in CSS
How to Use Centered Alignments: Tips and Examples
Today we’re going to go back to basics with a “design 101″ discussion on alignments. Centered alignments are an easy place to go wrong and if you don’t know how to wield them properly, the result is a very poorly structured page.
Join us as we take a look at why centered alignments tend to be weak, where you should avoid them and how you should be using them.
February 8th, 2013 Posted in Layouts
Gridpak Revisited: A Closer Look at the Responsive Grid Generator
One of the most interesting and useful responsive grid generators around is a tool called Gridpak, which allows you to use a simple and fun UI to create fluid, media-query driven grids. We reviewed Gridpak around a year ago and came to the conclusion that, although useful, it came up short in the area of user friendliness when it came to implementing the code.
The developers have made some progress in this area and I think it’s about time we took another look. Join us as we dive into how Gridpak has improved its code offering and structure to provide a better, more streamlined experience for users.
February 1st, 2013 Posted in CSS
20 Fresh Sites With Amazing Scrolling Effects
Scrolling effects are becoming more and more popular as a means of increasing interaction and user interest. Through clever background positioning, animations and a little JavaScript, you can bring your page to life in ways that will surprise and grab your users’ attention.
There’s a wide variety of tactics that you can use to create a unique scrolling experience on your site. Join us as we take a look at twenty fresh sites and how they use scrolling effects in different ways.
January 30th, 2013 Posted in Inspiration
Web Design Critique #96: SuccessInc Drupal Theme
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is SuccessInc, a Drupal theme from More Than (just) Themes. Let’s jump in and see what we think!
January 25th, 2013 Posted in Critique
Check Out the New American Airlines Logo
American Airlines has had the same logo for forty-five years. That’s definitely a pretty impressive stretch! They’ve decided to hang up their Helvetica though and look to not only a new typeface, but a new eagle and even a new livery design.
Read on to see the logic behind the new design and whether or not I think it’s another chapter in a long line of recent brand redesigns gone bad.
January 23rd, 2013 Posted in Graphics
Build a Fun True or False Quiz With CSS
I’m constantly surprised by what you can achieve using only HTML, CSS and a little ingenuity. I love to think outside the box and attempt creative experiments just to see if I can pull it off.
Today’s random challenge is to create a fun little true/false quiz. Questions will be presented to the user and answers will be revealed only on click. To make the magic happen, we’ll turn to some pretty crazy methods and use features like active, focus and even tabindex! You’re bound to learn some quirky stuff so hit the jump and follow along.
January 21st, 2013 Posted in CSS
Web Design Critique #95: WPMU DEV
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is WPMU DEV, a marketplace for WordPress Themes and Plugins. Let’s jump in and see what we think!
January 18th, 2013 Posted in Critique
6 Awesome Emmet CSS Time-Saving Tips
Emmet is one of the most useful text editor plugins that you’ll ever come across for developers. It has the seemingly magic ability to turn a tiny bit of work into a ton of code, which can save you an incredible amount of time and effort in the long run.
Previously, we took a look at some of the best features of Emmet from an HTML perspective, today we’re going to follow that up with some tips for how Emmet can improve your CSS workflow.
January 17th, 2013 Posted in CSS
Code a Spinning Circular Menu With CSS
Don’t be a square, break outside your boring box and try on a circle for size. Today we’re going to build a circular navigation menu that spins to different points as the user hovers over an anchor.
Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works. It’s a fun challenge and there’s a lot to learn, let’s get started!
January 16th, 2013 Posted in CSSSubscribe
Membership
