CSS

on CSS, Tips with Comments

移除Textarea周围额外的空白

以前，textarea 100%宽度撑满父容器一直都是一个常常被提及的问题。作为 inline-block 显示的 textarea 无法像 block 那样在宽度上自动的充满容器，于是为了让 textarea 能够撑满容器并且回避因 padding 和 border 而产生的额外计算，各种手法也就层出不穷。 比如，设置宽度为98%，比如，嵌套一个div然后设置它的 padding-right 等于内含的 textarea 的边框和 padding 之和，再让…

on CSS with Comments

CSS伪类与CSS伪元素的区别及由来

关于两者的区别，其实是很古老的问题。但是时至今日，由于各种网络误传以及一些不负责任的书籍误笔，仍然有相当多的人将伪类与伪元素混为一谈，甚至不乏很多CSS老手。早些年刚入行的时候，我自己也被深深误导，因为论坛里的帖子大多不关心这种概念的细微差别，即使有人出来说一句：“这两个是不同的”，也只是被更多的帖子淹没掉而已。所以觉得有必要写下这些我所知的部分，这里着重写的是为什么这两者不同，以及一些平时容易错过的细节。 无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。 标准的定义 在CSS2.…

on CSS, Detail with Comments

那些CSS的细节问题(1)

几个月前写了一篇 那些JavaScript的细节问题(1)，专记些细微的，古怪的，甚少有用的东西，不过，可以当作茶余饭后的消遣。这次凑了3个CSS的问题，也好给JavaScript那个系列凑个成对。 好了废话不多说了，来看看下面这些或易或难的无聊问题吧～ 1. 指针样式的变化 隐藏或显示带有指针样式的对象后，指针样式会马上改变吗？ 文字上很难一言概之。想象一下有两个正方形的div，背景一红一蓝，它们都绝对定位并重叠，红色(鼠标样式为默认)在下，蓝色(鼠标样式为手形)在上。初始状态下，鼠标蓝色层上，数秒后，蓝色层被隐藏，…

on CSS with Comments

CSS4 Media Queries 新特性

来自 css3.info 的消息，CSS4 Media Queries 已经成型，尽管它现在还只是一份编辑草案，不过我们仍然可以从中看到新的 Media Queries 所具备的特质。在 Changes Since the Media Queries Level 3 一节里，就能看到 CSS4 Media Queries 的新特性。 当前，主要添加的是这三个新的特性值："…

on CSS with Comments

调试样式：debug.css

之前写过一篇 开发过程中的调试样式，讲述了著名的37signals团队如何用样式视觉化代码的缺陷。但那只是浅尝辄止地提及了一下，现在我整理了一份相对完整的样式表。 由于是一个工具，主要是以用为主。所以如果你不想看下面的详细解释和说明，你可以直接将下面的链接拖动到书签栏： Debug CSS by uedbet手机官网下载 这是一个 js 的 bookmarklet，它的作用只是简单地在页面注入一段样式。在把它放到书签栏之后，打开你喜欢的网站，然后点击这个书签，看看发生了什么？:) RSS可能看不到，你也可以复制下面的代码并保存为一个书签，或者直接复制到浏览器地址栏后回车，效果是一样的： javascript:(function(){var elm…

on CSS with Comments

再谈box-shadow

早先，我详细地写过2篇关于 box-shadow 的文章: CSS3 box-shadow 详解(1) 以及 CSS3 box-shadow 详解(2)。但用现在的眼光来看，内容已经有些旧了。趁着这片闲言碎语，对 box-shadow 再做一些补充。 box-shadow 是我最喜欢的CSS3特性之一，它能创建凸显层次的阴影，但却还可以充当很多角色：边框/层叠/渐变/勾线，等等。当前浏览器的支持程度已经非常理想，除了IE8及以下，…

on CSS with Comments

CSS实现字体内阴影

上篇 像Photoshop一样地使用CSS 讲到PS和CSS的关系日趋紧密。但是我遗漏了一些，那就是字体的阴影效果的实现。对于投影，text-shadow 能很好的满足，但是如果是字体的内阴影或内发光，又该如何？熟悉CSS3 text-shadow 的朋友都知道，text-shadow 并没有类似 box-shadow 的 inset 值来表示内外阴影，所以虽然 text-shadow 虽然也支持多阴影，但在内阴影方面却无能为力。 但真的是这样吗？先看看下面的字体效果(IE10+，以及其他所有浏览器，如果你是通过RSS，请到我的博客查看效果)—— SwordAir.…

on Photoshop, CSS with Comments

像Photoshop一样地使用CSS

无论是作为前端，还是作为设计师，应该对下面这个界面颇为熟悉。 Photoshop的图层样式，恐怕是网页设计里最常接触的操作界面之一，因为传统Web设计很大程度上就是图层的样式层叠。很多年前，我还是一个蹩脚的设计师的时候，就常常看那些设计教程里大段大段的关于图层样式调整的描述，所以直到现在即使自己成了前端，但那些样式的调整都历历在目。而现在，如果用一个前端的眼光来看待Photoshop的图层样式，是可以把层的概念和样式直接映射到代码里的。 CSS究其本质，无非是一种描述性语句，与我们操作GUI的界面而言其实没有什么太多不同：选项和参数组成了完整描述使得浏览器能准确地反映出来。随着CSS3的普及，大部分的图层样式就能直接对应于CSS代码，而不需要我们再去切图。 如你所想，投影、内阴影、外发光、内发光，乃至斜面浮雕和光泽，都部分或全部的由 box-shadow 模拟出来。…