推荐阅读
详细解析如何模拟商业人像摄影大片的色彩
今天给大家介绍一个我从来都没有讲过的方法，这个方法还是比较强大和酷炫的，在时尚片中有着非常重要的应用，后期中经常用来模拟商业摄影和时尚大片的色彩，学修图的同学别错过。 大家经常看到一些商业摄影，时尚大片，它们的感觉是这样的： 它们给人的感觉是色彩很“高级”，就是色彩与色彩之间的过渡比较平滑的同时界限还比较明显，并且不同区域的色彩匹配比较舒服，整体给人的感觉比较时尚。这些片子前期的拍摄肯定很重要，后期的修饰(皮肤质感的处理、光影的重构)也很重要，但今天我们就不聊这么多，就只谈色彩。 我们还是看一下原图片： 我简单做了一个色彩分析：
Photoshop制作颓废的邮票邮戳特效效果教程
先看下最终效果图：一、如何创建印章背景步骤1：我们的教学是在pscc2017版本下制作的，首先创建一个新的850x550px的文档。当然，您可以创建另一个大小的PSD文件，但是您必须按比例调整本教程中使用的所有尺寸。我们先将纸纹理图片添加到新图层中。步骤2：转到图层>新建调整图层并添加渐变映射调整。用于浙变图的颜色是#7a6849和#fffbf7二、如何创建橡皮图章形状步骤1：选择椭圆工具。在绘制时按住Shift键，创建一个完美的圆圈。图层命名为圆圈1.
Photoshop路径终极教程(2)
究竟曲线是怎样生成的，我们又该如何来控制曲线的形态呢？除了具有直线的方向和距离外，曲线多了一个弯曲度的形态，方向和距离只要改变锚点位置就可以做到，但是弯曲度该如何控制？如图在工具栏选择“直接选择工具”，注意是下方那个空心的箭头假设我们刚才绘制的4个锚点分别是ABCD用“直接选择工具”去点取位于AB之间的片断会看到刚才我们绘制AB锚点时候定义的方向线仔细看一下这两个方向线再这样想象：一个人要从A点到B点，在A点出发的时候，位于A点的其他人看到他是朝着上偏右的方向走的而位于B点的人，看到他是朝着下偏右的方向来的那么综合两地的观测结果。就可以得出这个人行走的路线：必定是一个类似锅盖的上弧形现在我们选择如图的“转换点工具”，该工具用来修改方向线然后如下图所示般改变AB锚点上的方向线，将会看到曲线弯曲度的改变注意方向线末端有一个小圆点，这个圆点称为“手柄”，要点击手柄位置才可以改变方向线
电视雪花效果动画
教程开始之前，首先请看如下所示动画效果： 如何才能产生这种类似电视雪花效果的动画呢？通过滤镜、插件？不用，FW4里面已经为我们准备好了这种效果，请看后面的详细步骤： [注意]在开始本节的学习前，请大家首先参阅一下先前的文章“模拟条形码的制作”，因为我们后面的操作是对上一节操作的继续，相关的内容这里就不再赘述了。第一步、首先我们先和“模拟条形码的制作”一文简单的接一下头，在“模拟-”一文中，通过调整矩形的颜色调节手柄，已经出现了如图01所示的条形码效果：图 01 条形码效果第二步、选定矩形对象，此刻矩形的调节手柄会显示出来，我们可以发现，起始端点的圆形调节手柄和结束端点的正方形调节手柄位于同一条直线上，好了，现在仍然选定正方形的调节手柄，向起始端点的圆形手柄拖动，这样两个端点的距离会越来越小，同样的矩形的填充效果也会随着你的鼠标的推动而不断的发生变化，两个端点的距离位置关系请参考图02所示：图 02 调节手柄的位置
最新发布
常用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 全部选择 提示：你可先修改部分代码，再按运行]