HTML5+CSS3
文章平均质量分 78
透明度---
深爱web前端
展开
-
精通: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 · 420 阅读 · 0 评论 -
html5新功能5—使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/转载 2015-04-02 15:42:09 · 481 阅读 · 0 评论 -
html5新功能4—JavaScript里获取电池状态的方法
从Mozilla Aurora 11起,火狐浏览器里实现了一些新功能,其中一个就是对电池状态接口的基本实现。这个很简单的接口能提供你关于电池当前电量,是否在充电等信息,以及一些电池状态变化事件。让我们来看看效果!观看演示电池对象是存放在window.navigator.battery里,但因为这是火狐浏览器首次实现并提供这个接口,并未普及,你需要使用window.navigat转载 2015-04-02 15:41:52 · 2499 阅读 · 0 评论 -
html5新功能1—各种浏览器全屏模式的方法、属性和事件介绍
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:// 判断各种浏览器,找到正确的方法function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el转载 2015-04-02 15:36:38 · 682 阅读 · 0 评论 -
html5新功能2—使用HTML5里页面可见性接口判断用户是否正在观看你的页面
长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了?他们切换回来了么?现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。观看演示document.hidden这个新出现转载 2015-04-02 15:39:12 · 593 阅读 · 0 评论 -
html5新功能3—使用HTML5技术控制电脑或手机上的摄像头
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。观看演示HTML代码下面的代码里我写了一部分注释,请阅读:<转载 2015-04-02 15:40:45 · 549 阅读 · 0 评论 -
用CSS美化半个字符巧妙方法
CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形,比如在这个“HTML5技术秀:你的3D立体旋转名字”作品里,在左上角的菜单前面都有一个小图标,放在凡人眼里,它们肯定是个图片,找美工做个图,又省事,又快捷,但如果你仔细研究就会发现,它们不是图片,转载 2015-04-10 11:30:08 · 691 阅读 · 0 评论 -
伪元素::after和::before
::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示,基本的效果是这样的:CSS代码div::after { content: "你好";}HTML代码div> 你好div>::before跟::afte转载 2015-04-08 10:52:49 · 461 阅读 · 0 评论 -
CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScri转载 2015-04-14 16:49:52 · 537 阅读 · 0 评论 -
CSS里的:target伪选择器
:target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的:当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的:观看演示HTML代码下面的两个HTML元素上我们都指定了ID:h2 id="section1">Sect转载 2015-04-14 17:42:45 · 705 阅读 · 0 评论 -
无刷新修改页面的浏览器地址栏显示地址的方法
作为一个Web程序员,我经常会到网上去看别人是如何做网站,如何开发Web应用的。这样的好处有很多,一是开阔你的眼界,你能看到很多书本上没有的东西,二是看别人的代码是如何写的,取人之长、补己之短。像纯CSS3实现光芒旋转四射的头像动画和用CSS制作出绚丽燃烧的火狐狸的方法都是研究别人网站上的技术的收获。经常访问Facebook,或github.com,或plus.google.com的人会发转载 2015-04-08 18:04:36 · 815 阅读 · 0 评论 -
在CSS里用calc进行计算
CSS就像迷一样让人想不透;我们喜欢CSS,是因为它很简单,但我们又不停的要求它提供更多的功能。CSS里已经新增的特征有placeholders, 动画技术和click events等。但有一个问题是,CSS是静态的;完全没有逻辑操作。可CSS里的calc函数却打破了这种趋势,它提供了程序员使用CSS编程计算的能力。观看演示CSS代码这个calc计算器在计算相对宽度转载 2015-04-15 16:59:04 · 711 阅读 · 0 评论 -
5种JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!用JavaScript获取伪元素(pseudo-element)属性转载 2015-04-24 10:23:27 · 362 阅读 · 0 评论 -
5种JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!用JavaScript获取伪元素(pseudo-element)属性转载 2015-04-24 10:23:40 · 385 阅读 · 0 评论 -
CSS滤镜(Filters)
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜,不需要你使用任何做图软件,用纯CSS就会生成多种的滤镜效果,比如模糊效果,透明效果,色彩反差调整,色彩反相等等;不仅能对图片进行滤镜处理,而且对任何网页元素、甚至视频都可以处理。下面让我们来看转载 2015-03-23 17:14:13 · 505 阅读 · 0 评论 -
CSS3图片倒影技术
目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒转载 2015-03-30 14:36:12 · 468 阅读 · 0 评论 -
如何用JavaScript获取图片的真实尺寸大小
网页页面上的图片尺寸似乎都千篇一律。我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调。之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制。但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥。比如,冷知识:你知道每个视窗都有的 [x]转载 2015-03-19 15:13:15 · 673 阅读 · 0 评论 -
精通: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 · 393 阅读 · 0 评论 -
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 · 837 阅读 · 0 评论 -
移动平台的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?1、Meta 之 viewport说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?viewport即可视区域,对于转载 2015-03-05 09:25:10 · 467 阅读 · 0 评论 -
内存泄露的几种情况
内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。在C++中,因为是手动管理内存,内存泄露是经常出现的事情。而现在流行的 C#和Java等语言采用了自动垃圾回收方法管理内存,正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器 垃圾回收方法有bug,会产生内存泄露。1、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,转载 2015-03-05 10:18:49 · 410 阅读 · 0 评论 -
-webkit-appearance 使用说明
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。大转载 2015-03-05 09:50:59 · 10605 阅读 · 0 评论 -
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 · 4556 阅读 · 0 评论 -
移动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 · 342 阅读 · 0 评论 -
移动端 页面布局时需要注意的几项常见要点
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 · 544 阅读 · 0 评论 -
Google推荐的15条军规:HTML5代码规范
今天无意间看到了Google的HTML/CSS编码规范,发现了不少自己很容易忽略的问题,特意仔细看了看,将其整理翻译出来分享给大家。Google规范的原文链接大家可以访问:http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml 1.协议头: 建议在指向图片或转载 2015-03-06 11:28:58 · 568 阅读 · 0 评论 -
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 · 638 阅读 · 0 评论 -
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方。你可以先看一下下面的演示转载 2015-03-20 15:59:05 · 450 阅读 · 0 评论 -
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 · 410 阅读 · 0 评论 -
CSS3图片倒影技术
目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒转载 2015-03-30 14:33:44 · 361 阅读 · 0 评论 -
多层嵌套的CSS 3D动画技术详解
IE9及其以下版本完全不支持CSS 3D transforms技术,Opera 12也不支持。具体支持信息请查看caniuse.com。CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术;纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码,但对于一个程序员来说,真正理解其为什么会动起来的原理是非常重要的。转载 2015-04-27 13:53:53 · 943 阅读 · 0 评论