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:
The explanation for this comes from "CSS: Getting Into Good Coding Habits:"html { font-size:100.01%; }
body { font-size:1em; }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.
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
10. CSS Photo Zoom
Uses a single image and adjustment of the background-position attribute.
11. Content Overlay with CSS
When you hover over the image, the container div is shown with more text.
12. Hoverbox Image Gallery
A pure css-based gallery; hovering over an image enlarges it.
13. Advanced CSS Menu
A creative and complex navigation scheme.
- 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.
16. Drop shadow on an image
Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".
17. Cross Browser Multi-Page Photograph Gallery
Hovering over the tabs changes the category, while hovering over an image enlarges it.
18. CSS gallery layout—smells like a table
Mimics a table layout, but uses lists. The gallery is also fluid width.
19. Sticky Footer
A static footer with very little XHTML required.
20. whatever: hover
A navigation menu that mimics Window’s Start menu.
21. CSS-Only Accordion Effect
An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.
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.
23. Pushbutton Links
links that are styled to look like buttons without using images.
24. Scrollable Table with Fixed Header
The table’s captions stay put which is excellent for long tables.
A beautifully styled, table with semantic mark-up - uses a background image.
26. PNG Overlay
Another way to add flare to images (rounds the corners and adds a border and drop shadow).
27. Showing Hyperlink Cues with CSS
Simple tutorial on adding icons to different types of links.
28. Simple Rounded Corner CSS Boxes
Uses only one image and very few lines of code and mark-up.
29. Sitemap Celebration
Tree-like navigation using nested lists, great for sitemap pages.
30. Easy cross-browser transparency
Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).
31. Curved corners 2
Fluid width and height divs with rounded corners.
32. Creating a graph using percentage background images
List items
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.
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.
35. A CSS-based Form Template
Showcases an accessible web form.
36. CSS Image Text Wrap
Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.
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.
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
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
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
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.
2 Comments:
fantastic........ i like this website..............
it helps my web designing.
nice collections, keep it men........!!!!!!!!!!!!!
Post a Comment
Subscribe to Post Comments [Atom]
<< Home