《css 揭秘》读书笔记

OnlyMyRailgun 发布于2019-08-29 13:20 / 966人阅读

摘要：因为鲜为人知的第四个长度参数双层投影毛玻璃效果见毛玻璃自定义复选框不多介绍，也有相关案例复选框滚动提示现在越来越多的移动端都是这样处理，滚动提示其他揭秘对应的地址图灵图书在封底都提供优惠码低价购买电子书她

目标

如何用 css 解决难题

收获 尽量减少代码重复

用相对值

font-size: 20px;
line-height: 30px;

// 应该改成
font-size: 20px;
line-height: 1.5;

相对值很多 em 和百分比

假设有个按钮 bg 颜色是 colorsA，让 bg 变亮或变暗，可以把半透明的黑色和白色叠加到上面。这样 bg 可随时换都能达到变亮或变暗的目的。

background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent)

less做法是通过 lighten 或者 darken 设置一个值

darken(#428bca, 6.5%)

代码容易维护和代码量少不可兼得。

// 代码量少，但可读性可维护上差
border-width: 10px 10px 10px 0;

// 可读性可维护上好很多
border-width: 10px;
border-left-width: 0;

合理使用简写

前者是简写，可以确保背景是 red。但如果是用展开式的单个属性，那背景可能是一个渐变团，一张毛的图片或者其他任意东西。

background: red;

background-color: red;

合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。

calc

calc 的 + - 两侧需要有空格

calc(100% - 10px); calc(100% + 10px)

连续的图像边框

老式信封

蚂蚁行军

椭圆

border 可以多带带指定水平和垂直半径

border-radius: 100px / 75px;

4分之一椭圆

border-radius: 100% 0 0 0;

平行四边形

嵌套元素方案

伪元素方案

z-index: -1; 的使用很经典

切角

background: linear-gradient(-45deg, transparent 15px, #58a 0);

想加个角标，达到这个效果，需要再来一个linear-gradient，同时给不同的linear-gradient 分配不同的 background-size。

background:
        linear-gradient(to top left, transparent 50%, rgba(0,0,0,.4) 0) 100% 100% no-repeat,
        linear-gradient(-45deg, transparent 20px, #58a 0);
    background-size: 2em 2em, auto;

投影

普遍认识的投影是

box-shadow: 2px 3px 4px black;

这让大家误解不能对单边 box-shadow。因为鲜为人知的 第四个长度参数

box-shadow: 0px 3px 4px -4px black;

双层投影

box-shadow: 5px 0 5px -5px black, -5px 0px 5px -5px black;

毛玻璃效果

见毛玻璃

自定义复选框

不多介绍，weui 也有相关案例 weui 复选框

滚动提示

现在越来越多的移动端都是这样处理，滚动提示

其他

《css揭秘》对应的github地址 https://github.com/cssmagic/C...

demo http://play.csssecrets.io/

图灵图书在封底都提供优惠码低价购买电子书

她github https://github.com/LeaVerou

GPU云服务器云服务器读书笔记编程思想读书笔记大数据时代读书笔记读书计划

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112529.html

css编码技巧【css揭秘读书笔记】

摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧尽量减少代码重复在实践中，代码可维护性的最大要...

Miyang 2019-08-30 12:59 评论0 收藏0
《css揭秘》读书笔记

摘要：但是根据本司机两年的开发经验来看，在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。第一章引言 css编码技巧在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...

xiguadada 2019-08-29 16:28 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

Jonathan Shieber 2019-08-29 12:33 评论0 收藏0