仓酷云

标题: 来谈谈：利用box-shadow、border-radius和transition制造分歧的图片作风 [打印本页]

作者: 变相怪杰 时间: 2015-1-15 23:13
标题: 来谈谈：利用box-shadow、border-radius和transition制造分歧的图片作风
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
破洛洛文章简介：一些下流的CSS3图片款式.
译自：CSS3ImageStyles
中文：CSS3图片款式
请尊敬版权，转载请说明来历，多谢～～
间接在图片元素上间接使用CSS3insetbox-shadow或border-radius时，扫瞄器其实不能完善的衬着它们。不外，假如把这个图片用作背景图，你就能够能够给它增加任何款式了，扫瞄器也会很好地衬着。DarcyClarke和我做了一个复杂的教程，解说怎样利用jQuery来静态地制造完善的圆角图片。明天我将重温这个主题然后向你展现利用background-image的办法能够完成几效果。我将向你展现怎样利用box-shadow、border-radius和transition来创作分歧的图片作风。

先看下demo
成绩(见demo)

看一下demo，请注重在第一行的图片中利用了border-radius和insetbox-shadow。Firefox会间接在图片元素上衬着border-radius，但不会衬着insetbox-shadow。chrome/safari则二者都不衬着。

办理计划

要让border-radius和insetbox-shadow一般事情，办理计划就是将实践图片变作background-image.

静态办法

要想静态完成，能够复杂的利用jQuery为每一个图片元素表面包一个背景图片。上面的jQuery代码会将一切图片表面包一个span标签然后将图片用作其背景图片(jQuery代码由DarcyClarke编写)。

12345678910111213

复制代码

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>

复制代码

输入

下面的剧本将会输入上面的HTML代码：

复制代码

<spanclass="image-wrap"style="position:relative;display:inline-block;background:url(image.jpg)no-repeatcentercenter;width:150px;height:150px;"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>1

复制代码

剪贴画作风(见demo)

一样只是insetbox-shadow，我可让它看起来像剪贴画。

CSS

123456789

复制代码

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>3

复制代码

变形和发光(见demo)

这个例子中，我为图片外容器增添了变形。mou搜索引擎优化ver的时分，它将从圆角外形变成圆形，然后增添了发光效果。发光效果经由过程多重box-shadow完成。

CSS

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>4

复制代码

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>5

复制代码

发光遮罩(见demo)

发光突变遮罩是经由过程:after伪元素完成的。。。

CSS

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>6

复制代码

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>7

复制代码

倒影(见demo)

这个例子中，我将遮罩突变挪动究竟部，因而它就成了倒影。。。

CSS

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>8

复制代码

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>9

复制代码

光芒和倒影(见demo)

这个例子中，我同时利用了:before和:after伪元从来完成带倒影的光芒效果。

CSS

1230

复制代码

1231

复制代码

胶带作风(见demo)

这里利用了:after伪元从来在图片顶部完成了胶带作风的突变。

CSS

1232

复制代码

1233

复制代码

变形和着色(见demo)

鄙人面的这个例子中，我用了:after元从来在mou搜索引擎优化ver的时分增加发光突变。

CSS

1234

复制代码

1235

复制代码

成仙边沿的圆形(见demo)

发散突变也能够用作遮罩层来完成圆形成仙效果。
[attach]292016[/attach]
CSS

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("img").load(function(){$(this).wrap(function(){return<spanclass="image-wrap+$(this).attr(class)+"style="position:relative;display:inline-block;background:url(+$(this).attr(src)+)no-repeatcentercenter;width:+$(this).width()+px;height:+$(this).height()+px;"/>;});$(this).css("opacity","0");});});</script>4

复制代码

1237

复制代码

扫瞄器撑持

本文的办法能够在撑持border-radius、box-shadow、:before和:after伪元素的扫瞄器上，好比Chrome/Safari/Firefox等，而在一些掉队的扫瞄器好比IE9(包含IE9)则不克不及完整撑持——IE6/7/8没有任何体现，IE9会有一般的圆角。
发扬你的制造力

正如你看到的，你几近可使用:before和:after伪元素完成任何效果。假如你有效CSS3完成更多的创企图片效果，接待经由过程批评与人人分享。
PS,本文中利用:before/:after来完成伪元素，实在我更倡议利用双冒号来完成，固然单冒号有更多的扫瞄器撑持，可是关于这些CSS3完成的效果来讲，双冒号更平安一些。
</p>
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 第二个灵魂 时间: 2015-1-17 20:50
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 简单生活 时间: 2015-1-23 05:45
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 冷月葬花魂 时间: 2015-1-31 15:37
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 愤怒的大鸟 时间: 2015-2-6 21:01
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 若天明 时间: 2015-2-18 19:44
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 莫相离 时间: 2015-3-6 10:39
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 小魔女 时间: 2015-3-13 00:34
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 只想知道 时间: 2015-3-20 08:25
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

欢迎光临仓酷云 (http://ckuyun.com/)