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.
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.
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!
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?
Today we’re going to code up a work around that allows us to achieve this very trick without an ounce of JavaScript or extra files. Let’s see how it works.
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.
Most typefaces have more than just 52 letters – 26 uppercase and 26 lowercase. They also contain an assortment of alternate characters that can help add flair and interest to your typography.
These special characters have been around since the beginning of type. Renowned typographer Johannes Gutenberg even used them in printing early copies of the Bible.
I love getting paid, but I hate invoicing. It can be tedious, time consuming and even frustrating if you don’t have a good system in place. Long have I searched in vain for the perfect invoicing app that has the features I need without costing me a fortune.
Good news: I finally found it. Invoiceable is everything I’ve ever wanted in an invoicing app. It’s easy to use, the invoices are highly customizable and the service is free. Sounds too good to be true right? Read on to learn more.
Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.
Along the way, we’ll see how to use before and after to build the cards with minimal markup. Let’s get started!
Sharing is an integral part of the web experience and designers are always looking for new and interesting ways to highlight or show off the sharing portion of their pages.
Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own. Let’s jump in and see how it works.
Emmet, formerly Zen Coding, is one of the most downright practical and productive text editor plugins that you will ever see. With its ability to instantly expand simple abbreviations into complex code snippets, Emmet makes you feel like a powerful coding wizard with the world at your fingertips.
Today we’re going to dive into seven awesome tips to help you become a true Emmet pro.
Recently, we took a close look at Easel, a web-based site builder that leverages Twitter Bootstrap. Today we’re following that up with a tour of a very similar tool: Divshot.
With Divshot, you can quickly and easily build clean, responsive web page layouts using a combination of visual tools and hand coding. It’s a really slick tool and I think you’re going to enjoy using it.
This tutorial is yet another fun CSS project that helps you build something that you may have thought was only possible with JavaScript. We’re going to create a modal window that can be shown and hidden with a click that’s powered by a CSS checkbox.
To sweeten the deal, we’re also going to use a media query to ensure that the modal screen adapts well to smaller screen sizes. Let’s jump in and see how it all works!