神奇创意相框! 是的,主要利用position的relative, absolute, z-index属性。结合Photo Frame(相框)的不规则性,来“裁剪”出具有不同Magic(神奇?)的相框效果。 先看例一,如果让Photo Frame(相框)遮罩目标的相片?
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
在这里,主要应用magic1的背景图片,结合具有相对定位元素的em,再加上z-index。使得em中的背景可以遮罩在相片之上。
接着,我们需要修饰下,希望鼠标浮动的时候会产生提示效果的文字,并且结合半透明的css参数
filter:alpha(opacity=70); /* for ie */ -moz-opacity: 0.7; /* for ff */ opacity: 0.7; /* for other */
使得鼠标浮动到照片上,出现遮罩效果,并且出现提示文字。再次看例子:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
怎么样,效果是不是不错呢?既然不错的效果,顺便发挥下思维方向,扩散思维模式。再次做跟多的例子:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
嗯,看到例子,你想说写什么呢? 创意,在于思考与练习中产生,就这样。
经典论坛交流: http://bbs.blueidea.com/thread-2944647-1-1.html
本文链接:http://www.blueidea.com/tech/web/2009/7006.asp
出处:蓝色理想
责任编辑:bluehearts
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|