Saturday, June 6, 2009

46 CSS-Techniques for Designer, Couldn’t Live Without


1.
CSS Bar Graphs (CSS For Bar Graphs)

2. Alphabetical Properties
I don't know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find. Here's an example:
body {
background:#fdfdfd;
color:#333;
font-size:1em;
line-height:1.4;
margin:0;
padding:0;
}
3. EM calculations

Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules:
html { font-size:100.01%; }
body { font-size:1em; }
The explanation for this comes from "CSS: Getting Into Good Coding Habits:"
This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
Point taken, moving on. I like to keep my body copy at 1em for the main content; this fits the default text sizing that users have in their viewing agent. All browsers convert relative EM sizes to pixel sizes, and most users have browser defaults at 16px. Something I have been doing recently is actually calculating EM font size throughout my design to this base of 16px. Because browsers have to round fractional EM sizes to whole pixel values, it's very important to really think about what the final pixel value will be. In my most recent text-sizing work, I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px. Note that I avoid going lower than 12px for default sizing at all costs; anything smaller than that is too small for me to read and I would be a hypocrite if I expected others to read that.

4. How to Create a Block Hover Effect for a List of Links

5. Sliding Photograph Galleries

An accordion effect; hovering over an image expands it.

Stu Nicholls: CSSplay- Sliding Photograph Galleries

6. 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.

  • 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

7. Collapsing Tables: An Example

8. Adam’s Radio & Checkbox Customisation Method

9. CSS Image Replacement

10. CSS Photo Zoom

Uses a single image and adjustment of the background-position attribute.

SimpleBits - CSS Photo Zoom

11. Content Overlay with CSS

When you hover over the image, the container div is shown with more text.

Snook.ca -  Content Overlay with CSS

12. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

13. Advanced CSS Menu

A creative and complex navigation scheme.

Advanced CSS Menu


14. Filtering for Old Browsers

To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands. One example would be max-width… a layout with a fluid width and pixel max-width is just plain fluid in IE 6, and therefore doesn't work at all. Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result:
div#container { width:900px; }

html>body div#container {
width:auto;
max-width:900px;
}
/* This overrides the previous declaration
in new browsers only,
IE 6 simply ignores it. */

15. Lightbox Slides

Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.

Bite Size Standards - Supercharge your image borders

16. Drop shadow on an image

Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".

Drop shadow on an image

17. Cross Browser Multi-Page Photograph Gallery

Hovering over the tabs changes the category, while hovering over an image enlarges it.

Stu Nicholls: CSSplay - Cross Browser Multi Page Photograph Gallery


18. CSS gallery layout—smells like a table

Mimics a table layout, but uses lists. The gallery is also fluid width.

Dnevnik eklektika - CSS gallery layout—smells like a table

19. Sticky Footer

A static footer with very little XHTML required.

Sticky Footer

20. whatever: hover

A navigation menu that mimics Window’s Start menu.

Peterned - whatever: hover

21. CSS-Only Accordion Effect

An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.

The CSS-Only Accordion Effect - CSSnewbie

22. Scalable CSS Buttons Using PNG and Background Colors

A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.

Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen

23. Pushbutton Links

links that are styled to look like buttons without using images.

MikeCherim.com - Pushbutton Links

24. Scrollable Table with Fixed Header

The table’s captions stay put which is excellent for long tables.

Scrollable Table with Fixed Header

25. A CSS styled table version 2

A beautifully styled, table with semantic mark-up - uses a background image.

A CSS styled table version 2

26. PNG Overlay

Another way to add flare to images (rounds the corners and adds a border and drop shadow).

PNG Overlay

27. Showing Hyperlink Cues with CSS

Simple tutorial on adding icons to different types of links.

Ask the CSS Guy - Showing Hyperlink Cues with CSS

28. Simple Rounded Corner CSS Boxes

Uses only one image and very few lines of code and mark-up.

MODx Content Management System - Simple Rounded Corner CSS Boxes

29. Sitemap Celebration

Tree-like navigation using nested lists, great for sitemap pages.

Zab Design - Sitemap Celebration

30. Easy cross-browser transparency

Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

Bite Size Standards - Easy cross-browser transparency

31. Curved corners 2

Fluid width and height divs with rounded corners.

HTML Dog - Curved corners 2

32. Creating a graph using percentage background images

