Innovative and experimental CSS Special Effects

CSS does not always mean rigor and standards. In this case, you will see 21 interesting and experimental CSS technologies using examples and Demos. Some of the technologies and examples discussed in these examples may not have been tested, some browsers may not be able to render, and some may have been validated for standard design and development. Most of the examples here are just for the purpose of exploration.

Transparent CSS menu drop-down transparent CSS menu drop-down effect

This effect shows how to design an advanced CSS drop-down menu that supports transparent effects (JavaScript is required to support ie6png transparency)

 

Return of the image maps image Heat Zone Return Prompt window
You will see a great way to use CSS to define the image Heat Zone to prompt the window Effect

CSS 3D puzzlecss 3D puzzles

This 3d puzzle is written in pure CSS (it must have taken a lot of time). When you open the page and move the mouse, you must move the mouse on a coherent road and move it to the end of the road, small talents will follow, the mouse will be gray screen in the water, move the mouse to start again

CSS Scrolling Image mapcss Scrolling Image hot zone

This effect uses a panoramic photo. Click the white box area and the corresponding large image will appear on the right side.

CSS decorative gallerycss decoration gallery makes the image list display more personalized

Demo: CSS decorative Gallery
Source Code address:
Http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

Playing cards with csscss playing cards

This effect uses a special HTML language to represent playing cards and CSS to define positions.


Demo: playing cards

Homer CSS Homa CSS

In this effect, Rom án Cort és uses HTML symbols and CSS to draw the portrait of the famous American cartoon image "Simpson ".

CSS house

The designer used Div and standard CSS to create a house.


Demo: CSS house

"Secret message" with CSS positioning and transparency

CSS location and transparency of confidential information (Firefox can preview the effect, and IE is invalid)


Demo: secret message

How to create light-weight drop shadows

How to make a light shadow effect and use PNG images for shadow is required for IE6. js support


Demo: Light-weight drop shadows

Multi-position shadow boxing

Multi-faceted shadow effect this is another effect for adding shadows to elements (slices ).

Complexspiralcss translucent Effect

DVD recorder remote

DVD remote control panel made by CSS

Drawing the line

Ststu Nicholls uses CSS to create a pen. Move the mouse over the pen and draw lines.

CSS text shadows text shadow effect

A pure CSS method applies to drop-down shadow text. It is not a good method to overlap text.

CSS flashy links

CSS implementation is boring (there should be many better results than this)

Pop map pop-up prompt

Pure CSS popups

Pure CSS Prompt window Effect

CSS sticky footer

Can absorb the Bottom Effect of the browser, no matter how high the browser window, always at the bottom

Here's a footer that is fixed at the bottom of the web page, regardless of height.

Scalable star

The variable size changes the size of the browser's preview text, and the stars also change.

CSS: menu descriptions

The menu prompts implemented by CSS describe the text Effect

CSS gradients demo

CSS color gradient effect


Demo: CSS gradients demo

Scaled background image

The effect of CSS-implemented page background images following browser window size changes


Demo: scaled background image

CSS vertical bar graphs

CSS bar chart Effect

CSS gradient text Effect

CSS implements text gradient texture Effect