Name: CSS揭秘
ISBN: 9787115416940

作者: [希] Lea Verou
出版社: 人民邮电出版社
原作名: CSS Secrets: Better Solutions to Everyday Web Design Problems
译者: CSS魔法
出版年: 2016-4
页数: 260
定价: 99.00元
装帧: 平装
ISBN: 9787115416940

豆瓣评分

9.4

256人评价

5星

72.3%
4星

21.1%
3星

6.6%
2星

0.0%
1星

0.0%

评价:

内容简介 · · · · · ·

本书是一本注重实践的教程，作者为我们揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。

本书的读者对象为前端工程师、网页开发人员。

作者简介 · · · · · ·

Lea Verou

W3C CSS工作组特邀专家，设计CSS语言的委员之一，此前曾在W3C担任开发者代言人。目前，她在麻省理工学院从事人机交互领域的研究。她还是一位博客作家，并经常在国际性的技术会议上担任讲师；她创建的多个开源项目广受开发者欢迎。

CSS魔法

原名张鹏，国内知名的CSS技术专家，百姓网前端架构师。拥有近十年的网站开发经验，在移动前端领域积累颇深，自称“披着工程师外衣的设计师”。他是CMUI、Action、GHX等开源项目的作者，曾为GitHub、Gulp、Stylus等网站和项目翻译过大量文档；其生动活泼、循序渐进的博客写作风格深受读者喜爱；在CSS Conf等技术会议上所作的演讲广受好评。

目录 · · · · · ·

译者序
序
前言
第1章引言
第2章背景与边框
第3章形状
· · · · · · (更多)

"CSS揭秘"试读 · · · · · ·

Web 标准：是敌还是友标准的制定过程与大众的理解大相径庭的是，W3C 并不“生产”标准。实际上，它扮演的是一个论坛的角色：W3C 以工作组的方式，把某项技术的相关各方聚集起来，最终由他们来产出标准。当然，W3C 并不只是一个观察者：它设定了整个平台的规则，监督整个进程。但这些技术规范（基本上）并不是由W3C 的工作人员编写完成的。 CSS 规范通常是由CSS 工作组的成员来...

第1章:引言

· · · · · · (查看全部试读)

豆瓣成员常用的标签(共71个) · · · · · ·

CSS 前端开发前端网页设计 Web前端开发 CSS秘笈编程计算机

喜欢读"CSS揭秘"的人也喜欢的电子书 · · · · · ·

支持 Web、iPhone、iPad、Android 阅读器

: 你不知道的JavaScript（上卷）

24.99元

: Node.js实战

29.99元

: JavaScript语言精粹

24.01元

: 深入浅出Node.js

39.99元

: 你不知道的JavaScript（下卷）

39.99元

喜欢读"CSS揭秘"的人也喜欢 · · · · · ·

: JavaScript设计模式与开发实践

: JavaScript高级程序设计（第3版）

: 深入理解ES6

: JavaScript面向对象编程指南（第2...

: 学习JavaScript数据结构与算法

: 高性能JavaScript

: JavaScript忍者秘籍

: SVG精髓（第2版）

: HTML5 Canvas开发详解

: JavaScript面向对象精要

我来说两句

短评 · · · · · · ( 全部 93 条 )

CSS揭秘的话题 · · · · · · ( 全部条 )

什么是话题

无论是一部作品、一个人，还是一件事，都往往可以衍生出许多不同的话题。将这些话题细分出来，分别进行讨论，会有更多收获。

我要写书评

CSS揭秘的书评 · · · · · · ( 全部 5 条 )

请问各位是如何打开书中的“试一试”页面的？

喜欢这本书，特别的实用，不仅仅是使用技巧，里面更深远的是对于css思想的传递。但是非常遗憾，天朝威武，我完全打不开书中每一个 http://play.csssecrets.io 里面的“试一试”，作为一个无法翻墙的前端妹子来说，我对此表示森森的无奈，买了这本书却打不开书中的例子，偶既焦... (展开)

6回应

涅瓦纳 2016-06-25 11:39:49 O'Reilly Media2015版

