博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS实现的图片遮罩等滑动门

Posted on 2008-12-16 09:44  sunjie  阅读(629)  评论(0编辑  收藏  举报
1、Style Your Image Links


2、Soft Edge Technique Soft Edges and Opacity Gradients for Images



3、Custom Double Solid Borders for Images

4、Resizing Thumbnails Using Overflow Property (Cross browser solution)


Reflex.js

This javascript enables you to add a cover flow effect to any image on your web page. You can add reflection, tilt angles and also borders to your images. The results look like this:-

Reflex Image


Curl.js

This is an unobtrusive javascript to add page curl effect to your images and works on all the major web browsers. It can also produce the curl on mouseover where it animates the effect. Here is what it can accomplish:-

Curl Image

 

Edge.js

This javascript can help you in adding nifty edges to your images. You can even mask a second transparent image to generate some nice looking eye candy. I was able to make the script do this:-

Edge Image

 


Corner.js

This javascript lets you add effects to your image corners like rounded corners, shadow (both inner and outer), shading etc. This is what can be done using this javascript :-

Corner Image


Slided.js

You can add slide frames to your images by using this javascript in your web pages. I am sure it can be useful to some people. This is what I came up with:-

Slided Image


Glossy.js

Add a glossy effect to your images to make them stand out. This javascript also allows to add corners, shading and shadow. Here is my result:-

Glossy Image


Filmed.js

This javascript allows you to add film strips around your images. You can also add shadow and shine to your film strip edges. This is what it looks like:-

Filmed Image


Loupe.js

Did you ever want to add a lens to your page which will let you zoom into the images. This script will let you do that and much more using two versions of your image. Here is a preview:-

Loupe Image


Instant.js

This javascript lets you add an instant picture effect to your images. You can add border, tilt and shadow to give your images that photo effect which you always wanted. Here is a sample:-

Instant Image


Bevel.js

This javascript simulates a whole bunch of effects! It allows you to add bevels with glow, shading and shine to your images. Here is the javascript in action:-

Bevel Image