Category: Tutorials

Sticky Fixed SideNav Layout with CSS

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site…
csshead 0 Comments

The 5-Minute CSS Mobile Makeover

More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you […]
csshead 0 Comments

Cross-browser drop shadows using pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser? One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring […]
csshead 0 Comments

CSS Opacity That Doesn’t Affect Child Elements

This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But it could come in handy in a rare case, depending […]
csshead 0 Comments

Animated Navigation using jQuery and CSS

How to create an animated navigation menu using jQuery & CSS. Fancy but a very simple technique! The good thing about this technique is that it degrades gracefully and is still accessible even if javascript is turned off…
csshead 0 Comments

Date Display Technique with Sprites

A great tutorial explaining how you can use a single image sprite and some clever CSS to replace HTML date fields with fancy images…
csshead 0 Comments

Reinventing a Drop Down with CSS and jQuery

The standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can only contain simple text. This tutorial shows how to replace a dropdown with a custom control using CSS and jQuery…
csshead 0 Comments

Creatively Display Client Testimonials Using CSS

Display your client testimonials in a creative way, something a little more interesting than just a paragraph of text with their name. Display the testimonial copy within large quotes, and then a picture of the client below the copy. In effect, there are 3 columns, two thin sides with the quotes in them, and the […]
csshead 0 Comments

Display Text Blocks Over Image

How to display an absolutely positioned transparent caption over an image using just CSS and HTML…
csshead 0 Comments

Taming CSS Selectors

From Nicole’s presentation at the CSS Summit. This is brand new research regarding efficient CSS selector design. Practicing the rules outlined here will make your CSS lean, your site fast, and your maintenance minimal. A beautiful combination for people concerned with building performance into their sites…
csshead 0 Comments
« Previous Page — Next Page »