Topic Archives

CSS Tutorials

Get step-by-step guidance on basics, advanced techniques, and best practices, to help you master CSS and create dynamic, engaging websites.

View all CSS content

How to Build a Stylish CSS3 Search Box

How to Build a Stylish CSS3 Search Box

CSS

A search box is probably one of the most common UI elements around, and I think there is no need to explain its purpose anymore. Whether it’s about a website…

The Cross Browser CSS Styling Tips You Need to Know

The Cross Browser CSS Styling Tips You Need to Know

CSS

The web could exist without the use of CSS, but it would never be as accessible or look as great without. As web designers, the main goal is to provide…

How to Animate a CSS-Only Hamburger Menu and Icons

How to Animate a CSS-Only Hamburger Menu and Icons

CSS

Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button….

How to Create Responsive Off-Screen Menus with CSS3

How to Create Responsive Off-Screen Menus with CSS3

CSS

In this tutorial, we’re going to create some slide and push menus using CSS3 transitions. The menus will be hidden off screen at first, and will transition into view when…

How to Create a Simple Parallax Scrolling Effect

How to Create a Simple Parallax Scrolling Effect

CSS

In this tutorial, we take a look at a beautiful parallax scrolling effect in the simplest of ways, with stationary backgrounds and scrolling content.

The Big CSS Media Query Mistake

The Big CSS Media Query Mistake

CSS

Do you ever feel weird when everyone around you is doing something you would ordinarily think is wrong [or not quite ideal at the very least], but somehow no one…

Creating Native HTML5 Dialog Windows

Creating Native HTML5 Dialog Windows

CSS

The dialog window is one of the most commonly used elements in a website’s user interface design. It is used for multiple purposes, including displaying notifications, carrying a subscription form,…

Naming Conventions for Sizes in Scalable CSS

Naming Conventions for Sizes in Scalable CSS

CSS

In this article, I’ll be exploring how naming conventions can be used to represent sizes in scalable CSS. So, what do I mean by this? One aspect of scalable CSS…

How to Build a Fully Functional CSS3-Only Content Slider

How to Build a Fully Functional CSS3-Only Content Slider

CSS

Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button….

Writing Good CSS

Writing Good CSS

CSS

I’m always trying to learn new things. However, I also try to learn ways to improve the way I already do things. Both at my full-time gig and for client…

Common CSS Errors Made by Beginners

Common CSS Errors Made by Beginners

CSS

With so many new web designers and committing themselves to creating standards-valid website with deep stylesheet formatting, a few patterns have emerged in terms of common errors. Whether it’s the…

Classic Digg-Style Radio Buttons with CSS and jQuery

Classic Digg-Style Radio Buttons with CSS and jQuery

CSS / JavaScript

I’m sure many Internet users can remember the old days when Digg was a booming social news community. Although the company has fallen fast off the tracks in recent years,…

Coding the Digg v4 Layout with HTML5 and CSS3

Coding the Digg v4 Layout with HTML5 and CSS3

CSS

The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on…

HTML & CSS Blog Layout – Theme Implementation for WordPress

HTML & CSS Blog Layout – Theme Implementation for WordPress

CSS / WordPress

In this tutorial, I’ll teach you how to adapt a simple HTML blog layout into a WordPress theme. We’ll be using this static page as starting point. Grab the code…

How to Write More Efficient CSS to Speed up Your Site

How to Write More Efficient CSS to Speed up Your Site

CSS

As part of my new position as CTO of Speckyboy, I’ve decided to write a series of articles that will help you understand what it takes to make a truly…

An Introduction to HTML Prototyping

An Introduction to HTML Prototyping

UI Design
12