List items

  • styled into bar graphs.

    Creating a Graph using Percentage Background

    33. CSS Bar Graphs: Examples

    3 bar graph examples - "Basic CSS Bar Graph", "Complex CSS Bar Graph", and "Vertical CSS Bar Graph" using div’s and definition list tags.

    CSS Bar Graphs: Example

    34. Animated Rollover Arrow

    The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

    Animated Rollover Arrow

    35. A CSS-based Form Template

    Showcases an accessible web form.

    Nidahas - Forms markup and CSS - Revisite

    36. CSS Image Text Wrap

    Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

    CSS Image Text Wrap

    37. Before your very eyes - a fade-in image

    A demo using opacity and a single image that gradually fades in to cover the text.

    CSS Play - Before your very eyes - a fade-in image

    38. Pure CSS Pop-ups

    A pop-up technique that works even in IE 5 Mac.

    39. CSS Gradient Text Effect

    Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.

    40. CSS Image Map

    41. CSS Image Pop-Up

    42. CSS Tricks for Custom Bullets


    43. Dynamically Highlighted Columns In Tables

    Crazy Egg has an incredibly intuitive design for their signup page. Instead of making the user click to another page to start the signup process, Crazy Egg uses CSS and a touch of javascript to make the table column neatly slide to the left while a signup form appears in place of the other columns. Quite handy if you're wanting the visitor to instantly start the signup process, all within a very tiny space.

    While tables are something that modern designers typically like to avoid, they can be perfect for organizing lots of data. Pricing tables are a great place to utilize tables, and making them more interesting certainly helps the user experience.

    Ask the CSS guy has an excellent tutorial that replicates the code, complete with a live example and downloadable source.


    44. Dynamic Variables in CSS

    CSS isn't really that powerful of a language by itself. Sure, you can do tons of nifty tricks with it, but it's still only a stylistic language. You can't store variables or do other things that dynamic languages like PHP can do. However, you can use dynamic languages to output CSS, giving them dynamic variables.

    By using the header() function in PHP, it's possible to have PHP print out CSS. You can use different arrays to show different bits of CSS styles. For example, here is a default color scheme in CSS, output in PHP:


    view plaincopy to clipboardprint?


    $persistent = array(

    'bgmast' => 'bbd9ee',

    'fgmast' => '4d4d4d',

    'bgmenu' => 'e7e4d3',

    'fgmenu' => '444',

    'bgcont' => 'fff',

    'fgcont' => '444' );


    $persistent = array( 'bgmast' => 'bbd9ee', 'fgmast' => '4d4d4d', 'bgmenu' => 'e7e4d3', 'fgmenu' => '444', 'bgcont' => 'fff', 'fgcont' => '444' );

    And here is an alternate color scheme:

    view plaincopy to clipboardprint?


    $alternate1 = array(

    'bgmast' => 'ddb',

    'fgmast' => '000',

    'bgmenu' => 'aa7',

    'fgmenu' => 'fff',

    'bgcont' => 'fff',

    'fgcont' => '333'

    );


    $alternate1 = array( 'bgmast' => 'ddb', 'fgmast' => '000', 'bgmenu' => 'aa7', 'fgmenu' => 'fff', 'bgcont' => 'fff', 'fgcont' => '333' );

    If you wanted to show an alternate color scheme you'd simply toggle between $persistent and $alternate1 to swap the styles.


    45. Perfect Page-Printing with CSS

    An overlooked feature on the website is the "print this article" link. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.

    David Walsh has some excellent code that shows the CSS that is needed to make effective page breaks in printing pages.

    view plaincopy to clipboardprint?

    @media all

    {

    .page-break { display:none; }

    }

    @media print

    {

    .page-break { display:block; page-break-before:always; }

    }

    @media all { .page-break { display:none; } } @media print { .page-break { display:block; page-break-before:always; } }

    And then to use the code, just add

  • henever you need to break the page, like so:
  • view plaincopy to clipboardprint?

    Page Title

    Also gives some great examples of places to add printing breaks in the page.

    Between page sections (h2 or h3 tags, depending on your site format)

    Between the end of an article and subsequent comments / trackbacks

    Between longs blocks of content


    46. How to Style an A to Z Index with CSS -

    How to style an A to Z index that doesn’t break when you increase text size.

    CSS Candy Menu
  • Labels: ,



    2 Comments:

    At June 6, 2009 at 11:11 PM , Blogger Kalpna said...

    fantastic........ i like this website..............


    it helps my web designing.

     
    At June 8, 2009 at 9:39 AM , Blogger Dheeraj said...

    nice collections, keep it men........!!!!!!!!!!!!!

     

    Post a Comment

    Subscribe to Post Comments [Atom]

    << Home