首页

关于

绝对应当收藏的10个实用HTML5代码片段

绝对应当收藏的10个实用HTML5代码片段

HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢!

HTML5的最简单模板

如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

标签: html, html5, 代码片段

阅读更多

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader是一款免费的在线工具,可以帮助你生成加载动画的脚本,它生成的是自旋转的圆圈加载动画,脚本可以用在你的HTML5项目 中。它可以进行一定的客制化,来生成你想要的加载动画,其中包括圆圈的半径,旋转速度,密度,颜色等属性。 你可以下载代码片段,也可以直接下载生成的html文件,应用在你的程序中。

CanvasLoader Creator的操作

它的操作非常简单,只需要在链接中,调整你需要的参数,就可以生成你想要的加载动画样式了。

可设置的属性包括:

  • Diameter: 半径,既圆圈的半径。
  • Density: 密度,既旋转中的竖纹图案的密度。这个属性在你放大了半径之后,可以看得非常清楚。
  • Range: 范围,既旋转时,有颜色的范围占据了整个圆圈的多少比例。
  • FPS: 每秒帧数。
  • Speed: 速度,旋转的速度。
  • Color: 圆圈的颜色。
  • Shapes: 旋转的形状。
  • Background color: 背景颜色。

在设定了属性之后,它会实时生成代码片段,你可以下载整个的html文件,也可以从页面上拷贝代码片段放在你的程序中使用。

CanvasLoader核心代码

如果你打开代码,你可以看到它使用的是加载了一个名为Heartcode…

标签: javascript, html5, canvas, 进度条效果

阅读更多

创建平滑的HTML5动画

创建平滑的HTML5动画

现代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。

创建平滑的HTML5动画

现代移动 操作系统将用户接口动画化,并已达到了电脑端交互的标准--精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表, 使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。

接 受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率--真是绝望啊!

改变

2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。

CSS3动画--3D

让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。

CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover…

标签: html, html5, 动画效果, css3动画, css

阅读更多

帮助自定义选择框样式的Javascript - DropKick.js

DropKick - 自定义你的<select>的样式

在线演示   在线下载

当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了。

我们可以使用CSS来给<select>定一个样式,但是只用CSS的话,这里就会有很大的局限性。通常情况下,唯一的可行选择就是用JavaScript来做下拉框的样式。

在这篇文章中,我们使用DropKick - 一个jQuery的插件,来创建我们的下拉列表。它做了什么呢?DropKick <select>列表转换成完全自定义的HTML元素做的下拉列表,而当你选择了一个下拉选项时,这个选项对应的选项值会更新成表单的一部分。好了,现在让我们开始吧!

创建<select>

我们要做的第一件事,是创建一个<select>列表,我们在例子中创建一个一周工作日的列表:

<select id='mySelect'>

标签: jquery插件, html5, css, 自定义样式

阅读更多

利用HTML5与jQuery技术创建一个简单的自动表单完成

利用HTML5与jQuery技术创建一个简单的自动表单完成

在线演示 在线下载

谷歌快速搜索自带大量自动完成插件--库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的 jQuery Autocomplete插件有确切的功能,我觉得非常有吸引力。你在打字的时候,结果将出现在下拉菜单底部,自动突出显示的词语。本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的,在本教程中,更容易使用本地数据。查看以下演示,了解这个插件 吧。

在线演示--下载源代码

利用HTML5与jQuery技术创建一个简单的自动表单完成

创建页面

首先下载 jQuery Autocomplete插件,这里使用的是压缩后的版本,以及最新的jQuery脚本的副本。因为我在JavaScript数组里保留了所有选择项,于是将自定义脚本移动到了另一个单独的文件中。

<!doctype html>
<html lang="en-US">
<head>

标签: html5, jquery, 自动表单, 网站模板, 表单

阅读更多

使用HTML5画布(canvas)生成阴影效果

使用HTML5画布(canvas)生成阴影效果

使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影。

  var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d');

ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色

ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();

ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350,…

