随笔分类 - html5+css3
摘要：本鱼表示偶已经不会取标题了。。。当时写这篇文章主要是想探讨一下优雅降级和渐进增强的区别，按照正常的逻辑思维，不管是降级还是增强，应该对于效果是没什么区别的，因为后者会覆盖前者，但今天无意看到张鑫旭的一篇文章，关于CSS3属性的书写顺序（10年的，原谅我的孤陋寡闻T_T），标准的css3属性和带web...
阅读全文
摘要：首先来看下对各大浏览器的兼容性IEFirefoxSafariChromeOperaCSS 2D Transformno3.53.22.010.5CSS 3D Transformnono4.* (Mac)nonoTransitionno3.73.22.010.5Animationnono4.02.0notransform这个比较简单，控制元素进行平面上的二维变换，有三个属性：1. 旋转 rotate()。对元素按顺时针或逆时针方向进行旋转，其值为正数时，表示按顺时针方向旋转，其值为负数时，表示按逆时针方向旋转。单位为度数（deg）。例如: ps:旋转属性可以实现那种常见的三角的tips效果。把一
阅读全文
摘要：用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。JS代码：/* * 模拟搜索下拉select * 默认调用方式：$(el).setSelect({ * optionList: [], //这里是下拉的选项，如['aa','bb']* hiddenInput: '#optionHidden', //隐藏的input获取选中后的值，供表单提交时传值* getOption: '#sOptionBtn',* callback: function(option){}* }) **/(function ($) { $
阅读全文
摘要：开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：意思是当屏幕的宽度大于等于400px的时候，应用styleA.css在media属性里：screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定
阅读全文
摘要：之前转载过用边框实现三角形的技巧，早上重新看了一下淘宝跟QQ空间顶部工具栏的三角形实现方式，并记录下来效果图：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>.qq_div{ width: 100px; height: 30px; margin: auto; text-align: center; padding: 50px; background:#50803F; color: #FFF
阅读全文
摘要：姐不太道德地把它的代码扒了下来，放在这里慢慢研究<!DOCTYPE html><!-- saved from url=(0036)http://y.qq.com/vip/promote_yearvip/ --><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><t
阅读全文
摘要：转自：http://www.rainweb.cn/article/css3-transition-menu-a.htmltransition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。查看demo主要就是设置图片的属性left 从0过度到300，透明度从0变到1：.mh
阅读全文
摘要：“我们正在用HTML5编写我们下一套移动产品。”“是啊，这些天很多人在玩着Appcelerator，我也在玩着。”“嗯，但这并不是我要说的那种HTML5产品。”最近，我有很多类似的交流对话，可能因为我正在开发一套HTML5的应用吧。就像2005年的“AJAX”，“HTML5”这个术语现在还没有被清晰地定义，在未确定这个新技术有什么优势前，它就已经被四处套用，甚至投入运营。如果你在一间被热衷新技术的...
阅读全文
摘要：background-clip + text-fill-color下的实现如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果：<h2 class="text-gradient">天赐美妞</h2>CSS(CSS代码中关键有用的其实就是最后三行):.text-gradient { display: inline-block; color: green; font-size: 10em; ont-family: ´微软雅黑´; background-image: -webkit-gradie
阅读全文
摘要：ext-stroke(文本描边)和text-fill-color(文本填充色)注意点：目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;text-fill-color：颜色值，和color属性差不多都是文字的样式；同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；text-fill-color可以使用透明值，即：text-fill-color：transparent查看一个text-stroke(文本描边)和text-fill-col
阅读全文
摘要：淘宝UED空雁大师的佳作原文地址：http://ued.taobao.com/blog/2009/12/17/html5_css3/文中的揭秘 HTML5和CSS3.ppt地址貌似已无效，需要的同学把邮箱地址发上来，一起共享
阅读全文
摘要：Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Do
阅读全文
