html里ps图片怎么做成3d效果这个效果

来源：蜘蛛抓取(WebSpider) 时间：2016-12-09 15:21 标签： html5 做成的效果图
HTML代码制作水中倒影--代码制作图片对称效果
我的图书馆
HTML代码制作水中倒影--代码制作图片对称效果
HTML代码制作水中倒影&&
&P align=center&&IMG style="WIDTH: 420 HEIGHT: 280px" height=280 src="图片地址" width=420&&/IMG&&BR&&IMG style="FILTER: wave(strength=5,freq=15,phase=0,lightstrength=10) blur() flipv(); WIDTH: 420 HEIGHT: 200px" height=200 src="图片地址" width=420&&/P&&
&&&&&&&&& 说明:
&&&&&& strength=5,这数值是倒影边缘齿的深度。freq=15,这数值是倒影的行数phase=0,lightstrength=20这数值是水纹线条的加深度. 两个图片是一个地址. 换成自己的图片地址.
用代码制作图片对称的效果
1、左右对称代码
&&P align=center&
&IMG style="FILTER: FlipH"src="图片地址"
width=223 height=138&&&&&
&IMG src="图片地址"width=223 height=138&&/P&
2、上下对称代码
&&P align=center&
&IMG src="图片地址"width=300 height=300&&BR&&BR& &IMG style="FILTER: FlipV"src="图片地址"
width=300 height=300&&/P&
width=223(300) height=138(300)是原图片的宽 和 高 。
宽和高可以自定义。
发表评论：
馆藏&10746
TA的推荐TA的最新馆藏[转]&[转]&网页效果图如何转成HTML代码 | 网页设计学
Hello！欢迎来到网页设计学！
当前位置：
& 网页效果图如何转成HTML代码
.................................................................................................................................................................
鉴于很多网页设计新手不太了解网页设计从效果图到编码的过程，今天我们制作了一个教程主要以导航栏为例讲解一下。注意在学习之前，还必须懂得一些最基础的HTML和CSS代码，首先要在Photoshop中制作导航栏效果图。
一、创建导航栏默认效果图
新建photoshop文件，大小为800*600px，背景色填充为#2c465a，新建图层选择矩形工具绘制一个矩形，宽为226px，高为265px，填充色#1d2e3c。
选择矩形工具，圆角半径为5.
新建图层绘制5个圆角矩形（按钮），左右边距为10px，上下边距为6px。
为按钮添加图层样式：
得到的效果如图：
为按钮添加文字：
为了使文字更突出，可以为文字添加阴影效果：
二、创建鼠标经过效果图
复制之前所创建的图层，修改复制的按钮的图层样式，把颜色叠加里面的颜色改为白色。
三。编码之前的准备
到这里效果图已经完成，接下来要准备编码了，编码之前要先处理一下图片，该导航编码的方式我们称为“图像精灵”。图像精灵就是单个图像的集合。我们可以只保存一张图片，然后在css中通过改变参数多次调用，这样会降低服务器的请求次数，节省你的网站带宽。
先隐藏导航按钮的背景，选择移动工具（V），把右边的导航按钮向左移动，注意不要重叠。
选择矩形选框工具（M），选中所有导航按钮，边缘对齐。
隐藏背景图层，选择文件&保存为web所用格式，格式为png-24。
导航栏的HTML文件，新建一个HTML文件，先添加导航文字，&ul&是一个项目列表标记。
&ul id="simple-navigation"&
&li class="homepage"&&a href="www.link-goes-here"&Homepage&/a&&/li&
&li class="portfolio"&&a href="www.link-goes-here"&Portfolio&/a&&/li&
&li class="meet-our-team"&&a href="www.link-goes-here"&Meet Our Team&/a&&/li&
&li class="what-we-do"&&a href="www.link-goes-here"&What We Do&/a&&/li&
&li class="get-in-touch"&&a href="www.link-goes-here"&Get In Touch&/a&&/li&
然后创建CSS文件，
body { background-color: #2c465a; }
ul#simple-navigation { }
#simple-navigation li { }
#simple-navigation li a { }
得到的效果如图所示：
添加CSS样式：
ul#simple-navigation {
width: 206
background-color: #1d2e3c;
padding: 20
#simple-navigation li {
list-style-type:
height: 46
width: 206
margin-bottom: 4
#simple-navigation li a {
height: 46
width: 206
text-indent: -9999
首先要定义每个按钮的宽度为206px，背景色为#1d2e3c。
添加背景图片：
li.homepage {
background-position:
background-repeat: no-
background-image: url(navigation-sprite.png);
li.portfolio {
background-position: left -50
background-repeat: no-
background-image: url(navigation-sprite.png);
li.meet-our-team {
background-position: left -100
background-repeat: no-
background-image: url(navigation-sprite.png);
li.what-we-do {
background-position: left -150
background-repeat: no-
background-image: url(navigation-sprite.png);
li.get-in-touch {
background-position:
background-repeat: no-
background-image: url(navigation-sprite.png);
为列表&li&中每一个项目添加图片。代码中background position代表背景图片的位置，No-Repeat表示图片不重复。背景位置参考下图：
添加鼠标经过效果：
#simple-navigation li a:hover {
background-repeat: no-
background-image: url(navigation-sprite.png);
li.homepage a:hover {
background-position:
li.portfolio a:hover {
background-position: right -50
li.meet-our-team a:hover {
background-position: right -100
li.what-we-do a:hover {
background-position: right -150
li.get-in-touch a:hover {
background-position:
...........................................................................................................................................................
网页设计软件下载Adobe
最新文章 New Ariticles
2016年一月
2015年十二月
2015年十一月
2015年十月
2015年九月
2015年八月
2015年七月
2015年六月
2015年五月
2015年四月
2015年三月
2015年二月
2015年一月
2014年十二月
2014年十一月
2014年十月
2014年九月
2014年八月
2014年七月
2014年三月
2014年二月
2014年一月
友情链接：
专业网页设计师交流平台 设计交流QQ群：
.All Rights Reserved.
&nbsp&nbsp&nbsp&nbsp&nbsp冀ICP备号-1&nbsp&nbsp3788人阅读
&title&test&/title&
&input type=&button& value=&此按钮是超链接& onclick=&window.location='你要链接的地址'&&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：83936次
排名：千里之外
原创：20篇
转载：53篇
(3)(3)(2)(8)(1)(1)(3)(2)(2)(3)(1)(4)(1)(6)(2)(1)(2)(1)(1)(1)(3)(4)(3)(11)(4)

我要回帖

更多关于 html5 做成的效果图 的文章

 

随机推荐