html+css小总结1、块级元素 等会换行，想在同一行显示需浮动或者display: inline2、行内元素 等多个可以并排显示，默认设置宽度是不起作用的，需设置 display: inline-block或者block才行，或者加padding-left和padding-right。3、常用符号双引号"(") &(&) >(>) css中: .a{…;}ID选择器：css中: #a{…;}后代选择器：css中： .a空格.b{…;}群组选择器：css中： .a,.b{…;}标签选择器：sdscss中： a{…;... Read More
做项目的时候，很多客户都要求主题风格为古典风格的，那自然少不了水墨画的元素咯，这次就跟大家分享一下制作水墨荷花的方法：1、打开素材图片，把背景图层复制一层：2、选择菜单：图像 > 调整 > 阴影/高光，参数设置如下图：3、选择菜单：图像 > 调整 > 黑白，参数设置如下图：4、选择菜单：选择 > 色彩范围，选择中背景黑色载入选区：5、选中黑色背景区域并填充为白色得到下图：6、复制两个此图层，将第一个图层的混合模式改为“颜色减淡”，然后按Ctrl + I 反相，再执行：滤镜 > 其它 > 最小值，参数及效果如下：7、向下合并一层，把当前图层隐藏，回到背景 Read More
1、新建600*400 空白文档。2、做如下类似渐变3、新建图层，前景色为黑色，添加滤镜-渲染-云彩（效果如下）4、混合模式改为滤色。（效果如下）5、再执行滤镜-渲染-晕光镜头。（参数如下）6、最终效果 Read More
PS快速制作下雪效果具体的制作步骤如下：1、打开PS，打开素材，打开窗口－动作2、创建新动作，参数如下图3、回到图层，建立一个图层，填充黑色，如下图4、滤镜－像素化－点状化，参数如下图5、图像－调整－阈值（255），如下图6、把图层模式改为滤色，如图7、滤镜－模糊－动感模糊，参数如图8、回到刚才的动作调板，先按（停止播放、记录），，在按（3）次（播放选定动作），如图9、按完后，便会出现如下图的效果10、打开窗口－动画，把时间设置为（0.2秒）。如图11、点到图层面板里的图层1，关掉图层2，3前面的眼睛，复制（动画、帧）里的第一帧，就会出现第2帧，如图12、点到图层2，关掉图层1，3的眼睛，在复 Read More
在设计工作中，几乎每一项设计工作都涉及字体，字体作为视觉设计元素之一，文字是视觉传达不缺少的一部分，譬如LOGO，banner，专题等诸多视觉效果，设计师设计字体特效时，视觉传达的信息便更为准确和丰富。 我们在设计网站时缺乏项目的支持，对字体设计涉及甚少，通常是在字库字体里海选，然后对字体进行简单排版，并没有对字体进行美化等等。 在这个月我和大家分享字体设计入门的一些方法： 首先将字体笔画分解成基础元素，对字体重新塑造： 首先使用矩形工具把文字画出： 根据笔画进行规律替换： 对字体进行简笔： 最后效果Demo： 演变效果： ... Read More
1、新建画布500px*500px，颜色填充为#031e4b。2、添加路径文字，用椭贺工具画个圆，添加路径文字。如图3、复制路径文字，对文字进行栅格化4、对栅格化的文字进行动感模糊，模糊的程度按自己的设计调配。一次动感模糊如图：二次动感模糊如图：模糊程度不够，则多复制几层如图：5、模糊之后，合并图层变形做出光线散发的效果。6、把路径文字也栅格化，变形到光线适合的位置。7、然后再选择光线图层与文字图层，一起变形如图：8、最后就上色，做成自己想在的效果。最终效果 Read More
以前遇到过这样的问题、记得最后没能很好的处理他。最近在一些项目群里发现了这样的两个方法特别收集起来分享给大家。方法一：使用绝对定位来处理，吧内部元素转换为表格的形式，display:table; 具体方法如下：运行代码编辑代码查看源代码 资源添加向导01. 08. 09.Surprise double take Surprise double take 10.Surpr Surprise double 11.take 12.方法二：一个很神奇的方法、非常简单，主要是多了一个100%高度的空元素。运行代码编辑代码查看源代码 资源添加向导01. 08. 09. 10. 11. 12. 13. 1. Read More
使用 line-height 垂直居中line-height:24px;使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。清除容器浮动#main { overflow:hidden;}期前也提到过这样的问题，更多信息可以看这里。不让链接折行a { white-space:nowrap;}上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。始终让 Firefox 显示滚动条html { overflow:-moz-scrollbars-vertical;}更多的 Moz Read More
一、opacity兼容.transparent { filter: alpha(opacity=50);/* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}二、个性化圆角#container { -webkit-border-top-left-radius: 4px; -webkit-border-top-rightright-radius: 3px Read More
浮出层是web页面中经常用到的功能，带有小小尖角的浮出层则更为生动，所以今天带给大家的是有角的浮出层，一起看看吧！是的，我们即将实现的就是以上功能，是不是很生动？HTML：运行代码编辑代码查看源代码 资源添加向导1. 2.◆◆ 3.◆◆ 4.◆◆ 5.◆◆ 6.Hi，知道吗？ 浮出层 7.CSS：运行代码编辑代码查看源代码 资源添加向导01./* poptip */02..poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;col Read More
在我们做输出时可能会遇到这样一个问题，就是汉字和英文字母相遇，然后自动换行的问题。例如，当我在输出产品标题时，由于产品名称比较长，包括汉字和英文字母，FF下浏览是正常的，而IE下面 英文会出现换行。当然，如果您是前端高手，纯粹是小菜一碟。于我而言，经常会忘记在样式里定义，就会出现这样的问题：在FF 里样式是如效果图一样，汉字和英文在同一行，而在IE下面，汉字和英文字母分别占据一行。这时只需在样式里设置： word-break: break-all;就可以解决问题了。 今天我就对这个知识点做个小总结，也算是自己学习一下吧。在css中强制换行有下面三个属性word-break、word-wra.. Read More
在我们日常工作中，由于考虑到浏览器的兼容性，所以很少用CSS3样式。关于其标准，W3C仍然在对CSS3规范进行开发。不过，现代浏览器已经实现了相当多的CSS3属性。最近学习了CSS3,发现功能确实很强大，当然它的内容比较的多，目前我学习到的也是一些基础的内容，下面总结了一下几种我们比较常用的样式。1、如图所示 一个倾斜的图片，有描边有投影，在我们CSS2的时候，可能实现比较麻烦，在css3中就比较容易的实现了，以下是我们所需要的样式：div.rotate_img{width:200px;padding:10px;border:1px solid #BFBFBF;background-colo. Read More