Category: Div / Css / XML / HTML5 / SVG

这里提供了各种各样的超链接特性，有些是借助伪元素，有些是借助svg，有些是借助HTML5动画。用你的鼠标悬停在这些链接上，给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器，比如谷歌浏览器或火狐浏览器。   Demo：http://www.webhek.com/misc/link-style/… Read More

DataList的作用是在你往input输入框里输入信息时，根据你敲进去的字母，自动显示一个提示下列列表，很像百度或谷歌的搜索框的自动提示，在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。   DataList的表现很像是一个Select下拉列表，但它只是提示作用，并不限制用户在input输入框里输入什么。 HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样，非常的简单！ C代码 <label for="country_name">国家 : </label><input id="country_name" nam… Read More

Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中。在此之前，人们要想实现动态的网页应用，只能借助于第三方的 插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页的大门。本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理。 图像来源 最常见的在canvas上画图的方法是使用Javascript Image对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式(png，jpg，gif等)基本上都没有问题。   图片可以从DOM中已经加载的元素中抓取，也可以按需即时创建。 J… Read More

【已知】 canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。 【想要的】 往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，我不想新开一个tab，然后还要右键另存为… 我还需要更方便的自由的配置生成的图片的大小，比例等。 另外如果我还要别的图片格式，比如位图bmp，gif等怎么办… 【解决办法】 a)想直接把图片生成后download到本地，其实办法也很简单。直接改图片的mimeType，强制改成steam… Read More

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性，最后，还将介绍如何用jQuery支持其它类型的浏览器。 各种浏览器对CSS滚动条的支持情况 这里说的Webkit浏览器包括谷歌浏览器，苹果公司的Safari浏览器，以及最新的Opera浏览器。这些浏览器加起来占有超过半数的桌面浏览 器市场份额。对于移动端浏览器，基本上是谷歌浏览器和Safari浏览器的天下。唯一的遗憾是火狐浏览器，至今没有对CSS滚动条属性做任何的改进。至于 IE浏览器，我们期待吧。 鉴于目前浏览器市场的格局，… Read More

1. flag-icon-css  CSS for vector based country flags! Usage For using the flags inline with text add the classes .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag then add the class flag-icon-squared as well. Example: <span class="flag-icon flag-ic…

Description This is a cross platform jQuery library to create a QRcode reader for HTML5 compatible browser. The decoder used for the QRcode reading is from LazarSoft https://github.com/LazarSoft/jsqrcode Demo See a demo here http://dwa012.github.io/html5-qrcode/ Usage Include html5_qrcode.min.js in the lib directory. Create a basic <div>… Read More

「等高响应式布局」是什么？介绍它之前，我们先回忆一下它的近亲「等宽响应式瀑布流」。 回忆一下，Pinterest、Google+、花瓣网、美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览？ 那种感觉就像逛街，让所有商品呈现在网页上，只需要往下拉鼠标就能逐个浏览，不断加载，他们简洁同时整齐，原因是他们的宽度相等，但是高度不一。   这就是所谓的「等宽响应式瀑布流」，它的特点如下： 1.响应式，适应PC端以及移动端各设备呈现不同的宽度和单列数量； 2.等宽，这样的布局十分适合瀑布流，有不断向下的阅读感； 3.没有脚的小鸟，因为内容是不断向下加载，因此页脚基本是看不到了； 这样的布局引起了一个风潮，然而… Read More

HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。 查看演示 下载源码 DeviceOrientation包括两个事件： 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。 HTML 页面上有一个div#hand，用来放置一个手摇的图片，d… Read More

在上一篇文章中，我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果。手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。 查看演示 下载源码 注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。 HTML 我页面中默认展示产品信息（某品牌连衣裙产品图片和文字说明），当然实际应用中可以从数据库中获取产品信息。 <div id="pro" rel="1"> <p>使劲晃动您的手机</p> <img src… Read More

二维码是桌面和移动端快速分享的高效手段之一，这里介绍两个不错的快速开发二维码的方法，和大家分享一下~~ 方法1：使用新浪提供的服务 这种方式简单快速，在服务端生成一个二维码的图片，兼容性比较好，你无需自己处理任何相关二维码的生成，只需要提供一端文字或者url即可，方法如下： <img src="http://qrcoder.sinaapp.com?t=http://www.gbtags.com"> 生成效果如下： 大家扫一扫就可以访问极客标签主站了~~ 方法2： 使用jQuery插件qrcode QRcode是一个jQuery插件，可以使用javascript快速帮助你生成相关的二维码  相关代码如… Read More

在线演示  下载 WebRTC可能是明年最受关注的HTML5标准了，Mozilla为此开发了一套帮助你控制硬件的API，例如，摄像头，麦克风，或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。 在今天的这篇文章中，我们将介绍来自Wolfram Hempel开发的Photobooth.js，使用这个类库可以帮助你快速的调用摄像头功能，你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照，你可以使用这个功能来实现用户的大头照拍摄，是不是非常不错？ 主要特性： 对比度设置 颜色设置 亮度设置 色调设置 拍照按钮 支持最新的chrome, firefox, opera等浏览器 支持jQuery插件方式和jav… Read More

speechRecognition API Speech API 只支持 Chrome, http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API speech = new webkitSpeechRecognition speech.onresult = (event) -> console.log event.results[0][0] speech.lang = 'cmn-Hans-CN' speech.continous = yes speech.start() Chrome 启用语音识别的接口需要… Read More

HTML5中，除了其他强大的功能外，同时还增加了audio标签，利用audio标签就可以播放音乐。下面是9个不错的HTML5音乐播放器。 Media Element MediaElement音频视频播放器是纯HTML5和CSS编写的。同时为很多不同的开源系统提供插件，如WordPress，Drupal，Joomla等 网址：http://mediaelementjs.com/   Scott Andrew’s HTML5 audio player 这个播放器是非常简约，但效果很好。 网址：http://www.scottandrew.com/pub/html5audioplayer/   Speakk… Read More