萧晗

摘要： box-shadow:水平偏移+- 垂直偏移+- 模糊度+ 向外扩展+ 阴影颜色 向内或者向外（inset）默认向外；<div class="boxShadow"> <a href="#" class="a1">简单的偏移阴影</a> <a href="#" class="a2">偏移模糊阴影</a> <a href="#" class="a3">外发光效果</a> < 阅读全文

摘要： 一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。 * 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。二、border-radius属性CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一 阅读全文

摘要： 特别声明：此篇文章由胡均根据Louis Lazaris英文文章原名《Learning To Use The :before And :after Pseudo-Elements In CSS》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/以及作者相关信息——作者：Louis Lazaris——译者：胡均伪元素能做什么 阅读全文

摘要： 起床之后，看网页到处都是支持雅安，然后各种网页灰去查阅了资料，好多网页，IE都是灰色的，但牵涉到firefox chrom 就不变灰啊，各种变灰的级别都有因为在家里，就随便找了一个项目，然后参阅网站上的效果发现怎么弄firefox 都不能全部变灰，接着查资料，翻到最后，终于醒悟，其实那个window.onload=function(){ //网页变灰grayscale(document.body); }　这个写法是有效果的，至少 firefox 浏览器下，部分是变灰色了，让我不解的是为嘛只有一部分呢，在想了下，原来是因为其他不变灰的地方，都是图片（因为做的各种形状的效果，就都用的图片） 好吧. 阅读全文

摘要： 花里胡哨的东西在靠谱的网站已不常见，因此，要找个很纯粹的装饰性元素我还是好好折腾了一把。所谓“装饰性元素”，指页面主体内容并没有多大的必然联系，更多作用是美化，引导的元素。在布局这些元素的时候，我们要把它看成“外来者”，排挤，可缺省，要让其存在与否仿佛与页面没关系一样。什么意思，就是，让这些元素直接从页面上delete掉，页面毫无反应，好比地球上死了一只蚂蚁，上帝压根感觉不到。例如，下面的对比，以及下面的下面的对比：通过上面的“找你妹”，可以发现这些站点的这类元素都是可缺省的。但其实（可缺省的实现）可能并不是有这个意识，而是，技术实现使然——不使用绝对定位，我搞不定哈！OK，全然正面的例子显然 阅读全文

摘要： 一、你至少应该知道ARIA是什么东西！WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！二、为什么需要ARIA？回答标题问题前我先问其他几个问题？如何让盲人用户知道当前浏览区域就是网站主导航？如果让盲人用户知道点击某个按钮后出来的是弹框？如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？如何让盲人用户知道您使用了li标 阅读全文

摘要： 一、众所周知的与不为所知的我们平时涉及点击交互事件的时候，都是使用的a元素或者button元素，原因是可以相应键盘focus效果以及回车触发点击事件，这是众所周知的。但是，可能存在一些特殊情况，我们需要使用默认没有键盘可访问性的元素，例如span元素，我们可以通过一定的设置支持键盘的可访问性，这是不为所知的，也是本文的重点所在。二、span元素处理与测试要让一个普通的span元素达到一个含button元素的键盘可访问性，我们需要如下处理：首先，很显然的，绑定点击事件；给元素设置tabindex="0"属性，使得元素在tab键锚点切换的时候，可以获得焦点；使用role属性告诉 阅读全文

摘要： 二、前事不忘后事之师看似花边的故事讲完了，回到正题。智者千虑必有一失，我的失当然更多，好在没有大的纰漏，挖的都是些小坑，还是可以填平的。其实，我本不想讲这些坑坑洼洼，因为，每个人从从事的项目、所做的工作都是不一样的。我可能自认为的经验并不一定就受用于他人，甚至，特殊情况下会误导。因此，本文的东西，需要您的甄别，不要一股脑都接受了。你认为是这样的就这样，你不赞同的就不赞同。1. 整站小图标Sprite由于是面向整个网站做架构，因此，显然，那种超级Sprite的做法是非常不可取的（除非你这个页面与其他页面完全独立、无耦合；或整体页面数有限）（参见下图企鹅微博的超级背景图片集），这样的大坑我是不会挖 阅读全文

摘要： 在页面最底部添加 <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>选中IE6 浏览器，F12 就会出现firebug模式 阅读全文

摘要： 前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。语法:R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数| 百分数A：透明度。取值0~1之间取值：<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值 阅读全文