CSSer课堂

我们是师徒六人组,以Design, CSS, JS, web标准化为爱好。


Magic Photo Frame 神奇创意相框

神奇创意相框! 是的,主要利用position的relative, absolute, z-index属性。结合Photo Frame(相框)的不规则性,来“裁剪”出具有不同Magic(神奇?)的相框效果。
先看例一,如果让Photo Frame(相框)遮罩目标的相片?

提示:你可以先修改部分代码再运行。

在这里,主要应用magic1的背景图片,结合具有相对定位元素的em,再加上z-index。使得em中的背景可以遮罩在相片之上。

接着,我们需要修饰下,希望鼠标浮动的时候会产生提示效果的文字,并且结合半透明的css参数

filter:alpha(opacity=70); /* for ie */
-moz-opacity: 0.7; /* for ff */
opacity: 0.7; /* for other */

使得鼠标浮动到照片上,出现遮罩效果,并且出现提示文字。再次看例子:

提示:你可以先修改部分代码再运行。

怎么样,效果是不是不错呢?既然不错的效果,顺便发挥下思维方向,扩散思维模式。再次做跟多的例子:

提示:你可以先修改部分代码再运行。

嗯,看到例子,你想说写什么呢? 创意,在于思考与练习中产生,就这样。