标签: html5, 阴影效果, 特效, 画布效果, canvas

阅读更多

前端开发攻城师绝对不可忽视的五个HTML5新特性

前端开发攻城师绝对不可忽视的五个HTML5新特性

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。

在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率,相信大家会感兴趣的!

特性一:正则表达式

相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

运行如下:

如果在Firefox浏览器中运行,并且输入错误的email地址,会看到如下:

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/3465707b-8071-40fa-a159-4356a0a17a52.htm

标签: html5, html5新特性, 正则表达式, 新特性, 前端开发, html5特性

阅读更多

CSS的未来:游戏的变革Flexbox

css的未来,游戏的变革flexbox

相关阅读:

使用Flexbox布局方式的简单演示

HTML5CSS3给网络开发者提供了新的语法标签,本地动画工具,服务器端字体等等新增功能,这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具,事实上,即便是最有前途的CSS3现在也仍旧是在地平线上。

虽然它可以创造出令人惊讶的复杂布局,例如CSS悬浮,定位规则,以及有些怪异的JavaScript,但是这些工具中,没有一个是用于明确布局内容的,这就是为什么你想要在浏览器用这些工具实现你想要的布局是如此令人惊讶的复杂。很快的,你就可以嵌入抛出你的悬浮效果用一种更好的方式 - CSS Flexible Box Model,可以简单称为Flexbox。Flexbox可以让你用几行非常简单的代码创建一个复杂的布局 - 不再需要悬浮和"清除悬浮"

也许它更加强大的一点 - 特别是建设响应网站 - Flexbox的order属性允许你在HTML源顺序中创建一个完全独立的布局。基于一些理由,你想要自己的页脚出现在页面上方?没问题,只要将你的页脚CSS设置为顺序1,Flexbox也可以使它垂直居中。

Flexbox早就存在,但是它的规范被重写了,旧的代码就已经过时了。如果你想学习新的语法,…

标签: css, css的未来, flexbox, css3, html5

阅读更多

HTML5/CSS3系列教程:使用SVG图片

HTML5/CSS3系列教程:使用SVG图片

在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG

SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生!

为什么使用SVG?

  • 文件非常小
  • 能够无损失的缩放尺寸
  • 在Retina显示屏上效果超棒
  • 能够控制图片样式设计,例如互动和过滤filter

浏览器支持

  • IE8及其更低版本不支持
  • Android 2.3及其更低版本不支持
  • 其它浏览器都支持

如果你需要支持这些版本的浏览器的话,你可以使用Modernizr,如下:

if (!Modernizr.svg) {
  $(".gblogo img").attr("src", "images/logo.png");
}

或者使用如下更简单的代码:

<img src="gblogo.svg"…

标签: html5, svg, scalable-vector

阅读更多

HTML5中的Article和Section元素

HTML5<Article>和<Section>元素

HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。

最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?

相关教程: GBin1专题之HTML5教程

Section元素

这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们一直在用<div>来划分段落,所以除 了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述:

"<section>元素表示了一篇文档或应用中,通用段落 - WHATWG"

从描述中我们可以看出<section>元素的作用就是分段,或多或少类似于<div>。但是它仍有一个特例。在文档中,加入了一段特别声明:

"当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用<div>。<section>元素适用于,当元素的内容需要明确的列出时。-…

标签: html5, secton, article

阅读更多

绝对不可错过的超实用HTML5代码片段

绝对不可错过的超实用HTML5代码片段

HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢!

HTML5视频和fallback

实用HTML5的一个好处就是简化了视频和音频的嵌入代码量,不过呢,如何兼容老版本的浏览器绝对是一个令人头疼的问题,特别是在天朝,老版本的浏览器绝对处于优势地位,下面代码或者能够帮你忙:

<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object…

标签: 代码调试, html5, 代码片段

阅读更多

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头,页面主题,页尾等等区域来实现所谓的页面布局。

