通常我们对最终设计至关重要，但在幕后有很多流程，例如草图。 草图是是把想法作为一种思想框架描绘出来。 有时客户需要一个独特的品牌新标识或字体更方便画在纸上，之后扫描到 Photoshop 和 Illustrator。这里分享20个新颖的字体设计草图，带给你灵感。 您可能感兴趣...

2018-06-24 00:23:18

不用图片，使用CSS3做出一个跳动的心。 HTML： div class ="box" div class ="left" / div div class ="right" / div / div 首先两个div浮动，左上和右上角变圆： .box { margin : 100px ; } .left,.right { float : left ; } .box div { height : 160px ; width : 100...

2018-06-24 00:23:18

学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识 这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-），本文为简化内容，直接使用了原版属性 根据不同属性的支持度，在实际使用的时候需要添加相...

2018-06-24 00:23:13

通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。 先写出公共的样式： 1 .border { 2 width : 0 ; 3 height : 0 ; 4 5 border-color : transparent ; 6 borde...

2018-06-24 00:23:08

px： 绝对单位，页面按精确像素展示 em： 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem： 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，css3新加属性...

2018-06-24 00:23:07

兼容性 ：这个东西说多了也没意思，像HTML5和CSS3这种兼容性时刻变化的东东，我们最好在自己支持的设备上实验，不支持，就在想办法呗，这个东西就是为了方便和好玩 所有属性： mix-blend-mode: normal; //正常mix-blend-mode: multiply; //正片叠底mix-blend-mode: scr...

2018-06-24 00:23:04

文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性比如它的颜色、背景、边框方面及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型 描述了一个元素所占用的空间 。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内...

2018-06-24 00:23:06

边框渐变： 1 border-image: -webkit-linear-gradient( red , blue) 30 30; 2 border-image: -moz-linear-gradient( red, blue) 30 30; 3 border-image: linear-gradient( red , blue) 30 30; 文字渐变：（只支持-webkit-） 1 background-image: -webkit-gradient(line...

2018-06-24 00:23:03

在界面设计的时候，经常需要将两个div在同一行显示。 但是每次都会忘记怎么做，特此随笔，备忘。 如以下要将第一个div和第二个div显示在同一行： div id="id1" /*外层div*/ div id="id2" style="width:100px;height:20px;"第一个div/div div id="id3" style="width:100...

2018-06-24 00:23:00

有IOS的开关模拟，当然也有MIUI的开关模拟 看到设置选项里面的开关样式，突发奇想地来试试 最终效果如图： 实现过程 1. 选项框checkbox 模拟开关当然需要一个选项框，这里用到了复选框checkbox 2. 理解开关的过程 点击开关按钮，则开启或关闭。原生的checkbox无法做到...

2018-06-24 00:22:59