Html5&Css3
关注
分享
扫一扫
RaylnGuan
这个作者很懒，什么都没留下…
展开
-
重力感应代码
例子:[code="js"]//======================Orientation======================================= var coordinate = { x : 0, y : 0, z : 0 }; function Orientation(selector) { } Orientation...原创 2011-09-27 08:55:22 · 431 阅读 · 0 评论 -
input框语音功能
Webkit内核的input框带有语音功能, 请看实例[code="html"]Insert title here[/code]原创 2012-04-06 12:26:32 · 171 阅读 · 0 评论 -
Three.js的模型软件Blender
使用Blender软件可以非常简单的导出3D模型为json字符串， 下面是官网地址[url]http://www.blender.org/[/url]原创 2013-04-09 14:41:09 · 161 阅读 · 0 评论 -
本地文件拖拽到浏览器
利用HTML5的File API可以实现文件拖拽到服务器上直接看例子：[code="html"] #drop_zone{ width: 500px; height:300px; background-color: yellow; } 将文件拖拽到这里 var output = docum...原创 2013-03-19 13:22:26 · 866 阅读 · 0 评论 -
-webkit-内核滚动条样式覆盖
[size=medium]今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. 特地看了下他们的代码, 发现了他们做滚动条的各种元素的覆盖, 这个也可以用作select的框覆盖, 相信不久的将来, 这种css设计会用于各种浏览器, 本人在开发IE10内核的项目时, IE10已经是支持这类css, firefox, chrome和safari也是支持的. 特地分享该例子:[/size]...原创 2012-02-23 21:18:36 · 321 阅读 · 0 评论 -
利用HTML5的WebGL制作的3D图形
这里介绍一篇翻译的文章， 写的非常好， 大家可以去看看WebGL的用法.[url]http://www.hiwebgl.com/?p=1058[/url]这里写个小例子让大家对Three.js的WebGL用法的初步了解。Three.js中最重要是[color=red]Camera（镜头）[/color]，[color=red]Scene（场景）[/color]，[color=red...原创 2012-06-27 14:55:44 · 679 阅读 · 1 评论 -
CSS3 Border-Image图片裁剪用法
转载:[url]http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image%E8%AF%A6%E8%A7%A3%E3%80%81%E5%BA%94%E7%94%A8%E5%8F%8Ajquery%E6%8F%92%E4%BB%B6/[/url][size=medium]Border-image的例子:[/size][cod...原创 2012-02-17 01:17:13 · 250 阅读 · 0 评论 -
CSS3中background背景的使用
[size=medium]1. background渐变色例子:[/size][code="html"]Insert title here.div2{ width:100px;height:100px;background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333)...原创 2012-02-17 00:28:32 · 96 阅读 · 0 评论 -
Metro的Grid布局解决自适应问题
Metro使用的是IE10内核, -ms-grid是弹性布局, 解决排版问题[code="html"] Forms Controls - Part 2 body {margin:0;height:100%;} ...原创 2012-02-14 12:29:12 · 318 阅读 · 0 评论 -
CSS3 Media Queries
转载： [url]http://www.w3cplus.com/content/css3-media-queries[/url][code="html"] [/code]或者这样的形式： [code="html"] @import url("css/style.css"); [/code]不知道大家留意没有，其中两种方式引入CSS样式都有...原创 2013-04-27 10:44:15 · 87 阅读 · 0 评论 -
CSS3的keyframe动画介绍
[code="java"]#sun.VeryHuo { animation-name: sunrise; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: ...原创 2013-05-07 13:50:20 · 267 阅读 · 0 评论 -
CSS3 Media Queries在iPhone4和iPad上的运用
[url]http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads[/url]那么以后大家在iPhone4和iPad设备上，就可以按照横竖板来定样式了：1、iPhone4竖板 @media only screen and (-webkit-min-device-pixel-ratio : ...原创 2014-01-07 00:01:13 · 219 阅读 · 0 评论 -
box-sizing使用
box-sizing ： content-box || border-box || inherit取值说明1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：...原创 2013-07-17 13:32:32 · 185 阅读 · 0 评论 -
最简单的拖拽效果
html5中提供了drag的效果， 通过事件可以进行拖拽元素， 请看例子， 非常简单！[code="html"]Insert title herewindow.onload = function(){ var div1 = document.getElementById("div1"); var div2 = document.get...原创 2013-01-28 16:46:48 · 129 阅读 · 0 评论 -
小兔快跑
[code="html"]Insert title herebody { background:#e2b29f; font-size:120%; padding:100px;}.rabbit { width:5em; height:3em; background:#ffffff; border-radius:70% 90...原创 2013-11-20 15:42:42 · 233 阅读 · 0 评论 -
斜坡算法
斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, 就可以直接画出斜坡了sinc(x * M) * sinc(y * M) //M是斜坡的倾斜度可以看一个例子[url]http://www.graphycalc.com/[/url]...原创 2013-01-17 16:52:53 · 1055 阅读 · 0 评论 -
CSS区分横屏和竖屏
如何区分横屏和竖屏， 在CSS中？//竖屏[code="css"]@media screen and (orientation:portrait) { div { background-color:red; }}[/code]//横屏[code="css"]@media screen and (orientation:landsca...原创 2012-09-21 14:57:36 · 222 阅读 · 0 评论 -
Canvas宝典
Canvas宝典, 神器!!原创 2012-12-13 15:35:09 · 93 阅读 · 0 评论 -
如何通过CSS3的Clip制作饼图
CSS3是个非常强大的玩意， 大家可以看看我的例子， 可以实现饼图的制作。原理就是通过4个圆进行控制显示的百分比，详细请看例子[code="html"]Insert title here.circle{ position:absolute; top: 0; left: 0; width: 200px; height: 200px; clip:...2013-05-10 16:46:54 · 112 阅读 · 0 评论 -
CSS3旋转和动画例子
[size=medium][b]1. CSS3旋转的例子:[/b][/size][code="html"] 验证码 .animation-form{ /* -webkit-animation: animate-stripes 1s linear infinite; */ -webkit-transition:all ...原创 2012-02-07 13:42:23 · 146 阅读 · 0 评论 -
KinticJs的基本用法
Kintic是html5中canvas的一个框架，效率高，包小，非常实用，下面是一个小例子，各位要是有兴趣， 可以去官网看看[url]http://www.kineticjs.com/[/url][code="html"]Insert title here(function(){ var load = function(){ var...2012-06-11 15:42:05 · 149 阅读 · 0 评论 -
Google地图两点之间的行车路线和多点的折线图
[b]关于Google地图路线标示[/b]利用google.maps.Polyline可以绘制连接多点的折线图，大致如下： [code="js"]var flightPlanCoordinates = [ latlng1, latlng2, latlng3 ...原创 2011-10-17 11:06:08 · 186 阅读 · 0 评论 -
Google Map和HTML5定位和动态加载
动态加载![code="html"]function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=fa...原创 2011-10-17 10:44:10 · 122 阅读 · 0 评论 -
Geolocation地理定位
[b]有关地理位置的获取和Google Maps API[/b][b]1. W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来获取用户的地理位置信息。[/b]获取当前地理位置的方法navigator.geolocation.getCurrent...原创 2011-10-14 15:31:19 · 153 阅读 · 0 评论 -
Input控件新的属性
[b]添加查询按钮的input控件[/b][img]http://dl.iteye.com/topics/download/12139f2d-bdc5-36bc-b1e1-88cc3470c413[/img][code="html"][/code][b]置灰属性的Input控件[/b][img]http://dl.iteye.com/topics/download/9a572b...原创 2011-10-12 08:39:55 · 129 阅读 · 0 评论 -
Canvas装载图片两种格式
[code="js"]canvas.drawImage(image,x,y)[/code][color=olive]//表明image图片画在画板的x,y上[/color][code="js"]canvas.drawImage(image,x1,y1,w1,h1,x2,y2,w2,h2)[/code][color=green]//表明image图片，图片(x1,y1)起点的截取(w1,...2011-09-27 08:57:02 · 145 阅读 · 0 评论 -
Canvas装载文字两种格式
context对象可以设置以下 text 属性：[color=indigo][b]font[/b][/color]：文字字体，同 CSSfont-family 属性[color=indigo][b]textAlign[/b][/color]：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.[color=indigo][b...原创 2011-09-27 08:56:43 · 226 阅读 · 0 评论 -
3D效果的制作
例子:[code="html"] WebSoket Demo .frame { height: 600px; -webkit-transform-style: preserve-3d; /* -webkit-animation: spin 10s infinite; */ } .fr...2011-09-27 08:56:29 · 116 阅读 · 0 评论 -
3DD效果属性说明
[table]|[b]属性[/b]|[b]说明[/b]|-webkit-transform-style|有两种属性可选:[color=violet]preserve-3d[/color][color=violet]plat[/color]设置为preserve-3d时为[color=red]真3D[/color]设置为plat为[color=red]伪3D(仿3d的2d效果...2011-09-27 08:55:59 · 176 阅读 · 0 评论 -
webkit一些特殊用法
关于webkit一些特殊用法。该属性可以使得一张背景图片进行放大缩小。//定义图片[color=red]-webkit-border-image[/color]:url(xxx) top right bottom left stretch stretch//定义边框的的宽度[color=red]border-width[/color]:top right bottom ...原创 2011-08-07 18:16:17 · 133 阅读 · 0 评论 -
Canvas装载图片
例子：[code="js"]var context = document.getElementById("canvas").getContext("2d"); var mashroomImg = new Image(); mashroomImg.src = "images/mushroom.png"; mashroomImg.addEventListener("load", fun...原创 2011-11-01 16:24:35 · 92 阅读 · 0 评论 -
CSS3伪类选择器
[b][size=medium][color=red]CSS3的一个伪类选择器“:nth-child()”。[/color][/size][/b]语法：[code="java"]:nth-child(an+b)[/code][b]第一种：简单数字序号写法[/b]:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。例子：...原创 2012-06-03 15:38:59 · 132 阅读 · 0 评论 -
canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）
[b]转载： [url]http://www.cnblogs.com/amtf/archive/2012/01/12/2319680.html[/url][/b]只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用Canvas；下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧...原创 2012-05-04 15:43:09 · 849 阅读 · 0 评论 -
镜面反射效果
[code="css"]-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2) ));[/code][b]下面实例是一个css3饼图的生...原创 2012-01-16 21:24:00 · 236 阅读 · 0 评论 -
HTML5自定义新标签属性
[code="html"].data_custom { display:inline-block; position: relative; }.data_custom:hover { color: transparent; }.data_custom:hover:after { content: attr(data-hover-response); color: bla...原创 2012-01-15 20:58:03 · 117 阅读 · 0 评论 -
CSS3动画定义例子
[b]摘自:[/b][url]http://www.css88.com/archives/4381[/url][b]第一个例子是滚动条:[/b](简化版chrome & safari)[code="html"]Insert title here .progress-bar { background-color: #1A1A1A; height: 25px;...原创 2012-01-14 13:09:43 · 122 阅读 · 0 评论 -
Canvas效率问题
Canvas效率问题:[url]http://06wj.blog.163.com/blog/static/83465735201151510371972/[/url]原创 2012-01-07 15:28:25 · 172 阅读 · 0 评论 -
使用Jetty的WebSocket使用方式
[b]首先,需要服务器Jetty. 因为现在Tomcat并不支持Websocket解压好服务器Jetty后,在命令行(cmd)(Jetty当前目录)中运行Java –jar start.jar既可[/b][b][color=red]编写服务器代码:[/color][/b]创建类：WebSearchServlet.java [code="java"]public class We...原创 2011-11-05 02:09:35 · 219 阅读 · 0 评论 -
Canvas绘图
例子：[code="html"] function draw(){ var canvas = document.getElementById("can"); var context = canvas.getContext("2d"); //保存绘画状态 context.save(); //移动起点位置 context.translate(70,140);...原创 2011-11-02 09:54:23 · 99 阅读 · 0 评论 -
文字实现水平垂直居中
文字实现水平垂直居中的关键代码：[code="html"] display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horiz...原创 2014-01-11 09:58:04 · 173 阅读 · 0 评论