CSS

Archives

文件夹

原文转载自:http://www.w3cplus.com/css3/new-css3-linear-gradient.html   渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异。 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中。另外,在实际应用中可扩展性差,还直接影响页面性能。 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐变图片的效果。而且渐变属性慢慢得到了众多现代浏览器的兼容,甚至烦人的IE,在IE10版本也支持了这个属性。 CSS3渐变的介绍 欲要了解CSS3渐变,就先要知道CSS3渐变是什么?从早前的设计中我们可以知道,渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中,可以指定多个中间颜色值,这个值称为色标。每个色标包含一种颜色和一个位置,浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变。如下图所示: 渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中,渐变相当于背景图片,在理论上可在任何使用url() 值的地方采用,比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止,仅在背景图片中得到最完美的支持。 渐变功能的实现 最早支持CSS3渐变的是Webkit内核的浏览,随后在Firefox和Opera等浏览器都得到支持,但是众浏览器之间没有得到统一的标准,用法差异很大。不同的渲染引擎实现渐变的语法也不同,各浏览器下使用都需要带上自己的前缀,给前端设计师们带来极大的不便。 不过还好,到写本章内容的时候,CSS3渐变属性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持W3C的标准语法,但在Webkit内核下的Safari、iOS Safari、Android浏览器和Blackberry浏览器中还是需要添加浏览器的前缀 “-webkit-”。 较以前相比,虽然CSS3的渐变属性在众浏览器中得到较好的支持,但在实际使用的时候也像制作软件(Photoshop CS6、Firework CS6等)的渐变工具一样,将渐变分成了几种:线性渐变,径向渐变、重复线性渐变和重复径向渐变。接下来,我们将依次介绍它们。 线性渐变 在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生。 CSS3制作渐变效果,其实和使用制作软件中的渐变工具没有什么差别。首先需要指定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具有这三个参数就可以制作一个最简单、最普通的渐变效果。如果你需要制作一个复杂的多色渐变效果,就需要在同一个渐变方向增添多个色标。具备这些渐变参数(至少三个),各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就类似于制作软件设计出来的渐变图像,从一种颜色到另一种颜色的平滑淡出,沿所指的线性渐变方向实现颜色渐变效果。 一、线性渐变语法与参数 线性渐变的语法相对于其他的CSS3属性的语法而言要复杂的多。早期的语法在各浏览器内核下其语法尽不相同,特别是在Webkit内核之下还分新旧两种版本。接下来我们先从各浏览器下的语法入手,开始介绍CSS3的线性渐变语法。 1. Webkit引擎的CSS3线性渐变语法与属性参数 Webkit是第一个支持CSS3渐变的浏览器引擎,不过其语法也相对其他浏览器引擎复杂,还分为新旧两个版本。 Webkit引擎老式语法 -webkit-gradien(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*) Webkit引擎新式语法 -webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) Webkit引擎渐变属性参数 -webkit-gradient是webkit引擎对渐变的实现一共有五个参数。第一个参数表示渐变类型(type),可以是线性渐变linear或者径向渐变radial。第二个参数和第三个参数,都是一对值,分别表示渐变的起点位置和终点位置。这对值可以用坐标形式表示,也可以用关键值表示,比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数(色标)。color-stop函数接受两个参数,第一个表示渐变的位置,0表示起点,0.5为中点,1为结束点;第二个表示该点的颜色。 如下图所示: 2. Gecko引擎的CSS3的线性渐变语法与属性参数 Gecko引擎的浏览器Firefox在3.6版本就开始支持CSS3的线性渐变属性。Gecko引擎与Webkit引擎的新版本渐变设计时用法基本相同,只是使用的私有前缀不同。 Gecko引擎的渐变语法 -moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) Gecko引擎的渐变属性参数 在Gecko引擎的渐变中共有三个参数,第一个数数表示线性渐变的方向,例如:top是从上到下、left是从左到右。如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示: 3. Presto引擎的CSS3线性渐变语法与属性参数 Presto引擎的Opera浏览器在11.6版本开始就支持CSS3的线性渐变。在Presto引擎浏览器中CSS3线性渐变的使用语法和Gecko引擎浏览器中的线性渐变的语法非常类似,唯一不同的就是在Presto引擎浏览器中需要使用其自己的私有前缀为“-o-”。 Presto引擎的线性渐变语法 -o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) Presto引擎的线性渐变的属性参数 -o-linear-gradient也具有三个参数:第一个参数表示线性渐变的方向,top表示从上到下,left表示从左到右,如果定义成left top表示从左上角到右下角。第二个和第三个参数分别是起点颜色和结束颜色。还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示: 4. Trident引擎的CSS3线性渐变语法与属性参数 Trident引擎的浏览器主要有IE,早期版本的IE浏览器是不支持CSS3线性渐变的属性,不过在其IE10开始支持了这个属性。在这里我们主要针对IE10+浏览器的CSS3线性渐变进行简单的介绍。 Trident引擎的CSS3线性渐变语法 -ms-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) […]

