推荐阅读
3DMAX制作时尚创意的个性展台效果
本篇教程，我要给大家讲解的就是如何利用3Ds max制作大师作品中的展台。首先我们先看下图中的这个展台框架。像这样镂空比较多的造型，最简便的方法就是结合贴图来制作。首先，我们需要制作一张贴图，如下：第二步，贴图制作好后，我们返回到max中，开始制作展台的外形，在前视图中我们创建一个平面，大家要是初学的话也可以根据我上面的参数来设定。第三步，打开材质编辑器(快捷键：M)，在不透明下添加我们制作好的贴图。 第四步，我们需要调整贴图大小。如图所示。
火山文字，PS软件制作火山熔岩文字图片设计教程
漂亮火山熔岩文字重点是纹理部分的制作，用到的滤镜比较多，自己需要细心一点，把岩石的纹理做出来，如果嫌麻烦可以去网上下载一些纹理素材，直接使用。 最终效果 一、photoshop制作文字效果之前，需要先制作一些纹理。新建一个1024 * 768像素的文件，新建一个图层，按字母键“D”把前背景颜色复位到默认的黑白，执行：滤镜 > 渲染 > 云彩，效果如下图。 二、执行：滤镜 > 像素化 > 点状化，大小设置为15，如图3，确定后按Ctrl + Shift + U 去色。然后执行：滤镜 > 模糊 > 高斯模糊，设置为8，效果如图5。 三、执行：滤镜 > 渲染 > 光照效果，只需要在面板的底部选择一个通道，然后把凸起的数值设置到最大，如图6，确定后按Ctrl + F 加强一次，效果如图7。
photoshop绘制Web2.0图标
我们在进行站点设计的过程中，经常需要使用图标表示诸如添加、删除和编辑之类的操作。在Web2.0时代，徽章和细致的3D效果越来越流行。本教程将告诉你如何简单的绘制出带有漂亮3D效果的按钮或图标。步骤1：创建一个新的文件，选择“椭圆形工具”（U），画一个圆形。将圆形填充上随便什么颜色，后面它将被图层样式覆盖。步骤2：双击圆形图层打开图层样式窗口，选择“渐变叠加”，使用蓝色和浅蓝色做渐变色，在“样式”下拉框中选择“径向”。最后参照下图为渐变叠加设置“角度”并添加“斜面和浮雕效果”。小窍门：将渐变叠加移动到圆形顶端：打开图层样式窗口，选中“渐变叠加”选项。按住按钮调整渐变。 步骤3：参照下图，复制圆形图层，并调整到合适大小。
低角度的倒影
低角度倒影 除了平视角度外，低视角下的光影世界亦不可错过。以下列两张照片为例，拍摄于机场航厦候机楼，由于当下我有相当足够的时间去观察环境与旅人动向，所以只要坐在椅子上设定好相机，接着等待理想元素入镜即可;至于图2则拍摄于莺歌陶瓷博物馆，由于馆内水流属于流动的活水，所以原本笔直的支柱在倒影下就会显得十分诡异，于是我便顺势利用翻转屏幕拍下了这张影像作品。 ▲Canon PowerShot G1 X, 光圈F5.0, 快门1/50秒, 单色效果, 自动白平衡, ISO 100, JPEG。 ▲Canon PowerShot G1 X, 光圈F5.6, 快门1/100秒, 单色效果, 自动白平衡, ISO 800, JPEG。 顺光、逆光 除了构图角度外，光源方向掌握亦十分重要。一般来说，粗略可分为顺光与逆光两种，顺光即是所谓的正面光(摄影者拍摄方向与光的照射方向一致)，由于光源覆盖面积较大且测光难度不高，所以是目前摄影初学者最容易掌握的用光环境，不过缺点是该光源反差较小，容易造成被摄物色彩趋于平淡且缺乏过渡层次，因此在拍摄时，我会建议读家可适时调整取景角度使被摄物处于半侧光状态，如此便能有效改善上述问题。 至于逆光，由于光源是从被摄物背面直接照射过来，所以拍摄对象在明亮的背景前会形成暗色剪影，尽管画面简洁但却拥有极佳的表现力，只不过在拍摄时最好积极使用遮光罩搭配，才能有效避免炫光问题的产生。
最新发布
CSS实现完美垂直居中
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。现在来几个例子：一、单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了优点：1. 同时支持块级和内联极元素2. 支持所有浏览器缺点：1. 只能显示一行2. IE中不支持<img>等的居中要注意的是：1. 使用相对高度定义你的 height 和 line-height2. 不想毁了你的布局的话，overflow: hidden 一定要为什么？请比较以下两个例子：上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。二、多行内容居中，且容器高度可变也很简单，给出一致的 padding-bottom 和 padding-top 就行优点：1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点：容器不能固定高度三、把容器当作表格单元CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
网页表单的Web标准解决方案
进入eYou.com后，马上就给新版的邮件界面转化成XHTML+CSS的工作，还好平时基本功还够扎实，有条不紊的干了下来。当然会遇到新的问题，比如，平时做网页，因为没有跟程序打过什么交道，较少使用表单。还好，世界还有Google，让我可以轻松应对新挑战。一些经验，写出来大家分享。 基于易用性（accesibility）的考虑，表单的标准写法应该在<form>和</form>之中包含fieldset和legend（说明），让用户明白该表单域的内容概要。简单的结构如下： 在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观，好办，在CSS中把fieldset的border设置为0，legend的display设置为 none就行了。 在绝大多数情况下，表单的布局分两列，左边是标记（label），右边是输入框(input type="text"...)。如此简单的两列布局，我强烈建议不要使用表格。参考http: //stylephreak.frogrun.com/uploads/source/cssform.php和http: //www.aplus.co.yu/css/forms/?css=1（绝对有价值的两个参考，你已经可以不必往下看了），我们发现，Web标准通用的解决方法是，为label和input type="text"...的外围加上一个div，并把把该div的display设置为block。把label设为float: left;（这也是要把div设置为display: block;的原因）之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是，固定label的宽度，然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是，使用单位em根据标记的最大字数来定宽度，不必辛苦测试px。 为了使我的阐述更容易理解，我简单写些代码： Chinaz~com XHTML：（部分） 中.国.站长站 <form> <fieldset> <legend>表单实例</lengend> <div><label for="name">姓名：</label><input type="text" id="name" /></div> <div><label for="etc">其他等等：</label><input type="text" id="etc" /></div> <div class="submit"><input type="submit" value="提交" /></div> </fieldset></form>CSS：（部分） Www.Chinaz.com
关于CSS实现自动换行的小技巧
css自动换行有什么技巧？大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; }或者 #wrap{word-break:break-all;width:200px;} <div id="wrap">ddd111111111111111111111111111111</div> 效果：可以实现换行 2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！ #wrap{white-space:normal; width:200px; overflow:auto;}或者#wrap{word-break:break-all;width:200px; overflow:auto; } <div id="wrap">ddd1111111111111111111111111111111111111111</div> 效果：容器正常，内容隐藏 对于table
用DIV+CSS编写出的网页中的圆角矩形
用CSS+DIV编写的实现在网页中显示圆角矩形的代码！希望对大家有用！谢谢支持！ <style>div.bg{background:#ffc20e;width:50%}b{display:block;}/*将所有B标签转成块级元素*/ Www~Chinaz~comdiv b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;}/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px，溢出部份隐藏,背景色同div.bg的背景色*/ div b.topb,div b.bottomb{ background-color:white}/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/ b.t1{margin:0 5px}/*标签margin值将决定溢出的多少值被隐藏*/b.t2{margin:0 3px}b.t3{margin:0 2px}b.t4{margin:0 1px;height:2px;} </style> <div align="center"><div class="bg">
清除浮动的最优方法
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。CSS代码ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}li{float:left;width:80px;height:80px;background-color:#83B1DF;}.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}.overflow{overflow:auto;zoom:1;background-color:#43FF73;}ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}li{float:left;width:80px;height:80px;background-color:#83B1DF;}.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}.overflow{overflow:auto;zoom:1;background-color:#43FF73;}HTML代码<div class="demo"><ul class="overflow"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="demo"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div>其中zoom是为了IE6准备的。完整的Demo注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。CSS代码
实用的CSS常见的问题和技巧总结
1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。如： 再如： 可以改写为： 3、明确定义单位，除非值为0忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”，但在css中应该给出一个准确的单位。如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。0值的大小都是相等的。注意：不要在数值和单位之间加空格。
解决div在firefox下高度自动适应问题
属性: overflow:hidden <div id="Box" style="width:100%;background-color:green;overflow:hidden ;"> <div id="left" style="float:left;background-color:#333333;width:100px">左左左左左左左左左左左左左左左左左左左左左左</div> <div id="right" style="float:left; ">右右</div> </div>
总结新手学CSS容易出现错误的内容
一些新手容易忽略或者出现错漏的地方。1.首先是对于布局标签的定义。有时候写好了css，但是反复调试总发现效果差强人意，有那么一块空白，挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里，有一些的默认属性值不一定是为空或零的。例如form,p，他们的margin默认值并不是0，所以在定义时定要多加注意。我们可以这样写来更加严谨的定义：* { margin:0;padding:0 } /*注释:定义所有的标签的margin和padding为0*/2.缩写和大小写问题css对于class和id是区分大小写的，所以当样式不生效的时候建议先检查一下大小写问题。我建议所有名称统一小写，当然你有自己的编码风格也可以用。例如第二单词大写，oneTwo在css里有很多缩写的习惯，推荐使用缩写格式。基本的缩写有 属性缩写和颜色缩写等。属性缩写的例子：margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;可以简单的写成 marign:1px;代表了以上四个属性。节约了很多字节。顺便提一下，margin的缩写比较特殊，给不会的朋友看看。margin x;代表四个方向都为xmargin x y;代表上下为x,左右为y;margin x y z a;x代表上,y代表右,z代表下,a代表左
css之自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-space:normal; width:200px; }1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行#wrap{word-break:break-all; width:200px;}或者#wrap{word-wrap:break-word; width:200px;}<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>效果：可以实现换行 2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条#wrap{word-break:break-all; width:200px; overflow:auto;}<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>效果：容器正常，内容隐藏 对于table 1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