随笔分类 - html5+css3
摘要：Google 推出 Web Designer，帮助你做 HTML 5 设计的免费本地应用，支持 Windows 和 OS X2013年10月1日感谢读者SamRaper的提醒。Google发布Web Designer beta，这个Windows和OS X下的免费应用可帮助你制作互动广告和其它HTML 5内容，很显然基于HTML 5的广告将在数年后代替现在满天飞的Flash。Google Web Designer主要特性：创造HTML 5动画，内置具备完整而直观的设计工具查看并编辑代码可为DoubleClick何AdMob制作无缝互动广告，并直接发布可自动获得更新而不必重新下载应用继续观看宣传
阅读全文
摘要：1.visual assistx vs 插件http://www.cr173.com/soft/32656.html2. Box2D物理引擎3.csdnhttp://www.csdn.net/泰然论坛 http://bbs.ityran.com/forum.phphimi个人博客 http://blog.csdn.net/xiaominghimi/article/details/10154549
阅读全文
摘要：每天都有很多新的网站推出，其中不乏一些设计极其优秀的作品。这个系列的文章，我为大家挑选了2012年赢得CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平，相信你可以得到很大的启发。您可能感兴趣的相关文章经典网页设计：25个应用视差滚动单页网站经典网页设计：20例与众不同联系表单设计流行趋势：25个最佳的扁平化网页设计案例经典网页设计：20例简洁精美着陆页面设计经典网页设计：20个简约风格电子商务网站Two minute teacher test这是来自挪威的一个教师招聘活动的网站，用于在线测试教师的技能是否达到了要求。使用了大量的 HTML5 和 C..
阅读全文
摘要：说到HTML5，总是会让人不自觉的想到CSS3，貌似他们就应该是成双成对。OK！前几天和大家分享了《使用html5shiv让HTML5通吃IE6/7/8》，那今天，便再和大家分享一个能让HTML5的小老婆（CSS3选择器）也通吃IE6/7/8的方法。Selectivizr是一个JS文件，你只需要引入如JQuery、Mootools、Prototype等N多流行的JS框架中的任意一个，然后再调用Selectivizr，就可以让IE6/7/8支持CSS3选择器。从以下这张图表中你可以看到当前使用Selectivizr后每个JS框架对CSS3选择器的支持程度（Joomla用户表示很欣慰，Mootoo
阅读全文
摘要：「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。比如默认的 html font-size=16px，那么我想
阅读全文
摘要：respond.min.jsrespond.min.js代码：/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license *//*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don
阅读全文
摘要：简介现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。在本文中，将探索如何将媒体查询用于桌面网站、移动电话和平板电脑。同时还将了解如何检测媒体查询支持，以及如何为尚未支持此项技术的浏览器提供可靠体验。先决条件本文中的代码样例被设计为可运行于支持 CSS 媒体查询的网页浏览器中，这些浏览器包括 Mozilla F
阅读全文
摘要：效果：代码： Card 1 Name: Toucan Age: 5 Size: 50 cm Weight: 600 g Food: Fruit Toucan live...
阅读全文
摘要：back21 Jun 2011Category: tech Tags: css最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性。只是对于css几个新加的属性不太熟悉，常常容易搞混。研究了点资料，总结一下。IntroduceTransform在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说
阅读全文
摘要：效果：代码： Iron Man 2 With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony... More info ...
阅读全文
摘要：byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1609一、前面的些唠叨在我浮生如梦的大学那会儿，貌似flash网站还有点小火，且大凡有点含量的flash站点上，杂七杂八的音效总是少不了。一部分音效是烘托渲染气氛的背景音乐，另外一部分就是促进互动，增强体验的交互声音，例如按钮按下或者是经过时“哔哔”声或是“叭叭”声。而在那个时候，在远离flash的web页面上鲜有声音的交互，即使有，要想实现兼容性，要不借助控件，要不还是通过与flash交互实现（例如我之前写过的一个弱智游戏
阅读全文
摘要：.style_mod_type_list li.current dt .style_mod_icons20{-webkit-animation:icon_mod_rock 1s linear infinite;-moz-animation:icon_mod_rock 1s linear infinite;animation:icon_mod_rock 1s linear infinite;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}@keyframes icon_mod_ro
阅读全文
摘要：http://www.html5china.com/HTML5features/canvas/20120501_3591.html1、上下文对象 Context 有三个方法用来创建、读取和设置 ImageData 对象，他们分别是createImageData(width, height)：在内存中创建一个指定大小的 ImageData 对象（即像素数组），对象中的像素点都是黑色透明的，即rgba(0,0,0,0)getImageData(x, y, width, height)：返回一个 ImageData 对象，这个 IamgeData 对象中包含了指定区域的像素数组putImageDat
阅读全文
摘要：offline Tetris css:body {overflow:hidden; background: #d7d7d7;margin:0;padding:0;}#tetris { width: 320px; height: 460px; background:#000; /*border: 1px solid black;*/}#canvas { position:absolute; backgrou...
阅读全文
摘要：offline Tetris try { //执行的代码，其中可能有异常。一旦发现异常，则立即跳到catch执行。否则不会执行catch里面的内容 } catch { //除非try里面执行代码发生了异常，否则这里的代码不会执行 } finally { //不管什么情况都会执行，包括try catch 里面用了return ,可以理解为只要执行了try或者catch，就一定会执行 finally } CACHE MA...
阅读全文
摘要：1.新语义化标签：section、header、footer、nav、article、aside、figure、dialog、time、meter、mark、progress、video2.最新的属性和方法selectors API选取元素getElementsByClassName选取class,包括其中的属性：item namedItemwindow.JSON API : JSON.stringify() JSON.parse()Data-* : 标记可以用来的自定义数据classList接口 : item()contains() add()remove() toggle()拖拽事件 :
阅读全文
摘要：1、 渐变：.gradient{ width:300px; height:150px; filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); -ms-filter:alpha(opacity=100 finishopacity=50 style=1 star...
阅读全文
摘要：1. IE下的渐变： filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='0');2.多背景：background:url(Images/c.png) no-repeat 0 0,url(Images/s-1.png) no-repeat 0 0; View Code –background: -webkit-linear-gradient (top, rgba(255,255,2
阅读全文