首先让我们假设手机性能并不是很好。 1、做位移动画translate比trbl更流畅; 2、通过backface-visibility可以开启gpu性能; 3、动画期间transform的属性应该是保持一致的,不然部分手机(小米3)只会做最后定义的动作; 4、在ios6的情况下如果动画不用translate3D,内容多了切换会出现花屏(更准确说应该是translateZ); 5、安卓部分机型不支持对:before元素的动画;

固定盒子长宽比 通过设置高度为0 ; padding-bottom:%可以根据宽度设定盒子的比例 如果不知道上面的理论是什么,可以通过去传送门看看这个属性的详细说明。 % 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。 显然有兼容性问题~不过触摸端我还没有看到不好用的所以,移动端开发可以尽量用。

最近接到一个H5动画的任务,大概状况是这样: 整体动画长度超过10s,这是一个难点,也是唯一的难点。 关于动画的动作拆解和场景分离,先不在这里说,主要说下写大量animation的感受和问题。 总结出的问题: 问题1:为浏览器兼容产生了大量的重复代码; 问题2:连贯动画的执行方案; 问题3:如何保存动画执行后的状态。   关于系统限制的几个问题 animation所执行的动画执行后会回到原来的状态; 循环状态的animation在大多数浏览器在重播的时候会有时间差; 变化频率较高的动画会收到机能的限制,出现卡顿; setTimeout方法的延时在触摸手机的时候会暂停。   想到的一些解决方案: 1、既要写animation又要写-webkit-animation(@keyframe也是如此),只是想想就知道一个几秒的动画脚本要写多少重复代码了。 我的解决方案是把动画脚本和普通样式分离,然后先只写webkit的脚本(方便调试),然后再起一个文件单独写通用样式,这样维护一个动画脚本就好了,不用每次修改效果都要改两个地方。(上述操作也可以自行写构建脚本自动化完成,less、sass看情况使用~) 2、经过测试,animation里的infinite属性在replay的时候,并不是无缝的,而是有时差的,而且各浏览器状况不一样,所以想用此属性跟其他元素做组合效果要有准备。 3、因为动画每次执行后都会回到最初的状态,所以我们需要一个方法保存执行后的状态,我的方法是用setTimeout同步动画的时间,在合适的时候加一个心得class来保存元素的当前状态以便在下一个场景中进行新的动画。但是在手机端,手指触摸屏幕会让js暂停运行(wp不会),虽然animation也会暂停,但仍会产生不可以预知的错误,具体解决方案还在研究中。   总结: 显然,只要方法得当,animation是完全可以胜任长时间动画的,这让我们摆脱了没有flash,动画实现门槛高的窘境,相反从某些角度,css3写一些动画灵活性更强。

说问题之前,先看一张图。   图中要求蓝色问号图标显示在文本末尾。 关于这个问题和app的同学讨论过,app同学表示实现有难度,让设计同学改了设计稿,将icon放到第一行文本后面,就如同第二行的“成人票”后面那样。 那么wap端能否实现这个效果呢,闭目思考下…   答案:能。   我们可以把icon直接写在文本后面,这样不就显示在行尾了么。 如果如此简单,app同学怎会轻易示弱,如果第二行只有icon(文字填满第一行),岂不是很难看。 那么我们绝对定位该icon到末尾。 .icon{position:absolute; right:-20px; bottom:0;} 然后我们希望这个元素能定位到我们想要的地方,那么我们希望这个元素的范围是这个样子的。   到此就比较明显了(虽然已开始我也没想到),只要设置该元素为内联属性(display:inline)就可以达到这样的效果了。   总结:虽然用了绝对定位,但从结构上来讲也还是合理的,主流浏览器都没问题,所以是个可行的方案。 最近看了《隐秘而伟大》,套用到这个问题上,inline虽然是行内元素的默认属性,但也有伟大的一面呀。

问题描述   在手机中拖动手机屏幕(window的scroll事件)或关闭手机屏幕时,会让js暂停运行。 这个状况会直接导致类似倒计时这样的效果出现问题。 比如你做了个页面上的倒计时,按照秒的精度倒数,当你拖动屏幕浏览内容时只要你的手没有放开,那时间是不动的。(可以联想到类似轨迹动画也是会停止的)。   我的解决办法 一、改变拖动的方式。 将scroll事件改为touchMove,可以让你在拖动的时候仍然保持js的运行。 典型的插件iscroll,虽然这个插件还不是完全体,有一些已知的bug,但是可以给你一个思路让你解决问题。 这个只能解决拖动上得问题,关闭手机屏幕还是无解的。   二、利用机器时间差异 这个算是曲线救国(谢谢数学老师),做一个setInterval来循环调用机器时间(间隔事件根据需要设定),如果与上次的调用时间超出预计,那就是产生了拖动和灭屏的状况,那么我们根据这个时间差,来计算目标时间应该达到的目标状态,并重置到这个状态。 我觉得是个代价相对较小的方法。   假设刚进入页面的时间是准确的 已知服务器时间 x 和当前机器时间 y 因为服务器时间和机器时间不一定相等 所以我们假定这个时间差z = x-y; z为恒定值 获取当前机器时间的代码代价较小,我们可以在定时器中一直获取动态的y,再根据z,校准当前的确定的服务器时间,而不用反复请求。 如果是倒计时,需要的是时间差 那就需要一个目标时间a 时间差b的校准公式应该是 b= a-y-z;   三、面对鬼畜产品经理 “我要拖动的时候时间是动的,灭屏回来时间也是对的!” 这个时候结合方法一和二,就可以解决了。 我比较懒,方法在上面,自己写一写… “什么?灭屏回来会卡顿?” Sorry…

字pc端用click事件来触发就可以了,但是在移动端click是触发不到file的input,要用touch。 如果想pc端和移动端都可以正常使用,可以用FastClick解决兼容问题。 另外在移动端用file是访问手机的相机或者相册(测试了ios,android是可以,wp不行)。

最近用的比较多,在这里总结一下。 要注意的是我下面的东西主要是在移动端开发测试的,chrome也测试了,pc端其他浏览器我会在之后补上说明的。 我这里说的click是已经优化过的点击,自己在合适的时候切换成touch。 另外,无视jquery2+。 大家都知道的 在input外面加上label,或者通过label中的for属性指向input,可以通过点击label区域触发input的change或者focus。 针对radio和checkBox主要就是change事件。 那么触发input:radio和input:checkBox会有什么操作呢? radio:如果已选中,不会有变化。如果未选中,那么在同一个name里面,选中该radio,原来选中的radio取消选中。 checkBox: 如果已选中,取消选中;如果未选中,改变为选中状态。 你可能不知道的 前提: 这里以jquery的语法描述。 不在html中直接操作checked属性,因为要做遍历。 先说radio: 我们要通过label间接改变一个radio组的状态可以用click事件,也可以用change事件 以$(this).find(“input:radio”).is(‘:checked’)来判断当前的子元素是不是选中状态。 以$(this).find(“input:radio”).get(0).checked = false;来取消选中状态(如果你默认一个都不选中有可能会用到这个)。 click与change的区别就是,不管你该元素的状态是否变化,click都会触发。 而change只有在你元素选中与否变化时才会触发。所以我认为change是优选。 而你想通过其他方式修改这组单选状态的时候,可以通过$(this).find(“input:radio”).eq(index).trigger(“click”)来实现,不能用change。 以上的操作在pc端是没问题的,但是在移动端,想用change操作input的属性是不可以的。 那checkBox呢: 从上面对radio和radio其实没有不同。 但在做特别样式的展示,并且要把丑陋的input隐藏时,要注意保持展示和看不到的input状态是一致的。 我开始用click测试的时候就发现展示状态改变正常,但是input可能没有变化~ 总结一些用法 如何确定该选择项目是否被选中: 有人说我要用$(this).attr(“checked”)来查看当前状态,那在我上面说的这个方发现,这么判断永远是空… 用$(this).is(‘:checked’)可以达到判断是否选中。当然你愿意用class标记是否选中也可以。 change和click: pc端用change提高效率,移动端用click。 综合实例说事 点击查看实例 >> 或者扫码。

同事推荐的压缩css和js的方法,是运行在nodejs的基础上的,所以你要先安装一个nodejs。 在有nodejs的基础上,进入命令行模式分别运行 npm install clean-css -g npm install uglifyjs -g clean-css是压缩css的,uglifyjs是压缩js的。 然后新建两个批处理文件。 @echo off :: 设置压缩css文件的根目录,脚本会自动按树层次查找和压缩所有的css SET OUTFOLDER= 压缩后的目标目录 echo 正在深度复制文件 xcopy 准备压缩的目录*.* “%OUTFOLDER%” /s /e && echo 复制成功 || echo 复制失败,请检查文件是否存在! echo 复制完成 :: 设置压缩的路径 chdir /d %OUTFOLDER% echo 正在查找CSS 文件 for /r . %%b in (*.css) do ( @echo 正在压缩 %%~b … cleancss […]

偶然发现text-overflow:ellipsis这个属性,发现自己学习漏洞很大,先分享吧。 引用自:百度知道 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。 通常的做法是这样的: 1.overflow:hidden; 2.text-overflow:ellipsis; 3.-o-text-overflow:ellipsis; 4.white-space:nowrap; 5.width:100%; 其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6; 该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。 下载这个Jquery插件:jQuery ellipsis plugin 调用方法: 1.$(document).ready(function() { 2. $(‘.ellipsis’).ellipsis(); 3.}