Based on two popular talks from author Lea Verou—including "CSS3 Secrets: 10 things you may not know about CSS"—this practical guide provides intermediate to advanced CSS developers with more than 40 undocumented techniques and tips for using CSS3 to crea... (展开)

0回应

刘炬光 2018-08-28 11:48:19

中后台前端开发必读

前端目前得有70%的从业者主要开发后端管理系统，也就是我们常说的中后台架构，平时多是通过 Ant Design, ElementUI, Fusion 等搭一搭页面，产品对于页面长什么样子也没有一个认识，所以从CSS层面去对页面进行精细化控制的机会就非常少，导致大家平时都疏忽了CSS的学习。这本书... (展开)

0回应

birdstudio 2016-03-16 23:18:53

《CSS Secrets》中文版千呼万唤始出来：多年难得一见的重磅 CSS 图书

据悉，这本书的中文版将在 2016 年四月初在各大书店上架。虽然书还没有正式面世，但这本书的翻译者 “CSS魔法” 已经把部分样章发布出来了，心急的读者可以先睹为快： http://book.cssmagic.net/ 我自己的感受是：这确实是多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进... (展开)

0回应

birdstudio 2015-11-12 12:57:23 O'Reilly Media2015版

CSS Secrets 英文原版：近十年来最重要的 CSS 图书，没有之一

确实是多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进阶必读。百姓网的魔法哥（CSS魔法）在翻译这本书，他把部分样章也发布出来了： http://book.cssmagic.net/ 这本书的中文版已经出来了： https://book.douban.com/subject/26745943/ (展开)

0回应

> 更多书评5篇

读书笔记 · · · · · ·

我来写笔记

按有用程度
按页码先后
最新笔记

展开收起
第7页

山人Hilda

#Trick1 { padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */ border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */ border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */ border-radius: 0.5em; background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */ box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */ color: white; text-shadow: 0 -.05em .05em r...
2017-09-14 06:38

#Trick1 {
padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */
border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */
border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */
border-radius: 0.5em;
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */
box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 100%;
line-height: 1.5; /* 行高依赖于字号, 用倍数 */
}
#Trick1:hover {
background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */
}
#Trick2 {
padding: .3em 2.8em; border-radius: 0.5em;
background: transparent;font-size: 100%; line-height: 1.5;
color: crimson;
border: 2px solid currentColor; /* 使边框直接从字体取色! */
}
效果

推荐

回应 2017-09-14 06:38
展开收起
第1页

Zoey

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
2016-10-08 12:07

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。

推荐

回应 2016-10-08 12:07
展开收起
背景渐变相关

寻海 (天涯就是天涯，怎么比邻！)

http://www.cnblogs.com/stoneniqiu/p/5706670.html
2016-07-28 08:47

http://www.cnblogs.com/stoneniqiu/p/5706670.html

推荐

回应 2016-07-28 08:47
展开收起
第22页

寻海 (天涯就是天涯，怎么比邻！)

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映..
2016-07-13 17:02

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。
例子：
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护：
font-size: 20px;
line-height: 1.5;
如果我们把这些长度值都改成em 单位，那这些效果的值就都变成可缩放的了，而且是依赖字号进行缩放
2.currentColor
css3增加了一个特殊的颜色关键字currentColor，这个特性让它成为了CSS 中有史以来的第一
个变量
举个例子，假设我们想让所有的水平分割线（所有<hr> 元素）自动与
文本的颜色保持一致。有了currentColor 之后，我们只需要这样写：
hr {
height: .5em;
background: currentColor;
}
3.继承
inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计算值。举例来说，要把
表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit 的特性即可：
input, select, button { font: inherit; }
4.描边
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

推荐

回应 2016-07-13 17:02

展开收起
第1页

Zoey

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
2016-10-08 12:07

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。

推荐

回应 2016-10-08 12:07
展开收起
第7页

山人Hilda

#Trick1 { padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */ border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */ border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */ border-radius: 0.5em; background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */ box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */ color: white; text-shadow: 0 -.05em .05em r...
2017-09-14 06:38

