« Matt Cutts On Securing WP
Library Agnostic LightBox »

101 CSS Techniques Of All Time- Part 1

101 CSS Techniques Of All Time- Part 1
101 CSS Techniques designers use all the time to make their web pages just look right.

CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right.

Today we are presenting a round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy!

Update:

You can check Part2 here.

CSS Sprites

CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

CSS Sprites

CSS Rounded Corners

Rounded corners is one of the most popular and frequently requested CSS techniques. There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. Here are easy ways to achieve this effect.

Image Replacements Technique

Thierry Image Placement: Image Placement vs. Image Replacement (FIR)

This technique is mostly for headlines by using CSS to replace normal HTML text, with a background image in order to achieve a particular look.Several different image replacement methods have been proposed, each with their pros and cons.

when you need image replacement you can check the Gilder/Levin Method as described by Dave Shea or, if the replaced text is linked and CSS support for IE/Mac is required, the Gilder Levin Ryznar Jacoubsen IR method.

image replacement

Sliding Doors

Sliding Doors of CSS introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup.Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images.

sliding doors

Sliding Doors” Box– Rounded Corners for All- The goal of this technique was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. While making sure they could resize while keeping their backgrounds intact.

sliding doors

Image Text Wrap Technique

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?

This technique allows you to wrap around image text flow control to emulate magazine style page layouts.

Image Text Wrap

Equal Height Technique

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. So how can we make all columns appear to be the same height? Several techniques was introduced to solve this issue.

  • Faux Columns- The simple secret is to use a vertically tiled background image to create the illusion of colored columns.
  • Equal Height Columns - revisited- A method to make all columns appear to be the same height but without the need for faux column style background images.
  • Equal height boxes with CSS- The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells. The basic XHTML structure looks like this:

    Here is the CSS used to make this structure behave like a table:

         .equal {            display:table;    }    .row {            display:table-row;    }    .row div {            display:table-cell;    }

Turning A List Into A Navigation bar

Why use a list? Because a navigation bar, or menu, is a list of links. The most semantic way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

Making Headlines With CSS

Headers in Web pages–marked up with h1, h2, h3, h4, h5, or h6 elements–help the reader determine the purpose of sections in content. If your header is visually stimulating, the odds are better that the section will capture your reader’s eye.

heading

  • Heading Style Gallery- Want something a little more stylish for your content headings (h1,h2,…) than a different font or color? Try one of the heading styles listed here to spruce up your content.
  • Typography for Headlines- Improve the typography in your headlines by being more creative, give them more ‘pop’, that sort of thing.
  • Making Headlines With CSS- With a dash of design, we can utilize CSS to stylize those Web page headers to catch the reader’s eye and encourage them to read on.

CSS Shadows Techniques

A technique to build flexible CSS drop shadows that can be applied to arbitrary block elements that can expand as the content of the block changes shape.

  • CSS Drop Shadows-Build flexible CSS drop shadows that can be applied to arbitrary block elements that can expand as the content of the block changes shape.

    CSS Shadows

  • Fun with Drop Shadows- Most of the existing techniques use negative margins, while this one is a really simple version wich uses relative positioning.
  • Drop Shadows By Phil Baines- This set of tests are based on an article found on A List Apart’s technique, but with less CSS coding.
  • CSS Drop Shadows II: Fuzzy Shadows- Picking up where Part I left off, in Part II designer Sergio Villarreal takes his standards-compliant drop-shadow to the next level by producing warm and fuzzy shadows.

    CSS Shadows

  • An improved CSS shadow technique- A very robust and easy-to-use technique for applying snazzy looking shadows using only Web technology and a few little image elements prepared beforehand.

CSS Transparency

