Tutorials

Most experienced front-end developers probably already have this as part of their coding toolbox, but did you know there are some powerful CSS selectors to target an empty element, elements of a specific type, or maybe any type of element? Older resources tend to shy away from using some of these tricks, however more and more we see that browsers are so fast, it doesn't matter nowadays. With that in mind, here are 10 handy selectors you can start using today (assuming you don't need support for ancient versions of IE, however, there are polyfills for that).

HTML5 adds a new feature to browsers which allows them to store a certain amount of data locally on someone's computer. This comes in handy with some of the recent "web apps" that might, for example, save your drafts or states even when disconnecting from the internet. This feature is a Javascript API known as localStorage, and in this tutorial, we'll be covering some of the basics of how it works.

Debugging your website doesn't have to be a tedious task of trial and error; every browser comes with some built-in developer tools that will let you inspect individual elements, live test CSS, or even go as far as helping you find different parts that can be furthered optimized! In this tutorial, we'll take a look at each browser's native tools and some basic tips on how to use them.

So you've been browsing the site, checking out all our cool menu styles and you've come across one that you'd love to add to your site. However, you're a bit confused since your site happens to be a Blogger page, and you're hesitant to mess with all that template code. No worries! We'll run down the simple steps in this tutorial to get you setup with a dropdown in no time.

Tables. Veteran developers may cringe upon hearing those words, remembering the times when the typical site layout was created using them. Perhaps it invokes the pains of theming your old Myspace page with nested tablet after table. Maybe you're a dedicated HTML e-mail maker, and you're so desensitized to tables that there's no more hope for you. Whatever it may be, there is still one thing tables excel at above all HTML elements: presenting tabular data.

Recently, the new Flat Accented Dropdown Menu was released. As a nice followup, we'll be explaining its creation process in this tutorial!

If you're a designer, you might be familiar with Photoshop's (or other drawing program) "drop shadow" layer property. It gives that layer a small shadow, creating the illusion of it floating on top of the canvas. On the web, there is a similar feature in CSS called a box-shadow. The basics of box-shadow will be explained below, and we'll see a few of the cool capabilities this CSS3 property allows us to do.

On larger site projects, you may run into a situation where you need a coherent set of buttons with different properties, be it in size, color, or both. This CSS button tutorial will use some simple classes to acheive this quite easily!

I am going to show you how to create a barebones CSS flyout menu. If you are looking for templates, check out our CSS Flyout Menus page. The following code is not meant to be a finished product for your website. Instead, I am simply trying to provide a robust starting point for designers to expand upon. The goal here is to create a structured yet flexible flyout menu that can be used in any design.

In this tutorial I will show you how to use one of our css drop down menus with Wordpress. This tutorial will not show you how to create a menu from scratch, but will walk you through the process of taking one of our menu themes and applying it to a menu that is built with Wordpress.

Note:
We used Wordpress 3.4.1 for this tutorial but it should work with any Wordpress 3 site.