在过去的很多年以来,我们都使用DIV来帮助我们划分页面区域,而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次,最新的HTML5最终帮助我们解决了这个问题 - 使用section 元素, 很多人都非常喜欢这个新的HTML成员,因为i终于在HTML标准中给予了我们准确的开发建议,Section增强了整个DOM的可读性,在这篇文章中我 们将介绍这些新的元素,帮助我们了解能够解决什么问题,提供了什么重要的功能并且对于"语义化Web"做出了什么样的贡献!

相关阅读:HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

开发网站

可能大家还记得使用dreamweaver来开发网站的日子,我们通过拖拽来生成一个典型的页面,如下:

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

使用dreamweaver只是为了快速的生成图形界面而非真正意义上的信息语义清晰,当然很多人都使用dreamweaver,包括我自己。典型的傻瓜式开发的产物。

web标准

当…

标签: css, css3, html5, html5教程

阅读更多

使用浏览器生成超棒的midi音乐 - midi.js

使用浏览器生成超棒的midi音乐 - midi.js

还记得前面我们介绍过的WebRTC来控制你的摄像头吗?随着HTML5的发展,越来越多的多媒体相关标准及其实现也随即出现了。

如果你没有尝试过使用javascript来生成midi音乐的话,今天介绍的MIDI.js绝对能够让你眼前一亮。

MIDI.js是一个基于框架帮助你使用浏览器生成MIDI音乐的类库。使用它和jasmid可以用来创建一个在线的web-radio MIDI系统。或者你也可以使用Three.js, Sparks.js, or GLSL来创建一个具有图形动画的动态体验。模仿钢琴或者吉它,打击乐器,MIDI内容来生成你希望生成的效果。推荐使用Google chrome来播放,因为它的时间点是最准确的,当然你也可以使用Safari或者firefox,听起来感觉有点像是演奏家喝多了。

网站地址:http://mudcu.be/midi-js/

标签: html5, midijs, midi, audio

阅读更多

HTML5的未来 - HTML5 还能走多远?

HTML5的未来 - HTML5 还能走多远?

还记得现在就开始使用HTML5的十大原因吗?HTML5目前仍旧是讨论的焦点,在今天的这篇文章中,我们将讨论HTML5可能的未来。

HTML5的问世引发了网络开发者们的激烈争论,HTML5 - HTML5真的有如看上去那么好吗?还是说它只是一个被大肆炒作了的标准HTML?现在网上有大量关于HTML5的虚假信息,但大多人可能根本就不明白什 么是HTML5。然而,事实上当这项技术还在预期阶段时,人们就对它报以了太多的期望。当然也不可否认,这项技术确实给用户们带来了很多新的特性和优势, 甚至Drupal 8也大程度上将它作为热点,但是HTML5同时也有它的劣势,而这个劣势却是不可能被消除的,就是这个原因导致了关于HTML5的无休止争论,了解 HTML5的优缺点将成为唯一结束争论的途经。

HTML5究竟是神马东东?

HTML5 的问世将会成为用户们广泛使用工具之一,所以先要了解什么是HTML5是非常有必要的, 它在HTML原有的基础上新增加了一些标签列入<video>,…

标签: html5, html5未来

阅读更多

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

photobooth demo - gbin1.com

在线演示

WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。

在今天的这篇文章中,我们将介绍来自Wolfram Hempel开发的Photobooth.js,使用这个类库可以帮助你快速的调用摄像头功能,你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照,你可以使用这个功能来实现用户的大头照拍摄,是不是非常不错?

主要特性:

  1. 对比度设置
  2. 颜色设置
  3. 亮度设置
  4. 色调设置
  5. 拍照按钮
  6. 支持最新的chrome, firefox, opera等浏览器
  7. 支持jQuery插件方式和javascript代码方式

浏览器支持 - gbin1.com

使用Chrome打开在线演示后,请确认允许浏览器调用你的摄像头,如下:

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

Javascript代码:

$('#webcam').photobooth().on("image",function(…

标签: html5, webcam, 摄像头, 拍照, webRTC

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.