推荐阅读
CorelDRAW绘制绿色的森林一角场景
该实例制作了一幅森林场景画面，画面以绿色调为主，通过不同绿色之间的搭配关系营造出丰富的色彩关系。在处理手法上要注意表现画面的纵深感，并且要层次分明、主次有序。图3-2为本实例的完成效果。图3-2 本实例完成效果3.1.1 技术提示本实例的画面具有一定的纵深感，制作时通过为图形添加阴影效果，拉开了画面的层次，给人一种纵深的空间感。如图3-3所示，为本实例的制作流程。图3-3 本实例制作流程3.1.2 制作步骤：绘制远景植物(1)启动CorelDRAW，新建一个工作文档，在属性栏中将“微调偏移值”设为0.1mm，其他参数保持系统默认。然后使用“矩形”工具，在视图中绘制矩形。如图3-4所示。
Photoshop调出唯美冷色效果的外景人像
最终效果原图1、打开素材图片渐变映射调整图层，参数如下 选用较暖的明暗色作为叠加层，确定后把混合模式改为“叠加”，不透明度改为：30%，如下图。2、创建色彩平衡调整图层，参数及效果如下图。
(10-2):使用字符调板
1012以上是在文字工具的公共栏中出现的选项。在点击了字符调板按钮后即会出现字符调板【窗口_字符】，如下图。在其中可以对文字设定更多的选项。在实际使用中也很少直接在公共栏中更改选项，大多数都是通过字符调板完成对文字的调整的。其中的字体、字体形式、字号、颜色、抗锯齿选项就不重复介绍了。注意其中的为亚洲文本选项，需要在Photoshop首选项〖CTRL_K〗的常规选项中开启“显示亚洲文本选项”才会出现。1013拼写检查选项是针对不同的语言设置连字和拼写规则，如下右图显示了英国英语和美国英语对同样文字的不同连字方式。注意，末尾连字只有在框式文本输入时才有效。因为框式文本是自动换行的。通过手动换行的文字是不会有连字效果的。有关框式文本的输入方法在本节后面部分介绍。连字和拼写规则对于中文是没有意义的。因为汉字为单体结构，即一个汉字字符已携带完整含义，而字母系语言需要多个字符组合才能携带完整含义。也正是因为汉字携带的信息巨大，因此现在电脑的计算能力还不足以完美处理中文化的信息结构。-1014行间距控制文字行之间的距离，若设为自动，间距将会跟随字号的改变而改变，若为固定的数值时则不会。因此如果手动指定了行间距，在更改字号后一般也要再次指定行间距。如果间距设置过小就可能造成行与行的重叠。如下左图是自动行距与手动指定为12像素行距的比较。如果有重叠发生，下一行文字将会遮盖上一行。1015竖向缩放相当于将字体变高或变矮，横向缩放相当于变胖和变瘦，数值小于100%为缩小，大于100%为放大。如下右图中3个字分别为标准、竖向50%、横向50%的效果。-1016在字符调板中有比例间距和字符间距，它们的作用都是更改字符与字符之间的距离，但在原理和效果上却不相同。我们可以动手来理解它们的区别，新建一个足够大的图像，打上simple这几个字母，字体为黑体，大小为72像素。如下图左端所示，我们看到整个文字的宽度是由字符本身的字宽与字符之间的距离构成的。这两者都是在制作字体的时候就定义好的。有的字符本身较窄，但其左右的字距也较大，这样做是为了保证每个字符占用的宽度一致。否则，较窄的字符就只能占用较小的宽度。但这种设计却也造成了字符之间疏密不同。如下图中的mp之间与pl之间的疏密就不同。这种情况一般出现在使用中文字库输入字母的时候，Windows系统自带的黑体、宋体、楷体字体都存在这种现象。因此输入英文时应避免使用这些字体。字宽与字距间的比例将随着字号的大小相应改变，也就是说，对于同一个字体来说，字号越大，字符之间的距离也越大。反而反之。那么，字符间距选项的作用相当于对所有字距增加或减少一个相同的数量。可手动输入数值。如下图中将字符间距减去100，所有的字符间距都减去100，字符就互相靠拢了。但是这样做并没有改变疏密不同的情况，尽管mp已经是互相紧靠着密不透风，但pl还是有很大的距离。当然，如果继续减少字符间距也可以最终令pl之间也“密不透风”(设为-300左右)，但mp之间却会产生重叠的效果了。我们可以用一个简单的算式来理解：假设mp原来的距离为100，pl之间的距离为300，当字符宽度设置为-100的时候，mp之间的距离为0，pl之间的距离还有200。要令pl之间的距离为0，字符宽度必须设置为-300，但同时mp的距离必须为-200，所以mp产生了重叠的现象。比例间距选项的作用是同比例地减少(注意，只能是减少而不能增大)字符的间距。按照上一个算式中的前提来假设计算的话就是：当比例间距设为50%，相当于所有字符间距减半(mp间距为50，pl间距为150)，当设为33%的时候，所有字符间距减为原先的三分之一(mp间距约为30，pl间距为100)，当设为100%的时候，所有字符的间距就都被降为0了。因此我们看到的效果是所有字符都彼此依靠(抗锯齿选项及字体形式的不同可能带来微小差异)。1017间距微调选项是用来调整两个字符之间的距离，使用方法与字符间距选项相同。但其只能针对某两个字符之间的距离有效。因此只有当文本输入光标置于字符之间时，这个选项才能使用。1018竖向偏移(也称基线偏移)的作用是将字符上下调整，常用来制作上标和下标。正数为上升，负数为下降。一般来说作为上下标的字符应使用较小的字号。如下图。1019强迫形式的名称是我们为了与文字形式相区别而起的，它的作用也和文字形式一样是将字体作加粗、加斜等效果，但选项更多。即使字体本身不支持改变形式，在这里也可以强迫指定。它与字体形式可以同时使用，效果加倍(更斜、更粗)。其中的全部大写字母选项的作用是将文本中的所有小写字母都转换为大写字母。而小型大写字母选项的作用也是将所有小写字母转为大写，但转换后的大写字母将参照原有小写字母的大小。如下图所示。上标与下标选项的作用与竖向偏移类似，就是增加了可同时缩小字号的功能。下划线选项与删除线选项的作用是在字体下方及中部产生一条横线。
用PS完美抠出复杂的羽毛头饰的简单教程
打开如下图片，复制图层，将 背景 层锁定。我们将在复制层进行抠图，隐藏背景层。选择 >> 色彩范围，打开色彩范围窗口，选择最左边的吸管工具并点击图像背景，这时在色彩范围窗口中你会发现被选择部分变成了白色，移动颜色容差滑杆，使得图像大部分区域变成黑色，并且背景易于选取。提示：要添加颜色到选区时，应使用中间的吸管工具点击要添加的色彩部分2 获得选区，在通道面板中，按下“将选区存储为通道”按钮，得到一alpha通道，取消选择（Ctrl+D），点击“Alpha 1”层，这时图像变成黑白色。提示：图像中的黑色区域是我们要保留的部分，白色为要扣除的部3 这时我们发现图像中还有部分灰色区域，这些将成为半透明区域，所以必须将他们调整为纯黑色或纯白色。图像 >> 调整 >> 色阶，打开色阶窗口，由左向右拖动黑色滑杆直到灰色区域变为纯黑色为止。由右向左移动白色滑杆将白色区域变的更清晰4 选择黑色笔刷并提高笔刷边缘硬度，涂抹需要保留的区域，用白色笔刷涂抹羽毛边缘，根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布
常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;通常有下面四种书写方法:方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 边框的属性如下：可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景的属性如下：可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position;
DIV CSS制作网页时易犯的错误总结
CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性 MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
IE中发生line-height属性失效的解决办法
如在body中设置line-height:80px;然后body中<p>有文字有img,有input...这个bug就发生了,在ie下的line-height会缩小了,但在ff和opera是正常的,于是我们为了解决这个办法需要单独给ie设置样式;
CSS的私有属性小结(针对FireFox浏览器)
FF中CSS的私有属性小结 有时..有些东西FF 总是支持不好……. 只能找私有属性来帮忙…. 例子还米做… 因为太多太不了解了… 等理解得差不多时搞成本电子书. 虽然这些不推荐使用, 可是万不得以的时候总得有个解决的方法.. At-rules @-moz-document url(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(webjx.com){div{color:red;}} url是指定样式在哪里网址下可以用，url-prefix是指定样式在哪个目录下，domain是指定样式在哪里玉米下有用，用“,”可以使用多个。如 domain(webjx.com) 可以在www.webjx.com, *.webjx.com 下使用, 而如果是 domain(www.webjx.com) 的话.就只能在 www.webjx.com使用。Pseudo-elements and pseudo-classes 伪类与伪对象 :-moz- 系列的还没理解清楚.不知道是不是只应用在xul上的.. Properties 属性: moz-appearance: appearance value 直接定义外观 (测试无结果..) -moz-binding: uri | none ; 链接XBL 跟HTC很像的东东.. -moz-background-clip: border | padding ; 背景色原点是否包括 border, 值padding 表示不包括 ,对应CSS3 background-clip -moz-background-inline-policy: bounding-box | continuous | each-box 内联背景渲染的方式 -moz-background-origin: border | padding | content 背景图原点 会根据 background-position 给边或者内容相反渲染.对应CSS3 background-origin -moz-border-top-colors:[color | transparent,]* color | transparent ; -moz-border-right-colors,-moz-border-bottom-colors,-moz-left-right-colors 给 border 定义多个颜色 从外到里..每个只有 1px,最后一个填满余下的 border,这个 border-style 也会变成 solid 没默认.无继承,可用于所有元素 -moz-border-radius: border-radius {1,4} | inherit 定义圆角 可以单独定义 -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright -moz-box-align: start | center | end | baseline | stretch 定义内容的位置 ,只能用于 display 的值是 -moz-box 或者是 -moz-inline-box 的元素 -moz-box-direction: normal | reverse 定义内容的相反方向, 类如direction, 只能用于 display 的值是 -moz-box 或者是 -moz-inline-box 的元素 -moz-box-flex: number 还不明.测试无结果. 只能用于 display 的值是 -moz-box 或者是 -moz-inline-box 的元素 -moz-box-ordinal-group 官方未说明 -moz-box-orient: horizontal | vertical
将XHTML+CSS页面转换为打印机页面
在以前，为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面，这样才能够在打印的时候获得令人满意的效果。现在，通过使用结构化的XHTML和CSS，你可以实现同样的效果而只用花费少得多的精力。 从屏幕显示到打印效果 大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而，有的时候用户需要将某些页面打印出来，也许就是为了保留一个长期的记录，或者将其用作方便的离线参考资料。 现在的麻烦是，让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性，都无法在打印版的Web页面上表现出相同的效果――尤其当打印机是黑白的时候。在被降级为灰度打印的时候，彩色的组合会失去（原有的）对比效果；图形会看起来失真，而且耗费太长的打印时间；在Web页面上起着重要作用的导航按钮在打印页面上也毫无用处。 为了克服这些问题，Web的创建者常常会为页面专门设计一个打印机友好的版本，这样访问者就有打印的欲望。打印机友好的版本通常都包括有和主要 Web页面相同的内容，但是会省略掉大多数的图形、背景和导航元素。页面还会把彩色转换成某种形式，以便生成能够让人接受的灰度图像。 CSS的解决方案 使用结构化的XHTML标示和CSS格式将内容和表示分离开来的一个优势在于，通过更改CSS样式，你可以很轻易就把内容重新格式化。因此，创建一个打印机友好的页面就是把一个不同的CSS文件链接到相同的XHTML页面上。 你可以同时把屏幕样式表和打印样式表链接到同一个XHTML文件里，所以就没有必要单独创建一个打印机友好的页面，只需要一个打印机友好的样式表就行了。当你在链接代码里加入多媒体类型的文件时，这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS的规则，而为了打印输出要使用哪些规则。
CSS网页布局
CSS能干什么呢？CSS能表现网页，以各种格式来显示页面，只需要你修改CSS代码就可以实现，HTML是网页的结构，可以配合CSS来实现制作我们的网页。 CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。 static值是元素的默认值，它会按照普通顺序生成，就如它们在的出现一般。的出现一般。 relative很像static，但可用top、right、bottom和left属性来偏移原始位置。 absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。
不增加额外元素实现清除浮动(闭合浮动元素 Clear Floats)
浮动（Float）是页面布局中经常用到的技巧，但是，同时也出现了很多由于浮动引发的问题；父元素不能闭合具有浮动属性的子元素，是这些问题中最常见且最让新手头痛的一个。清除浮动常见的做法是加一个额外的标签，然后给这个标签加上 clear:both 的设置，追求完美的人当然不乐意这种方式，于是，便有了本文将要介绍的：不增加额外元素实现清除浮动的方法。 以下是代码片段：<style type="text/css"> /* 说明：不增加额外元素实现清除浮动（ 闭合浮动元素 Clear Floats ） 月可整理： syku.net ( http://www.syku.net ) */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ </style>
用CSS + 图片的方式制作漂亮的点击效果按钮
用CSS + 图片的方式制作漂亮的点击效果按钮<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="按钮, button, css, " /> <meta name="description" content="这篇文章教你用 CSS + 图片的方式制作漂亮的有点击效果的按钮，明白了原理，相信你也可以制作更加丰富的效果。" /> <title>用 CSS 让你的按钮（button）更加迷人 - 按钮, button, css, </title> </head> <body> <div id="example"> <h3 id="example_title">用 CSS 让你的按钮（button）更加迷人</h3> <div id="example_main"> <!--************************************* 实例代码开始 *************************************--> <style type="text/css"> a.button { background: transparent url("http://www.syku.net/web/UploadFiles_5065/200712/20071203121045802.gif") no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.button span { background: transparent url("http://www.syku.net/web/UploadFiles_5065/200712/20071203121046965.gif") no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ } a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ } </style> <br class="clear" /> <a class="button" href="#" onclick="this.blur(); return false;"><span>提交</span></a> <a class="button" href="#" onclick="this.blur(); return false;"><span>重置</span></a> <br class="clear" /> <br /> <!--************************************* 实例代码结束 *************************************--> </div> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
CSS截取固定长度字符
CSS截取固定长度字符<div style="width:100px; overflow:hidden; text-overflow:ellipsis">bbbbbbbbbbbaaa888899999aaaaa</div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]