Category: Div / Css / XML / HTML5 / SVG

用纯 CSS 为 HTML checkbox 添加自定义样式及动画效果

一般情况下,<input type="checkbox">元素(也包括一部分其他input元 素)是由操作系统(而非浏览器)进行渲染的。在不同操作系统下,这类特殊元素的样式往往和系统本身的风格一致,和浏览器无关。也正是由于这种机制,开发者 无法像一般元素那样使用 CSS 来修饰这类元素。这里介绍一种利用纯 CSS 实现自定义 checkbox 样式的方法。思路很简单:由于控件所对应的label元素是可以点击并切换控件状态的,而label元素的样式又可以自由设定,因此我们可将input元素隐藏,通过label元素实现交互。 HTML 代码如下: <input type="checkbox" id="checkbox" class="checkbox"/> <div class="checkbox-wrapper">… Read More

CSS:去除点击链接和按钮时出现的虚线框

在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。 这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。 但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。 那么,如何去除这些点击时才会出现的虚线边框呢? 1. outline:none; 通常我们会这么写:a,input{outline:none;} 优点是代码简洁,使用一行css就能解决问题,但是也有缺点:ie6、ie7并不认识outline属性,需要配合仅ie6和ie7支持的css属性blr:expression_r(this.onFocus=this.blur());使用来达到兼容,expression 条件,这句话的意思是链接在获得焦点的同时失去焦点,但是blr不宜多用,会影响效率。 2. hidefocus=”true”; hidefocus是ie系列的专有属性,能够作用于所有ie序列的浏览器,需要配合css的outline:none。 也可以写作:hidefocus=”hidefocus”; 另外,hidefocus并不是W3C推荐的标准属性。 缺点是非全局控制,需要在每个需要去虚线边框的链接或input上加代码。 3. onfocus=”this.blur()”; 优点是比较通用。… Read More

【特别推荐】Web 开发人员必备的经典 HTML5 教程

对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西。唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程,值得好好学习。 Measuring Page Load Speed with Navigation Timing Navigation Timing 是用于精确测量网站性能的 JavaScript API。该 API 提供一种简单的方式来获得准确,详细的时序统计,页面导航和负载事件。它可现在能够在Internet… Read More

推荐10款非常优秀的 HTML5 开发工具

HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写 HTML5 应用。 Initializr Initializr 是制作 HTML5 网站最好的入门辅助开发工具,你可以使用提供的特色模板快速生成网站,也可以自定义,Initializr 会为你生成代码简洁的可定制的网页模板。… Read More

九个让人难以置信的HTML5和JavaScript实验

Google的 Chrome实验室 收 集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目,里面的例子都很独特,让人惊叹。我从未想过结合 HTML 和 JavaScript 能实现这么强大的效果。今天,本文与大家分享其中9个很棒的例子,为了有更好的效果,建议在Chrome浏览器中浏览。 Untangle 拖动蓝点,让所有线都不相交,看看你多久能解开? 🙂   Z… Read More

部分国行Android手机缺少谷歌GMS服务包导致HTML5 Geolocation无法定位的问题

最近项目上用到HTML5的geolocation用于定位,用Chrome和手头的手机测试好好的功能,到终端用户那里反馈一些手机不能定位,最 后确定出是部分三星、摩托的部分国行Android手机“阉割”了谷歌GMS服务包,导致HTML5的geolocation无法使用wifi和基站定位 服务导致。 值得一提的是前期在stackoverflow和google groups里搜到对症描述的解决方案(貌似Android 2.*或者三星自身的问题)全部失效,因为介是个“中国特色”的问题-_lll 首先介绍下HTML5的Geolocation功能。通常情况下,我们是先判断浏览器是否支持geolocation, 如果不支持,可以提示错误,或者进入其他逻辑处理流程,现在移动端的智能手机浏览器绝大部分都是支持的。 if( navigator.geolocation ){ navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError, {maximumAge:60000, timeout:50000, enableHighAccuracy:true} );… Read More

HTML5 地理位置定位(HTML5 Geolocation)原理及应用 (调用GPS)

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。 在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。 HTML5 Geolocation API 使用非常简单,基本调用方式如下: if… Read More

使用 HTML5 Geolocation 构建基于地理位置的 Web

本文将介绍 HTML5 提供的一个全新功能:Geolocation,它允许用户在 Web 应用程序中共享他们的位置,使其能够享受位置感知服务。首先本文将介绍 HTML5 Geolocation 位置信息的构成:纬度、经度,以及获得这些数据的途径(GPS、Wi-Fi 和蜂窝站点)。然后将讨论 HTML5 地理定位数据的隐私问题,以及浏览器如何使用这些数据。最后本文将探讨它在实际中的应用,演示并让您学会如何使用它构建一个实用的基于地理位置的 Web 应用。 HTML5 中的新功能 HTML5 是最新一代的 HTML… Read More

HTML head 头标签

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者… Read More

初步认识 LESS

LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观。LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化,及其典型的应用场景,并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS,灵活运用 LESS 以提高开发效率。   LESS… Read More

html5游戏制作入门系列教程(一)

从今天开始,我们将开始HTML5游戏开发一系列的文章。在我们的第一篇文章中,我们将讲解在画布canvas上的基础工作,创建简单的对象,填充和事件处理程序。另外,要注意在这个阶段中,我们不会立即学习WebGL相关的3D部分。但我们会尽快在未来的WebGL。   在每篇文章中,我们都将学习到一些新的东西。我们第一次创建一个对象,有7个顶点,这些顶点,我们将绘制圆,我们将能够拖动这些顶点。此外,我们将顶点对象填充为半透明色。我认为这是作为入门教程已经足够了。   这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载文件,然后让我们开始编码吧!   步骤1:HTML 这里是所有我演示的HTML。   index.html <!DOCTYPE html> <html lang="en"… Read More

html5游戏制作入门系列教程(二)

今天,我们继续html5游戏制作入门系列的系列文章。今天,我们将继续基础知识(也许甚至是高级技巧的基础)。我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要的UI元素 – 按钮。   我们以前的文章中,你可以在这里阅读:html5游戏制作入门系列教程(一)。我们会用到以前的脚本,并将其功能加强。我要绘制文本,使用自定义字体,动画对象(方形)与渐变色填充,将利用“播放/暂停”按钮暂停动画。   这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载所需文件,让我们开始编码!   步骤1: HTML 这里是我演示的HTML   index.html <!DOCTYPE… Read More