#Trick1 {
padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */
border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */
border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */
border-radius: 0.5em;
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */
box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 100%;
line-height: 1.5; /* 行高依赖于字号, 用倍数 */
}
#Trick1:hover {
background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */
}
#Trick2 {
padding: .3em 2.8em; border-radius: 0.5em;
background: transparent;font-size: 100%; line-height: 1.5;
color: crimson;
border: 2px solid currentColor; /* 使边框直接从字体取色! */
}
效果

推荐

回应 2017-09-14 06:38
展开收起
第22页

寻海 (天涯就是天涯，怎么比邻！)

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映..
2016-07-13 17:02

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。
例子：
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护：
font-size: 20px;
line-height: 1.5;
如果我们把这些长度值都改成em 单位，那这些效果的值就都变成可缩放的了，而且是依赖字号进行缩放
2.currentColor
css3增加了一个特殊的颜色关键字currentColor，这个特性让它成为了CSS 中有史以来的第一
个变量
举个例子，假设我们想让所有的水平分割线（所有<hr> 元素）自动与
文本的颜色保持一致。有了currentColor 之后，我们只需要这样写：
hr {
height: .5em;
background: currentColor;
}
3.继承
inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计算值。举例来说，要把
表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit 的特性即可：
input, select, button { font: inherit; }
4.描边
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

推荐

回应 2016-07-13 17:02
展开收起
背景渐变相关

寻海 (天涯就是天涯，怎么比邻！)

http://www.cnblogs.com/stoneniqiu/p/5706670.html
2016-07-28 08:47

http://www.cnblogs.com/stoneniqiu/p/5706670.html

推荐

回应 2016-07-28 08:47

展开收起
第7页

山人Hilda

#Trick1 { padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */ border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */ border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */ border-radius: 0.5em; background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */ box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */ color: white; text-shadow: 0 -.05em .05em r...
2017-09-14 06:38

#Trick1 {
padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */
border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */
border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */
border-radius: 0.5em;
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */
box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 100%;
line-height: 1.5; /* 行高依赖于字号, 用倍数 */
}
#Trick1:hover {
background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */
}
#Trick2 {
padding: .3em 2.8em; border-radius: 0.5em;
background: transparent;font-size: 100%; line-height: 1.5;
color: crimson;
border: 2px solid currentColor; /* 使边框直接从字体取色! */
}
效果

推荐

回应 2017-09-14 06:38
展开收起
第1页

Zoey

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。
2016-10-08 12:07

我们在现代CSS中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器bug。如今的挑战是，在保证 DRY、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是本书将要呈现的内容。

推荐

回应 2016-10-08 12:07
展开收起
背景渐变相关

寻海 (天涯就是天涯，怎么比邻！)

http://www.cnblogs.com/stoneniqiu/p/5706670.html
2016-07-28 08:47

http://www.cnblogs.com/stoneniqiu/p/5706670.html

推荐

回应 2016-07-28 08:47
展开收起
第22页

寻海 (天涯就是天涯，怎么比邻！)

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例子： padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; 如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映..
2016-07-13 17:02

1.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。
例子：
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
如果我们决定改变字号，就得同时调整行高，因为这两个属性都写成了绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做些算术，算出字号改变之后的行高该是多少在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护：
font-size: 20px;
line-height: 1.5;
如果我们把这些长度值都改成em 单位，那这些效果的值就都变成可缩放的了，而且是依赖字号进行缩放
2.currentColor
css3增加了一个特殊的颜色关键字currentColor，这个特性让它成为了CSS 中有史以来的第一
个变量
举个例子，假设我们想让所有的水平分割线（所有<hr> 元素）自动与
文本的颜色保持一致。有了currentColor 之后，我们只需要这样写：
hr {
height: .5em;
background: currentColor;
}
3.继承
inherit 可以用在任何CSS 属性中，而且它总是绑定到父元素的计算值。举例来说，要把
表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit 的特性即可：
input, select, button { font: inherit; }
4.描边
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

推荐

回应 2016-07-13 17:02