7

21 CSS Tricks You Should Know

Posted August 12th, 2009 in Web Design and tagged , by Mike Wagan

Web designers rely heavily on the use of CSS or Cascading Style Sheets to set the design specifications of each element on a website. CSS has made web designing a lot easier and more flexible. Here are 21 CSS Tricks that you can use in your future web design projects:

1. Cross Browser CSS SlideShow

cross-browser-slide-show

Amazing demonstration of how to create a cross browser image gallery  using just CSS

2. CSS Based Image Maps

CSS-only-image-map

This tutorial demonstrates a crazy way to create an image map using just CSS.

3. No JavaScript LightBox Using CSS

Css-Only-LightBox

Create a lighbox using just CSS with no JavaScript required.

4. Image Replacement for Buttons

image-replacement-submit-button

Replace the submit buttons with images using CSS, degrades back to submit button if CSS is disabled.

5. Animated Navigation Menu using CSS

animated-navigation-menu

Amazing tutorial on how to create an animated navigation menu using just CSS.

6. Tree Like Navigation Using CSS

tree-like-navigation

Create a tree like navigation from nested lists of links. Very useful for creating sitemaps.

7. CSS Gradient Text Effect

css-gradient-effect

Create eye-catching titles with nice gradient effect using just CSS.

8. CSS Menu List Design

CSS-Menu-List

Very easy to understand tutorial on how to create a menu list using either CSS border-style or background-image property.

9. Creating Liquid Layouts With Negative Margins

liquid-web-layout-cssAmazing way to create a liquid layout using negative margins

10. Making Your Footer Stay Put With CSS

This might occur to you some time when a content page has not enough content to fill the page, so footer also moves up due to this. This tutorial shows you how to deal with this and make footer stay at bottom even when content is not enough.

11. Simple, Scalable CSS Based BreadCrumbs

scalable-breadcrumb-navigation

Create a nice scalable breadcrumb navigation

12. Snazzy Pullquotes for Your Blog

pullquotes-css

Make the blockquotes in your content or blog posts standout from rest of content. Very useful to highlight major points in long content pages.

13. CSS Stacked Bar Graphs

stacked-bar-graph

Display graphs on your website using just CSS without any JavaScript or other heavy plugins.

14. How To Create a Block Hover Effect For List of Links

Block-Hover-CSS-List

15. Multi-Column Lists

Multi-Column-Lists

This article shows all possible ways you can use to stack up an unordered list into multiple columns.

16. Date Display Technique with Sprites

Display-Date-Using-Sprites

If you have ever visited Learning jQuery then you might have noticed the awesome date display next to each blog post. This tutorial will show you how to achieve that using CSS Sprites.

17. Date Badges and Comment Bubbles for your Blog

Display-Date-Using-Sprites

Display date and comments on your blog posts in a nice way that takes less space.

18. How To Build a CSS Image Viewer The Clever Way

CSS-Image-viewer

Create a nice image viewer using CSS that will work even if user has disabled flash and JavaScript in the browser.

19. Creating a CSS Image Preloader

Use the CSS background-image property to preload images without any javascript required.

20. Fade Out The Bottom of Pages

Fade-Out-Bottom

This tutorial shows you how to make page content fade away into the bottom of the page just like the fortuito.us blog.

21.  Creative and Cool Uses of the CSS Border Property

CSS-Border-Property

This article shows you how the CSS Border property can be used to achieve some cool effects. You’ll be surprised to know how cool the CSS Border property is.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • Netvibes
  • NewsVine
  • Ping.fm
  • Reddit
  • RSS
  • Slashdot
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Buzz
  • BlinkList

Related posts:

  1. Create multiple-step forms using CCK Fieldgroups in Drupal Lately I’ve been working on a Drupal project, and one aspect in our priority list is the user-friendliness for the...
  2. 10 Plugins to Make WordPress a Great CMS I’ve been using the blogging platform, WordPress, as a CMS for the company I’m working with right now because I...
  3. Allow Div Layers to Float over Flash, Youtube or Vimeo Videos For web designers, its always a constant struggle to get those flash, youtube, or vimeo videos tuck under divs where...
  4. Quick and Easy Javascript Form Validation If you need a quick javascript form validation script, you can use this one from Javascript-coder.com. Its pretty easy to...
  5. 28 HTML5 Features, Tips, and Techniques you Must Know I am excited about learning HTML5 and probably soon enough, this technology will change the Internet’s face completely – forget...

7 Responses so far.

  1. Tom Orzell says:

    There is certainly certainly a lot to know about this. I feel you created some very good factors in Functions also.

  2. That was a brilliant read,I just subscribed to your rss.

  3. alexa says:

    always seem to keep comin back here to read, think this calls for a bookmark. thanks much

  4. Hi, I found this blog on Bing and just wanted to say thanks for adding this list. I would have to agree with it, thanks again!

  5. You have pointed out some highly interesting SEM tips that my partner and I were talking about, relieved I ran into it, so thank you for that.

  6. Woohoo… This post is precisely what I have been surfing for. What length of time did it take to compose this? Thank you a bucket load for this terrific advice.

  7. I accompanied my brother yesterday at the jewellery store to purchase a ring for his lover. They had been together for 10 years and he thought it is time to pop out the question. He had been thinking about this for months now and he is so excited to get married.

Leave a Reply