CSS Overlay Techniques
By Sara Soueidan on
There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to expl ...
CSS
Troubleshooting CSS
By Hugo Giraudel on
Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. ...
Creating Nestable Dynamic Grids
By Larry Botha on
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports. ...
Defending Presentational Class Names
By Philip Walton on
Should presentational class names always be avoided or is that too dogmatic? As web development changes, perhaps it's time to reexamine the issue. ...
Understanding the CSS Clip Property
By Hugo Giraudel on
Learn about the underused and often misunderstood CSS clip property and understand how to apply it for some nifty effects. ...
Learning Principles for Improving Your CSS
By Hugo Giraudel on
This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience. ...
Kick-Start Your Project: A Collection of Handy CSS Snippets
By Hugo Giraudel on
Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show y ...
Basic Ready-to-Use CSS Styles
By Hugo Giraudel on
This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles an ...
CSS Buttons with Pseudo-elements
By Sergio Camalich on
In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. ...
Slopy Elements with CSS3
By Mary Lou on
It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected ...
HTML Only – The Significance of Proper Markup in Web Design
By Patrick Cox on
This article is about the importance of proper markup in a website. A great way to make sure your site works properly is to write your HTML first before you jump int ...
Beautiful Photo Stack Gallery with jQuery and CSS3
By Mary Lou on
In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images o ...
Beautiful Background Image Navigation with jQuery
By Mary Lou on
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the s ...
A Fresh Bottom Slide Out Menu with jQuery
By Mary Lou on
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from th ...
Photo Zoom Out Effect with jQuery
By Mary Lou on
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an ...
Our 10 Absolute Favorite Smashing Magazine Articles
By Mary Lou on
Some years back when I was starting to study I began to regularly read news and blogs on the web. It was a very exciting time back then since there were many “ ...
Neat Photo Hover Effect with CSS Sprites and jQuery
By cody on
Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the i ...
Fresh Set of CSS-only Menus
By Mary Lou on
Here is a set of fresh CSS-only menus for your website – no images, no JavaScript. The markup for the menus is always the same and I used 12 different styleshe ...
CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
By Mary Lou on
Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-style” don’t really go ...
Self-resizing Navigation Menu with jQuery
By Mary Lou on
Today I am going to share a nice CSS only (with some jQuery) navigation menu that adapts the size of its list items automatically. Sometimes you need to reuse a menu ...
Creating a Rotating Billboard System with jQuery and CSS
By Mary Lou on
Currently we are in the “hey, let’s do that flash thing in jQuery”-mood and so we came up with another idea: a rotating billboard system. In this t ...
Day and Night: Creating a Scenery Animation with jQuery and CSS
By Mary Lou on
In today’s tutorial I am going to show you, how to create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements wit ...
Fixed Fade Out Menu: A CSS and jQuery Tutorial
By Mary Lou on
Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea. The aim ...
Beautiful Slide Out Navigation Revised
By Mary Lou on
After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan ...