- 博客(41)
- 收藏
- 关注
RSS订阅转载 多层嵌套的CSS 3D动画技术详解
IE9及其以下版本完全不支持CSS 3D transforms技术，Opera 12也不支持。具体支持信息请查看caniuse.com。CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。
2015-04-27 13:53:53
935
转载 5种JavaScript和CSS交互的方法
随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！用JavaScript获取伪元素(pseudo-element)属性
2015-04-24 10:23:40
377
转载 5种JavaScript和CSS交互的方法
随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！用JavaScript获取伪元素(pseudo-element)属性
2015-04-24 10:23:27
347
转载 各种浏览器全屏模式的方法、属性和事件介绍
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀，相信下面这段代码需要你花大量的搜索才能凑齐：// 判断各种浏览器，找到正确的方法function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el
2015-04-23 15:46:41
575
转载 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中，我发现使用CSS媒体查询(media queries)虽然非常的有效，但有时，JavaScript却不能及时知道用户浏览设备的状态。浏览网站的
2015-04-22 17:31:58
942
转载 程序员在页面友好性上常犯的5种错误以及改正方法
我是一个性情乖戾的web用户，但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒，一些很简单的东西为什么做不好？下面是5种常见的可用性方面的错误，以及如何纠正这些问题的方法。给自己方便，也与人方便，确保自己不要犯这样的错误。使用表达submit事件，不要用click事件；请用表单标签form!我不知道遇到过多少次，当我使用回车键提
2015-04-22 14:21:55
327
转载 用JavaScript获取伪元素(Pseudo-Element)属性的方法
CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形，用在提示框上面，还可以用它完成很多简单的任务，而不需要多余的HTML元素。以前，伪元素的CSS属性是无法用JavaScript获取的，但现在，有了一个新的JavaScript方法可以访问它们！ 假设你的CSS代码是这样的：.element:before { content: 'NEW'; colo
2015-04-22 09:45:03
1604
转载 5种方法去掉HTML中Inline-Block元素之间的空白
记得年轻时我在IE6上开发，绝望的希望IE6能支持display: inline-block功能。当需要在”inline”元素上控制margin和padding时，inline-block属性值变得非常有用，有了它，你不在需要让这些元素去“block”和“float”。但有一个问题，当使用inline-block时，HTML元素之间的空白会显示在页面上。很讨厌。有几种方法可以除去这些空白；其中
2015-04-21 15:43:12
1029
转载 在CSS里用calc进行计算
CSS就像迷一样让人想不透；我们喜欢CSS，是因为它很简单，但我们又不停的要求它提供更多的功能。CSS里已经新增的特征有placeholders, 动画技术和click events等。但有一个问题是，CSS是静态的；完全没有逻辑操作。可CSS里的calc函数却打破了这种趋势，它提供了程序员使用CSS编程计算的能力。观看演示CSS代码这个calc计算器在计算相对宽度
2015-04-15 16:59:04
690
转载 CSS里的:target伪选择器
:target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的：当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的：观看演示HTML代码下面的两个HTML元素上我们都指定了ID：h2 id="section1">Sect
2015-04-14 17:42:45
694
转载 CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScri
2015-04-14 16:49:52
525
转载 用CSS美化半个字符巧妙方法
CSS不仅是一种技术，也是一种艺术，如果你运用的好，可以用它创造出各种神奇的效果，随着现代浏览器技术的进步，CSS3的革新，也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形，比如在这个“HTML5技术秀：你的3D立体旋转名字”作品里，在左上角的菜单前面都有一个小图标，放在凡人眼里，它们肯定是个图片，找美工做个图，又省事，又快捷，但如果你仔细研究就会发现，它们不是图片，
2015-04-10 11:30:08
681
转载 无刷新修改页面的浏览器地址栏显示地址的方法
作为一个Web程序员，我经常会到网上去看别人是如何做网站，如何开发Web应用的。这样的好处有很多，一是开阔你的眼界，你能看到很多书本上没有的东西，二是看别人的代码是如何写的，取人之长、补己之短。像纯CSS3实现光芒旋转四射的头像动画和用CSS制作出绚丽燃烧的火狐狸的方法都是研究别人网站上的技术的收获。经常访问Facebook，或github.com，或plus.google.com的人会发
2015-04-08 18:04:36
808
转载 Data URL和图片
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。Data URL基本原理为什么Data URL是个好东西
2015-04-08 17:43:56
478
转载 伪元素::after和::before
::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的:CSS代码div::after { content: "你好";}HTML代码div> 你好div>::before跟::afte
2015-04-08 10:52:49
448
转载 html5新功能5—使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/
2015-04-02 15:42:09
453
转载 html5新功能4—JavaScript里获取电池状态的方法
从Mozilla Aurora 11起，火狐浏览器里实现了一些新功能，其中一个就是对电池状态接口的基本实现。这个很简单的接口能提供你关于电池当前电量，是否在充电等信息，以及一些电池状态变化事件。让我们来看看效果！观看演示电池对象是存放在window.navigator.battery里，但因为这是火狐浏览器首次实现并提供这个接口，并未普及，你需要使用window.navigat
2015-04-02 15:41:52
2471
转载 html5新功能3—使用HTML5技术控制电脑或手机上的摄像头
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。观看演示HTML代码下面的代码里我写了一部分注释，请阅读：<
2015-04-02 15:40:45
536
转载 html5新功能2—使用HTML5里页面可见性接口判断用户是否正在观看你的页面
长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了？他们切换回来了么？现在，HTML5里页面可见性接口就提供给了程序员一个方法，让他们使用visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。观看演示document.hidden这个新出现
2015-04-02 15:39:12
580
转载 html5新功能1—各种浏览器全屏模式的方法、属性和事件介绍
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀，相信下面这段代码需要你花大量的搜索才能凑齐：// 判断各种浏览器，找到正确的方法function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el
2015-04-02 15:36:38
647
转载 CSS3图片倒影技术
目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些，实际上还有很多CSS新属性并未包含进CSS3官方标准中，像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒
2015-03-30 14:36:12
457
转载 CSS3图片倒影技术
目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些，实际上还有很多CSS新属性并未包含进CSS3官方标准中，像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒
2015-03-30 14:33:44
352
转载 CSS滤镜(Filters)
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果，经常使用PhotoShop的人应该非常清楚，每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜，不需要你使用任何做图软件，用纯CSS就会生成多种的滤镜效果，比如模糊效果，透明效果，色彩反差调整，色彩反相等等；不仅能对图片进行滤镜处理，而且对任何网页元素、甚至视频都可以处理。下面让我们来看
2015-03-23 17:14:13
482
转载 HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)元素>HTML5画布(Canvas)元素浏览器不支持画布(canvas)时的备案 your browser doesn't support canvas!2d contextvar context = canvas.getContext('2d');Webgl context (3d)var context
2015-03-20 17:35:16
405
转载 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术，但就算你是一个使用CSS多年的高手，仍然会有很多CSS用法/属性/属性值你从来没使用过，甚至从来没听说过。1.CSS的color属性并非只能用于文本显示对于CSS的color属性，相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员，我相信你未必知道color属性除了能用在文本显示，还可以用作其它地方。你可以先看一下下面的演示
2015-03-20 15:59:05
442
转载 背景图延迟加载(lazyload)技术
图片延迟加载技术目前已经被各种网站广泛的使用，但最近的一篇《PS美女试验的惊人结果 》文章中使用的却是背景图延迟加载技术。为什么要使用背景图延迟加载技术？下面我们就来说一说这个问题。之所以使用图片延迟加载技术，是为了避免浪费带宽。有些页面上嵌入了很多图片(上面所说的《PS美女试验的惊人结果 》里就嵌入了30多张高清美女图)，但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时，正
2015-03-19 15:24:45
1701
转载 如何用JavaScript获取图片的真实尺寸大小
网页页面上的图片尺寸似乎都千篇一律。我们最常见到的带有多图的文章页面中，图的大小通常是和页面的宽度一致，这样看起来，页面就是一个直筒形，这样的布局看多了就会觉得很单调。之所以形成这样的局面，我想很大程度上是因为老式浏览器的限制。但随着现代浏览器(火狐/谷歌/IE11)的普及，浏览器对页面设计的限制越来越少，Web程序员的想象能力能够得到极大的发挥。比如，冷知识：你知道每个视窗都有的 [x]
2015-03-19 15:13:15
657
转载 精通:nth-child
:nth-child 基本用法:nth-child:nth-child(8) 选中第8个子元素 li:nth-child(8) span { background-color: #298EB2; box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inse
2015-03-19 14:54:25
408
转载 精通:nth-child
:nth-child 基本用法:nth-child:nth-child(8) 选中第8个子元素 li:nth-child(8) span { background-color: #298EB2; box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inse
2015-03-19 14:50:17
379
转载 Mobile Web前端开发系列-常用技巧
浏览器检测我们可以通过客户端检测也可以通过服务器端检测，无论哪种检测我们都离不来user agent， 在客户端我们可以使用JavaScript访问navigator.userAgent这个属性将返回用户代理头的字符串，iphone将返回，UA:Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0_1 like Mac OS X;
2015-03-06 16:11:28
573
转载 Google推荐的15条军规：HTML5代码规范
今天无意间看到了Google的HTML/CSS编码规范，发现了不少自己很容易忽略的问题，特意仔细看了看，将其整理翻译出来分享给大家。Google规范的原文链接大家可以访问：http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml 1.协议头： 建议在指向图片或
2015-03-06 11:28:58
559
转载 移动端 页面布局时需要注意的几项常见要点
1.当用户tap一个页面元素时，iOS会在元素周围显示橙色的外框，以表明该元素被tap了。如果你想自己实现tap时的响应效果，可以用以下方法“去除”这个高亮效果.-webkit-tap-highlight-color: rgba(0,0,0,0);2.禁止用户选择页面文字.-webkit-user-select: none;3.如果你响应onclick事件，会发
2015-03-05 18:15:07
533
转载 CSS3阴影 box-shadow的使用详解
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径
2015-03-05 18:06:41
4532
转载 移动web开发经验总结
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注：transparent的属性值在android下无效。2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。3、-webkit-transform:translate3d(0, 0, 0)在
2015-03-05 15:10:32
330
转载 Javascript异步编程的方法
你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏 览器无响应（假死），往往就
2015-03-05 10:51:36
373
转载 内存泄露的几种情况
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在C++中，因为是手动管理内存，内存泄露是经常出现的事情。而现在流行的 C#和Java等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器 垃圾回收方法有bug，会产生内存泄露。1、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，
2015-03-05 10:18:49
399
转载 format-detection属性及含义
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：meta name="format-detection" content="telephone=no"meta name="format-detection" content="email=no"me
2015-03-05 09:54:26
812
转载 -webkit-appearance 使用说明
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。大
2015-03-05 09:50:59
10254
转载 移动平台的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于 head 元素内部，对做SEO的朋友一定对meta有种特殊的感情吧，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？1、Meta 之 viewport说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？viewport即可视区域，对于
2015-03-05 09:25:10
459
转载 windows下配置Sublime Text 2开发Nodejs
1、先安装Sublime Text 2或者3皆可2、下载 sublime Text 的nodejs插件 得到那个zip包（后面会介绍用Package Control安装）3、下载后解压 直接改名为nodejs（一定是这个名字，否则sub2里编辑default文件会报错） 放到 Preferences-->浏览程序包 Browse Packages 所在的文件夹。4、
2015-01-08 15:42:00
307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人