出版社: 人民邮电出版社
原作名: CSS Secrets: Better Solutions to Everyday Web Design Problems
译者: CSS魔法
出版年: 2016-4
页数: 260
定价: 99.00元
装帧: 平装
丛书: 图灵程序设计丛书·Web开发系列
ISBN: 9787115416940
内容简介 · · · · · ·
本书是一本注重实践的教程,作者为我们揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案,攻克每天都会遇到的各种网页样式难题。
本书的读者对象为前端工程师、网页开发人员。
作者简介 · · · · · ·
Lea Verou
W3C CSS工作组特邀专家,设计CSS语言的委员之一,此前曾在W3C担任开发者代言人。目前,她在麻省理工学院从事人机交互领域的研究。她还是一位博客作家,并经常在国际性的技术会议上担任讲师;她创建的多个开源项目广受开发者欢迎。
CSS魔法
原名张鹏,国内知名的CSS技术专家,百姓网前端架构师。拥有近十年的网站开发经验,在移动前端领域积累颇深,自称“披着工程师外衣的设计师”。他是CMUI、Action、GHX等开源项目的作者,曾为GitHub、Gulp、Stylus等网站和项目翻译过大量文档;其生动活泼、循序渐进的博客写作风格深受读者喜爱;在CSS Conf等技术会议上所作的演讲广受好评。
目录 · · · · · ·
序
前言
第1章 引言
第2章 背景与边框
第3章 形状
第4章 视觉效果
第5章 字体排印
第6章 用户体验
第7章 结构与布局
第8章 过渡与动画
按规范分类
· · · · · · (收起)
"CSS揭秘"试读 · · · · · ·
Web 标准:是敌还是友 标准的制定过程 与大众的理解大相径庭的是,W3C 并不“生产”标准。实际上,它扮演的是一个论坛的角色:W3C 以工作组的方式,把某项技术的相关各方聚集起来,最终由他们来产出标准。当然,W3C 并不只是一个观察者:它设定了整个平台的规则,监督整个进程。但这些技术规范(基本上)并不是由W3C 的工作人员编写完成的。 CSS 规范通常是由CSS 工作组的成员来...
丛书信息
喜欢读"CSS揭秘"的人也喜欢的电子书 · · · · · ·
喜欢读"CSS揭秘"的人也喜欢 · · · · · ·
CSS揭秘的话题 · · · · · · ( 全部 条 )



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

CSS Secrets

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

《CSS Secrets》中文版千呼万唤始出来:多年难得一见的重磅 CSS 图书
> 更多书评 6篇
读书笔记 · · · · · ·
我来写笔记-
#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 1人喜欢
#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.当某些值相互依赖时,应该把它们的相互关系用代码表达出来。 例子: 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
-
-
#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 1人喜欢
#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.当某些值相互依赖时,应该把它们的相互关系用代码表达出来。 例子: 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
-
#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 1人喜欢
#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.当某些值相互依赖时,应该把它们的相互关系用代码表达出来。 例子: 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
0 有用 ZSX🌈 2016-09-10
看完会有种从小工到专家的感觉~
1 有用 DaraW 2018-12-12
大多是一些华而不实的 hack,用 API 的偏冷用法实现了一些效果。实际意义不是很大,拓宽下知识面还行。感觉过誉了,但这几年也没啥说得过去的 CSS 的书。
0 有用 我怀念的 2016-05-26
没读完,需要的时候再回头看
0 有用 N·Sonder 2018-02-18
一刷。。
0 有用 将翱将翔 2017-02-16
好书力荐!
0 有用 缚风铃 2021-03-20
很好的书。可以得知一些效果是如何用CSS实现,甚至里面还有一点儿设计的技巧。作者归纳的这些实现方式挺巧妙,比强行用JS实现的维护性更强。里面也有个别的有点hack的味道,有些也不够直观,作者也都讲清了。
0 有用 地球支援部001 2021-03-15
非常有趣的书 看完绝对能让你对css有不一样的认知
0 有用 思来享趣 2021-02-23
css很值得花时间深入学习,然后就会节约很多精力和时间。 书中很多地方,让人大呼过瘾。
0 有用 HAIBARA 2021-02-22
挺有意思的(。但是现在写前端用框架/UI库比较多,实际写的CSS略少
0 有用 东日 2021-02-18
略读一遍,知识略有陈旧,有时间再细细过一遍