仓酷云

标题: 来一发CSS3计划网页案例:大度的网页图片计划CSS实例 [打印本页]

作者: 变相怪杰 时间: 2015-1-15 23:12
标题: 来一发CSS3计划网页案例:大度的网页图片计划CSS实例
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
破洛洛文章简介：明天我将重温这个主题然后向你展现利用background-image的办法能够完成几效果。我将向你展现怎样利用box-shadow、border-radius和transition来创作分歧的图片作风。
译自：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完成。
[attach]292012[/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

复制代码

<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)

发散突变也能够用作遮罩层来完成圆形成仙效果。

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>
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 飘灵儿 时间: 2015-1-17 20:45
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

作者: 小女巫 时间: 2015-2-1 17:21
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 变相怪杰 时间: 2015-2-7 13:50
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 只想知道 时间: 2015-2-22 14:45
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 冷月葬花魂 时间: 2015-3-7 02:37
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 简单生活 时间: 2015-3-14 11:07
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

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