The longer a site has been around, the more content it tends to accumulate. As website operators, we walk a fine line: too much content on every page and your site will look cluttered. Too little, and users won’t be able to find all your website has to offer. A tabbed box is a nice bridge between the two extremes. It allows you to show off a large amount of content without cluttering up a lot of space. And this tabbed box has extra niceties that are sure to help your content get noticed…
Articles in the ‘Tutorials’ Category
-
Build a Tabbed Box with CSS and jQuery
Posted: 3 years ago in Tutorials
Read More: Build a Tabbed Box with CSS and jQuery
-
Learn CSS Positioning in Ten Steps: position static relative absolute float
Posted: 3 years ago in Tutorials
This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float…
Read More: Learn CSS Positioning in Ten Steps: position static relative absolute float
-
CSS Typography: Contrast Techniques, Tutorials and Best Practices
Posted: 3 years ago in Tutorials
The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. When chosen wisely and used carefully, it can be very effective to support the overall design. There are many outstanding examples of how we can do this, and here you will find some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites…
Read More: CSS Typography: Contrast Techniques, Tutorials and Best Practices
-
Specifics on CSS Specificity
Posted: 3 years ago in Tutorials
The best way to explain CSS specificity is to start with some examples. CSS specificity can get confusing. Here’s a closer look at how to calculate the actual specificity value to determine which selector takes precedence…
Read More: Specifics on CSS Specificity
-
Equal Height Columns with jQuery
Posted: 3 years ago in Tutorials
Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements…
Read More: Equal Height Columns with jQuery
-
Create an Advanced CSS Menu
Posted: 3 years ago in Tutorials
Read More: Create an Advanced CSS Menu
-
CSS image swap hover effect
Posted: 4 years ago in Tutorials
Describes how to switch a photo with a description when the mouse hovers over it. Uses mostly CSS and a bit of javascript to fix issues with Internet Explorer…
Read More: CSS image swap hover effect
-
A List Apart: CSS Sprites: Image Slicing
Posted: 4 years ago in Tutorials
The original, and probably still the best, article on replacing old-school image slicing and dicing with a nice CSS solution. Learn how to build a grid of images and then get each individual image out of the grid. You’ll then be able to store all your buttons, navigation items or whatever in a single master image file…
Read More: A List Apart: CSS Sprites: Image Slicing
-
Animated GIF For CSS Sprites
Posted: 4 years ago in Tutorials
Read More: Animated GIF For CSS Sprites
-
Using CSS and GIF’s to animate a menu
Posted: 4 years ago in Tutorials
Remember our good old friend the animated gif? There was a time when the ability to animate GIF’s made web sites a little more fun… or horribly obnoxious. It seems that no one really harnessed the power of animated GIFs, and today the only place they seem to be used are in banner advertisements when flash isn’t available.
One of the more powerful capabilities of CSS is the use of the :hover pseudo selector. It is one of the only abilities we have to alter the behavior of a website simply through XHML and CSS (and there is a debate if this even should be done, but this is more about capabilities rather than theoretical debates of what should/shouldn’t be done)…
Read More: Using CSS and GIF’s to animate a menu