出版社: 人民邮电出版社
原作名: CSS Secrets: Better Solutions to Everyday Web Design Problems
译者: CSS魔法
出版年: 2016-4
页数: 260
定价: 99.00元
装帧: 平装
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揭秘的书评 · · · · · · ( 全部 5 条 )

CSS Secrets

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

CSS Secrets 英文原版:近十年来最重要的 CSS 图书,没有之一
> 更多书评5篇
读书笔记 · · · · · ·
我来写笔记-
#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.当某些值相互依赖时,应该把它们的相互关系用代码表达出来。 例子: 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.currentColorcss3增加了一个特殊的颜色关键字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
#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.currentColorcss3增加了一个特殊的颜色关键字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
#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.currentColorcss3增加了一个特殊的颜色关键字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
电子版有售 · · · · · ·
在哪儿买这本书 · · · · · ·
这本书的其他版本 · · · · · · ( 全部2 )
- O'Reilly Media版 2015-4 / 45人读过 / 有售
以下豆列推荐 · · · · · · ( 全部 )
- web前端工程师读书单 (子龙)
- 前端 (cowboy)
- 书籍列表 (十甫寸)
- 代码编程书|BOOK (米田)
- 前端进阶修炼 (阿树)
谁读这本书?
二手市场
订阅关于CSS揭秘的评论:
feed: rss 2.0
0 有用 CWRun 2018-06-26
启发性极强。有着可以说是技术图书里最好的第一章。讨论的技巧或许可能不够常用,但确实可以说是对规范本身最漂亮的演绎。它既教会人把css代码写厚,又教会人把css代码写薄。
0 有用 小斗篷 2017-04-21
比较高端的css书了
2 有用 米田 2017-07-08
如果你对CSS新特性有所了解,又不知道能干什么的时候。这本书可以让你脑洞大开,当然,因为只是涉及CSS部分讲解,对于实现方面,有各种各样的方式都能达到相似的效果。仅仅将其做为,“哦,还能这样想”系列阅读,会更有收获。
0 有用 kmokidd 2018-08-22
限制人的不是技术,而是想象力
8 有用 晴_feng 2016-04-20
前端应该熟习css技法才能写出更加简洁高效的页面。 Js的强大dom控制力使得坊间流传着一堆奇淫技巧,其实原生css已经给出了答案。 加上我并不觉得为了实现浏览器的兼容需要折损实现,让那些不兼容的浏览器难看去吧,保证可读性即可。 适合希望用css简化代码的人
0 有用 刘春辉同学 2019-02-14
受益匪浅!强烈推荐!!! -2019年读完的第1本书(技术)
0 有用 羊羊 2019-01-15
CSS顶级专家的作品,讲解循序渐进,翻译也很流畅,给出了很多疑难效果的实现方法,而且充分考虑到回退效果,也见识了很多高级实现效果,实用并且开拓视野。满分推荐!
0 有用 舔翔虫 2018-12-21
里面有各种黑魔法,有些很实用,但也有些炫技大于实际效果
0 有用 纸鸢 2018-12-16
很多实用的小技巧,对实际开发启发很大
0 有用 daydaygo 2018-11-20
- css揭秘: 47个鲜为人知的CSS技巧,主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等