One of the trickiest things to control, in a CSS-driven design, is the transparency of the interaction between foreground and background content.Below is a list of the best examples of the differing transparency approaches possible with CSS.

  • Partial Opacity- Placing text over an image can sometimes make it difficult to read, but with Stu Nicholls’s methods the background for the text is made ‘opaque’ using various methods of opacity (including css3) and the black text is then quite readable.

    CSS Transparency

  • Cross-Browser Variable Opacity with PNG- How to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.
  • Two Techniques for CSS Transparency

Various Link Techniques

  • Showing Hyperlink Cues with CSS- The CSS Guy shows us how to get the little icons next to hyperlinks that signify if that link will take you offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7, Firefox, and Safari.
  • The ways to style visited Links- CSS offers various possibilities to make links more usable and preserve text readability at the same time. We need to differentiate visited and unvisited links, but we must keep text scannable and readable.
  • Link Thumbnail- Shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page.
  • Iconize Textlinks with CSS- If you’re looking for more icons to implement, Alex provides a nice start.

7 Advanced CSS Menu, A Great Roundup!!
New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you […]

New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you a fresh round-up of 7 Advanced CSS Menus techniques, that might be useful for you in your next design project.


1) Advanced CSS Menu

Check out this great CSS advanced menu tutorial by Nick La, showing us how to slice up the menu design step by step and putting them together with CSS.
Note: there is an IE6 bug where the hover effect doesn’t display properly. To fix that, you can use Javascript to specify the to display block on mouseover.

Demo

2) Advanced CSS Menu Trick

A new concept by altering the non navigation items on hover state which will focus the user’s attention on the item they have hovered on, and create a new look and feel for the site overall. Works perfectly in any modern browser, yet still be fully functional in your older version of IE as well.

Demo

3) Son of Suckerfish Dropdowns

The Famous Suckerfish Dropdowns is now back and they’re more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.

Demo

4) Tree Frog slide and fly menu

This menu has a vertical sliding first sub level then two flyout levels and demonstrates how it is possible to change positional styling from ‘absolute’ and off screen to ’static’ and expanding the menu vertically.

5) Mike’s Experiment

A useful CSS technique for providing pop-up descriptive content by extending nav menus with tool-tips, alerts, notifications, or additional info.

6) 8 web menus you can’t miss

8 Great CSS based Menus, you just can’t miss.

7) Drop Down Tabs

Drop Down Tabs comes with 5 sleek examples to let you quickly pick your favourite to use on your site. Customize each example’s CSS to modify the look as desired. We got you covered alright!

You can find great resources at the links below:

HTML 5 Spec Released, Warts and All
The W3C released the first draft of the HTML5 spec yesterday — warts and all. As far as technical specifications go, it’s pretty interesting reading. A large part of what is interesting is what is new in everybody’s favourite markup language: header, nav, article, dialog, section, aside, and footer elements The canvas element (shameless plug: there’s an awesome […]

The W3C released the first draft of the HTML5 spec yesterday — warts and all. As far as technical specifications go, it’s pretty interesting reading.

A large part of what is interesting is what is new in everybody’s favourite markup language:

  • header, nav, article, dialog, section, aside, and footer elements
  • The canvas element (shameless plug: there’s an awesome chapter about it in our latest book)
  • Inclusion of the video and audio elements
  • Support for persistent client-side data storage
  • Support for users to edit documents and parts of documents interactively
  • RSS feeds as part of the page’s markup

It’s just as interesting noting what’s missing:

  • frame and frameset (hooray!)
  • font (cheer!)
  • applet, among others

Rumour has it that one faction of the HTML working group were lobbying hard to have the meta tag removed in order to prevent Microsoft from hijacking it, but they were clearly unsuccessful.

Check out the list of differences between HTML4 and HTML5 if you find the thought of tackling the entire spec a little daunting.

For me, what really makes the spec an entertaining read, however, is the fact that so many of the review comments for areas that are still problematic, are still in place. There is obviously still a fair amount of work ahead, though, if the following is anything to go by:

html5-spec-security.png

This article provided by sitepoint.com.


This entry was posted on Sunday, January 27th, 2008 at 1:00 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.