30 excellent CSS techniques and examples by bin go 2008-12-04

Here you can find a lot of different technologies, such as: Picture collection, shadow effects, expandable buttons, menus, etc... These instances are implemented using pure CSS and HTML. Click the title of each instance to be redirected to the relevant tutorials or instructions page for that technology instance, and click the picture for each instance to jump directly to the demo page of the instance.

1.Hoverbox Picture Collection

A pure CSS-based picture collection, the mouse hover thumbnail will show the magnification effect.

2. Advanced CSS Menu

A very creative and complex CSS navigation scheme.

3. Slide the album

An album of accordion effects that stretches pictures on hover.

4.Lightbox Slideshow

Part of the article titled "Supercharge Your Image borders" shows how to use CSS styles to make a picture more interesting.

5. Shadow effect of the picture

A discussion article on the picture Effect demo on the A List apart "CSS Drop Shadows".

6. Cross-browser multi-page albums

Hover tab to change category, hover thumbnail to display enlarged image.

7.CSS Photo Zoom

Use simple picture and background-position properties to mediate.

8.CSS gallery layout-smells like a table

Mimics the layout of a table, but uses a list. The atlas is a flow width.

9.Sticky Footer

Only a static footer with very little XHTML is used.

10.whatever:hover

A CSS navigation menu that mimics the Windows Start menu.

11. Pure CSS Accordion effect

Use div and: hover pseudo-class accordion effect, this effect can be displayed vertically or horizontally.

12. Expandable buttons with PNG and background colors

13.Pushbutton Links

A link looks like a button without using a picture.

14. Scrollable table with fixed header

The title of the table is fixed by the excellent long form.

15.CSS Content Masking

When you hover over a picture, the div container displays more text.

16.CSS Style table version 2

A table that uses a background image and is very beautiful and is semantically labeled.

17.PNG Masking

Another way to add rounded corners to a picture. (Fillet, Border, shadow)

18. Use CSS to add hints to hyperlinks

A simple tutorial on adding icons to different types of links.

19. Simple CSS rounded border

Only one picture and a few lines of code and tags are available.

20.Sitemap Celebration

Tree navigation using nested lists is ideal for site map pages.

21. Simple cross-browser slideshow

Do not use JavaScript for transparency techniques (but at the expense of not conforming to XHTML validation)

22. Fillet 2

A rounded div with a flow span and height.

23. Create a chart with a percentage of the background picture

The line chart uses the list <li>.

24.CSS Bar Chart: Example

3 Examples of histogram: "Basic CSS Histogram", "complex CSS histogram", "vertical css histogram" using div and list tags.

25. Dynamic Flip Simple Header

The arrows move smoothly with the mouse, without using the slightest JavaScript and GIF animations.

26. CSS-based form templates

27.CSS picture Text combining tips

A blank div is used to allow the text to be displayed around the image in the background image.

28. Use CSS to implement a fade-in picture

This example uses transparency settings and a simple picture to gradually fade the image over the text.

29. Pure CSS pop-up effect

A pop-up technique that works on IE5 (MAC).

30. Using CSS to achieve a text gradient effect

Use a background image overlay, and an empty span tag, as well as a Position:absolute declaration to implement the text's gradient effect.

You can also refer to the following CSS tips related tutorials & resources:

Selected 15 Foreign CSS frameworks
Summary of the current comparison of CSS reset (reset) methods
"Recommended 20 websites that let you learn and master CSS"
The perfect way to vertically center using CSS
7 Principles for collating and optimizing CSS code
"10 css shorthand tips to keep you always on"
"300+jquery, CSS, MooTools and JS navigation menu Resources"

English Original: Exceptional CSS techniques and Examples
Reprint: Select 30 Excellent CSS techniques and examples (Storm Binbin)

30 excellent CSS techniques and examples by bin go 2008-12-04