Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work.
We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in!February 22nd, 2013 Posted in 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
When presenting data in a grid you often lose the ability to include extra information. Aside from appending dynamic menus or hover effects there is very little room to include metadata on each item. I want to use this tutorial as a thought process into the user experience of image thumbnail grids.
We will create a small flyout menu holding additional information on the image. This includes the image name, original source URL, and author URL. The beauty of this example is that we will be creating the dynamic effect using only CSS3 properties. Mostly all standards-compliant browsers will support dynamic CSS3 animations and these look fantastic! But even without animations, the flyout content will still work properly and degrade naturally for an all-around enjoyable user experience.February 4th, 2013 Posted in CSS
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
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
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
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 CSS
Design is a complex beast, web design doubly so. There’s a lot more than visual harmony and balance to consider, it’s often the case that you have to dig in and perform some real life mathematics (gasp!).
Oddly enough, I love thinking about this stuff, so much so that I actually build my own calculators rather than use the tools available from other developers. Today I’ll show you how and why to build your own design calculators so that you can master the numbers behind your designs.January 14th, 2013 Posted in CSS
CSS can pull of a lot of really great image tricks: size manipulation, desaturation, even blur. One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS. Could you?
Converting Photoshop mockups to live web code is an extremely common practice among web designers. We’ve all done it a million times by hand, so it’s pretty exciting when we start seeing solutions pop up that will help us automate this process.
The latest version of Creative Cloud Photoshop CS6 has a built-in feature for converting Photoshop styles to CSS, and if you need another solution, there are two solid extensions that you can check out. Today we’ll compare the results of all three methods: Photoshop, CSS3Ps and CSSHat to see which is best.January 3rd, 2013 Posted in CSS