CSS Tutorials

Use CSS3 to Create a Dynamic Stack of Index Cards
Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3. We're going to take a step into that direction and discover some of the possibilities CSS3 gives us.

Create a slick CSS-based Drop Down menu
Surfing the web one finds many different solutions for drop down menus, of which many involve or even solely depend on JavaScript. I would like to present another option which I personally find really cool because its easy to use and utilizes features within the HTML and CSS standards without any weird workarounds. The example in this article will render a simple horizontal menu with submenus that are displayed when you move the mouse over the menu .

A Cool CSS Technique
How to display a single icon from a gif image with multiple icons. This CSS technique can be found being used by the designers of Digg.com.

The Ultimate Guide to Typography
It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain "web safe" typefaces but that shouldn't decrease our creativity. Here are a few CSS tips for typography on the web.

Add an icon before or after a link
CSS has a matching syntax for selectors which makes it possible to match the filename extension at the end of an href. This makes it easy to add an icon which relates to the link before or after the text part of the link.

Change the mouse pointer cursor on a web page
In this blog post I will explain where to find and how to attach a mouse pointer cursor to a web page or html component.

Image watermark effect to protect your images
This is a very simple watermark effect made with CSS. This can be used to protect images on your website.

Image opacity effect with CSS and Java Script events
Create image opacity effect using CSS alpha filter and Java Script events. Use different syntaxes for different browsers.

Simple image frame border effect
In this post I will explain who to make a simple but nice image border frame effect with css.

Rounded corners box simple effect with photoshop
In this post I will show how to create rounded corners using background images created in Photoshop, one for each corner. This technique is very simple and is working in all the browsers.

Create button rollover effect
In this post I will show how to create easy cool rollover button effect which can be used for menu and navigations on your website.

Rounded corners textbox using photoshop
In this tutorial I will explain how to create custom made textbox using css and photoshop. The textbox will have rounded corners, colored border and search icon.

create website menus using free css menu builder
This lesson is about generating menus using the website: http://www.cssmenubuilder.com/. I am explaining how to use this website to generate cool horizontal and vertical menus without any knowledge of html and css and embed them into your website.

The Mysterious Pseudo Class
Pseudo classes are those things with colons in them, you know, like :hover or :link. They let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce a ton of new pseudo classes, and they're going to make our lives a lot easier (if you take browser compatibility out of the equation).

Make a Sprite Powered Menu
This tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It's a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you'll have some similar results.

CSS first-child and last-child selectors
The CSS selectors :first-child and :last-child are used to apply styling to the first and last child elements of the parent. :first-child is part of the CSS 2.1 specification and :last-child CSS 3 so support is slightly limited for :first-child and more limited for :last-child. A number of browsers also have issues applying the styling correctly after additional elements have been added dynamically.

Overlapping Tabs
Tabs are great They're user friendly because they're like the real world, and they can add a great 3D element to a design. Overlapping tabs present a special challenge to code, but with some careful planning and clever images, well have some nicely interactive tabs.

Create custom form button
This tutorial explains how to create custom web form button using CSS and the background image

Accessible Graphical Menus
When designing a web site, it's generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let's face it, though, sometimes that's not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here's a little trick that will give you the best of both worlds. We're going to build a graphically-based navigation menu out of an unordered list.

Layout and Presentation Tricks
Ever wondered how those snazzy presentation and layout tricks are achieved? HTML is certainly no longer the way to go (not to mention Javascript!), but what is the way to go? CSS is your answer. If you're not familiar with CSS yet, be sure to read Tara's excellent introductory tutorial which will soon fill you in on what you've been missing.