如果用过twitter，你可能已经留意到当输入框获得焦点后，它的边框会有蓝色发光的效果，并且这里运用了transition属性，使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。 CSS代码如下： input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; outline:none; } 这里通过运用transition属性来展现inp......
CSS3跨浏览器验证工具 这篇文章介绍一些帮助写CSS3代码的工具 CSS3按钮 介绍不用图片用纯CSS3创建按钮的教程 简洁时尚的CSS3表单 该教程讲述用一些CSS3的属性创建表单。你可以简单的定制这些样式。 纯的CSS3按钮被按下背景渐变效果 本教程中，讲述只用CSS而不用图片来创建按钮被按下、划过效果和背景渐变效果。在Webkit浏览器中，运用渐变特性‘-webkit-gradient’来创建颜色渐......
一、全浏览器支持的css选择器（由于很好理解，demo省略） 1.* *通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。 * { margin: 0; padding: 0; } 也可以用*来匹配某一元素下的所有子元素： #container * { border: 1px solid black; } 2.#X #+id名，这是日常常用的css选择器，用于......
在说YUI3的css栅格系统前，明河先带大家回顾目前主流的多列布局解决方案。 玉伯在《渐进增强式布局探讨》中探讨了大部分的栅格布局解决方案，主流的有： 1、Float布局 这种布局方式，我想大家是最熟悉，曾几何时，都受过这种布局的“摧残”，尽管有这样或那样的问题，Float堪称经典。 2、表格布局 在web1.0时代横行的布局方式，人称古董，在日常开发中偶尔还会用到。 ......
这几天有几个幻灯片要做，所以就拿明河的verticalTab插件玩了玩，呵呵，设置很简单，只需自己改一下css即可，另外如果自己有特殊需要也可以根据自己特殊情况添加代码。以下给出两个demo效果很接近，只有css做了改动。 demo1： demo2： 具体关于verticalTab的用法请参看明河的文章http://www.36ria.com/2613 由于本人js和css方面并不是很专业，文中可能存在一些不合理或者不合适的写法......
压缩包包含了所有效果示例，部分是css3的效果，无法应用于IE。 1、Gradient Buttons with CSS3 2、Liquid & Color Adjustable CSS Buttons 作者的思路还是很有意思，利用三张半透明的背景图，实现多种颜色的按钮，你只有修改下背景颜色即可，还兼容IE。 3、CSS3 Gradients: No Image Aqua Button 明河按教程的思路作了一遍，发现实现效果与原作者的不同，诡异。 4、Creating buttons with CSS3 5、Fast Rollov......
Css3的出现，给网页设计带来了很大的方便，比如这个3D文本的效果，如下图： 接下来让我们共同学习一下该效果是如何实现的： 多重文本阴影 这个效果主要运用了css3中的text-shadow属性，通常这样来写： .shadow { text-shadow: 2px 2px 4px #000; } 语法结构： .shadow { text-shadow: [X offset] [Y offset] [Blur size] [Color]; } 我们可以给同一个文本加多个阴影： .shadow { text-shadow......
这个效果是不是很熟悉啊~对啦，JQDock可以轻松实现这样的效果，那么我们就来学习一下，用纯CSS的两种方式，来实现同样酷的效果。 一、先来看第一种方式（基本）： 1.首先HTML列表用ul li： <ul id="bubble"> <li> <a class="icon feed" href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">Full RSS Feed</a......
1、居中一个层时，外边距失效 margin:auto;是让层居中显示很经常用到的方法，此方法是有一定的条件的，比如这个层必须有宽度、高度，来看示例代码： #container{ border: solid 1px #000; background: #777; width: 400px; height: 160px; margin: 30px 0 0 30px; } #......
明河这里所说的bug不是指IE6无法显示png的问题（鄙视下百度，搜索出来的结果大半是重复，而且还不对题，结果google一下，找到问题所在了），而是 在IE7和IE8下如果你动态修改png图片的透明度，比如说你应用一个fadeIn，将图片的透明度调到25%,这时候就会出现非常诡异的bug，png的透明信息没了！变成了非常难看的黑色！ 这个bug不常见，我也是前几天在写shareList — jquery收藏&a......