随笔分类 -  html5/css3

摘要：关于本地存储我就不做太多的介绍,以及本地存储的历史。从cookie到IE的userData再到flash然后是SQLite。他们各有优点与弊端，而如今HTML5千呼万唤始出来将它们统一了。 在HTML5中本地存储是window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。 首先，判断浏览器是否支持localStorage:if(window.localStorage){ alert('This brow 阅读全文

摘要：//得到2D渲染上下文var cancans = document.getElementById("myCanvas");var width = cancans.getAttribute("width");var height = cancans.getAttribute("height");var context = document.getElementById("myCanvas").getContext("2d");var x = 40, y = 40;context.fillStyle 阅读全文

摘要：认识HTML5的WebSocket 在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。一、什么是WebSocket API?WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器. 阅读全文

摘要：HTML5规范中，history对象提供了丰富的接口使得开发者可以方便的在历史记录中添加状态或改变状态，这样我们既可以使用javascript部分更新页面，又能更新地址栏和浏览器记录。 以前的解决方案 1、window.history.back(): 后退到上一个页面 2、window.history.forward()：前进到下一个页面 3、window.history.go()：跳转到某一个页面，go(0)代表刷新当前页面，go(-1)代表跳转到前一个页面，诸如此类 4、window.history.length：当前页面历史记录的条数 现在的解决方案 提供了两个新方法:pushSta.. 阅读全文

摘要：本文转自：http://www.html5cn.org/article-596-1.html在过去，我们都是使用图片或者JavaScript来实现漂亮的按钮效果，随着越来越多的浏览器对CSS3的支持和完善，使用CSS3来实现美观的按钮已没有太多的障碍。今天，本文收集了12个很不错的CSS3按钮方案并有相关的使用教程。BonBon ButtonsZardiCSS3 Buttons With Simple MarkupFancy Buttons10 Nice CSS3 ButtonsCSS3 Animated Bubble ButtonsSuper Awesome Buttons with CS. 阅读全文

摘要：HTML5 为拖放行为提供了Drag & Drop API，Drag代表拖动，Drop代表放下。用于方便的处理这类事件。相较于以前需要用javascript来进行且需要对不同浏览器的各种版本进行不一样的写法而言，拖放的API无疑是开发者的福祉。下面是我学习的笔记。尽管如此目前还是有各种浏览器可能不支持拖放API所以在使用拖放API之前先判断该浏览器是否支持。调用modernizr.js文件，Modernizr是为HTML5而生的开源js库，他能检测HTML5和CSS3的每一个新特性。到http://www.modernizr.com/下载相应的js文件，具体使用方法可以参考http:/ 阅读全文

摘要：CSS3提供了强大的动画功能，包括transform(变换)、transition(转换)和animation(动画)。这里记录我从论道和网上的学习笔记。 transform主要控制元素进行平面上的二维变换。eg:旋转，缩放，变形。 1、旋转属性:rotate，当旋转的角度为正值时表示顺时针方向旋转，单位为度数(deg)。transform:rotate(120deg); 2、缩放属性:scale，可以对元素按照百分比进行放大和缩小。transform:scale(1.1); 3、偏斜属性:skew,有两个参数，第一个表示按照x轴逆时针偏斜，当为负值的时候表示顺时针偏斜。第二个参数表示y轴.. 阅读全文

摘要：第一种是HSL。H、S、L分别表示色调，饱和度和亮度。使用HSL可以基于色调、饱和度和亮度进行调节不需要算RGB的值。 HSLA就是在HSL上加上"Alpha通道"(透明度)，可以使用HSLA为HSL进行透明度的设置。A的默认值是1，就是不透明效果跟HSL一样。 第二种是RGB。 语法: R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百分数 A：透明度。取值0~1之间 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色； 在背景属性中使用RGBA: background: -webkit-linea 阅读全文

摘要：CSS3引入了背景渐变、background-origin、background-clip、background-size、遮罩等多个属性。这里将记录我从网上和书上学习的笔记和心得体会。 首先是渐变，我这里讲述的渐变不仅仅是背景色的渐变还将包括透明度渐变。以前做这种背景色渐变的button是要使用图片的（或是其他方法），由于在下小白不会ps所以往往都用现成的图片。如今css3就能轻松实现这样的效果。渐变分为很多种，这里我记录两种。 1、线性渐变 线性渐变代表背景色的变化按照x轴或y轴平滑变化。 语法: background: -webkit-linear-gradient( [point .. 阅读全文