Clik here to view.
纯 CSS 实现文本渐变效果
随着 CSS 的最新进展，我们现在能够获得强大的造型技术，包括容器阴影，圆角，背景渐变等等。但我们目前没有能力在文本上运用渐变效果。幸运的是，在这篇纯 CSS 实现文本渐变效果使用一些花招，我们可以迫使代码呈现这种效果 – 至少在 Webkit 引擎浏览器中如此！ 芒果前天的文章 Google Font API，在网页上使用个性字体 谈到了 Google Font API，今天顺道试试手。...
View ArticleCSS 左右两栏自适应布局
昨天在项目中遇到的一个 CSS 左右两栏自适应布局问题，做了个简单的演示稿，以作备份。 场景一：文字围绕 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 –...
View ArticleMinify，合并压缩 JavaScript 和 CSS 文件
对于网站应用而言，HTTP 请求是一件奢侈的事情，所以我们要尽量减少它。减少 HTTP 请求也正是网站性能优化的一个要素。通常通过手工合并会带来大量的维护问题。所以能交给机器做的就让机器来做吧。 之前有心的网友可能会发现，芒果的 CSS 并非一般的样式表引入方式，而是像下面这样： <link...
View ArticleClik here to view.
CSS3 Media Queries，媒介设备查询
CSS2 允许通过 media 属性为不同媒介设备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media queries 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备，并采用不同的样式表。例如，你可以有一个大屏幕显示器的专用样式和一个移动设备的专用样式。这将非常强大，因为它允许不同的设备使用不同的界面外观，但并不改变你的文档内容。阅读这篇文章来了解一下国外已经良好应用...
View ArticleClik here to view.
CSS 边框重叠鼠标悬停效果
前几天某个同事的项目中碰到一个边框重叠鼠标悬停效果，要实现鼠标移上后按钮边框换色，但左右两个按钮的边框又是合并在一起的。就像下面这张图片示意： 如果看不明白，请移步参考淘宝搜索结果页面中的“信用”、“价格”两个排序按钮。http://s.taobao.com/search?q=%CC%D4%B1%A6 以三个横排并列的按钮为例： <span class="grid"> <a...
View ArticleClik here to view.
CSS 中文字体 Unicode 编码方案
在 CSS 中使用中文字体通常直接设置字体名称，比如设置字体为宋体：font-family:’宋体’；但因此产生的一个问题是，如果 CSS 编码有误，会导致页面加载后 CSS 中的中文字体乱码，请看下图所示： 通常会采用对中文字体进行 Unicode 编码的方式来解决这个危险的问题。比如字符“宋体”经过 Unicode 编码后为 “\5b8b\4f53″。以淘宝为例：font:12px/1.5...
View ArticleClik here to view.
多层元素嵌套的圆角按钮
圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。 自适应宽度的按钮，通常会采用类似下面的切图方法： 这样一来，只需要嵌套两层标签即可： <a href="#"><span>按钮</span></a> a 标签设定右侧块的圆角背景，span...
View ArticleClik here to view.
IE 表单控件的按钮聚焦问题
按钮的写法有两种，一种是 <input value=”按钮”/> 或者 <button>按钮</button>，如果按钮用于表单提交，还必须加上 type 属性（type=”submit”）。为了美化按钮效果，一般会设置背景和边框属性。 但在 IE 下，表单区域获得焦点的情况下，如果按钮的 type 属性被设置为...
View Article神奇的 CSS 元素透明法
1、HTML 元素透明 其实本身，CSS 实现元素透明是件容易事儿。直接上代码： opacity:.5 opacity 指的是不透明度，取值为 0~1 之间，1 表示完全不透明，0 表示完全透明。 A 级浏览器基本都支持 opacity 属性，但碰上 IE，总没好事。不过 IE 有滤镜，可以帮助我们拐弯抹角地搞定不透明度： filter:alpha(opacity=50);...
View Article快速转换 CSS 字体 Unicode 编码
看了这篇 CSS 中文字体 Unicode 编码方案 后，某位童鞋说一用到中文字体就要去找对照表，麻烦死，那这样吧： escape('宋体'); 这样生成的宋体编码为： '%u5b8b%u4f53' 你可以手工将 %u 替换为斜杠 ‘\’。或者也可以这么搞： escape('宋体').replace(/%u/g, '\\'); 那就直接返回需要的编码格式鸟~ © 2013 芒果小站 |...
View Article使用 标签创建水平分隔线
语义化 Web 是一件让人蛋疼的事，面对各种浏览器折腾的情况，想要挨个爆菊，总是会用没神马意义的 div 和 span 嵌套一层又一层。 比如制作一条水平分割线，如果你不觉得别扭，你可能会使用以下方法： <div style="border-bottom:1px solid #000;"></div>...
View ArticleClik here to view.
如何使用 CSS3 伪类
CSS3 是个好东西，但也很容易被她的变形（transform）和动画（其中许多特性因浏览器厂商而异）特性所迷惑，因而忘了那些已经被添加到标准规范中的最为基本的选择器。许多强大的新伪类选择器（最新的 W3C 规范中列出了 16 条）使得我们能够在新的标准范围内使用元素选择器。 在探讨这些新的 CSS3 伪类之前，先简要回顾追溯一下这些在 Web 应用中常常被误解的 CSS 选择器。 伪类简史 在...
View ArticleClik here to view.
IE6 下的神奇 CSS 字体 bug
一直用的 Aptana 当编辑器，这玩意儿有一个很强大的代码格式化功能。你看： 不过格式化后就出问题了，注意格式化后 font 属性的写法。问题出在 font 属性的合并写法，12px 和 1.5 之间除斜杠之外的空格，IE6 下会导致后面设置的 arial 字体不生效。也就是直接宋体了。诶，比尔盖茨啊，说你什么好呢~ © 2013 芒果小站 | Godaddy 最新优惠码
View ArticleClik here to view.
12 款简化 CSS3 开发的实用工具
CSS3 Pie 对于 IE6/7/8几乎不支持任何 CSS3 特性，我想大多数人都不会惊讶。不幸的是，有些客户可能需要您创建一个网站，能使得 IE 浏览器下看起来和高级浏览器中效果一致。这就是 CSS3 Pie 施展超能力的时候了：它允许你在 IE 下也能使用很多 CSS3 炫酷功能。 猛击这里访问 CSS3 Pie CSS3 Builder 有了这个工具，你可以设计出和 Photoshop...
View ArticleCSS 忍者：安全的 CSS hacks 秘籍
你如何搞定 IE 这只难以驯服的怪兽？使用 CSS Hacks 或者条件注释么？恐怕没有什么解决方案是完美的。每个设计师或者前端码农都会有自己打败 IE 行之有效的方法。所有这些技术都各有利弊，让我们一起来看看。 通过条件判断引入样式表 使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表，而其他非 IE 内核浏览器则自动忽略这段蹩脚的 HTML 注释。下面是一个例子：...
View ArticleClik here to view.
自定义文件上传控件样式（兼容 IE6）
要想直接通过 CSS 来控制文件上传控件，基本没戏的。当然也有一些解决方案，例如 Mr.Think 的这篇文章《利用label标签和CSS美化文件上传表单(不兼容IE6)》。昨天也恰好遇到了这个问题，顺手记录下吧。 首先，给 <input type="file"> 元素戴个套子，这样比较安全嘛，是不是？看代码： <span...
View Article让 Chrome 崩溃的 CSS 代码
background-image: -ms-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #78AAF6 100%); background-image: -moz-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #78AAF6...
View ArticleClik here to view.
纯英文纯数字 CSS 强制折行
文字折行经常被测试拿来当 bug 提，这种蛋疼的事情还是写个公共类了事吧！ .break-word { word-wrap: break-word; break-word: break-all; } © 2013 芒果小站 | Godaddy 最新优惠码
View Article抛弃 CSS Hacks 后的浏览器兼容方案
如果你看过之前发在芒果小站的《CSS 忍者：安全的 CSS hacks 秘籍 》这篇文章，应该基本清楚了通过 IE 条件注释替代 CSS Hacks 的技巧。最近考虑在项目中实际应用这个方案。 一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本，当然在 IE9 开始逐步推向市场后，又会有更多的衍生版本。所以我目前只考虑 IE7~9 版本的兼容情况。涉及到的条件注释代码如下：...
View ArticleClik here to view.
纯 CSS 单行文本溢出追加省略号
之前一直以为单行文本溢出追加省略号没法兼容所有浏览器，经元泉同志提点，顺利解决： 样式代码，四个属性都是必须的，并且宽度必须设在当前容器上，父容器定宽无效： .box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 测试 IE6、IE7、IE8、IE9、Chrome、Firefox...
View Article