《CSS Secrets》读书笔记(3)
三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人,如果你是新手,阅读起来可能有点吃力,同时,笔记也是针对我个人的查漏补缺,有些知识点并不会记录进去。
文章目录
- 形状
- 自适应的椭圆
- 平行四边形
- 菱形图片
- 视觉效果
- 单侧投影
- 邻边投影
- 双侧投影
形状
自适应的椭圆
- 宽高相同,
border-radius
大于等于一半就是一个正圆,用户代理会按宽高比例减小各个边框半径带下,直到不重叠为止。 border-radius
一般是简写形式,可以通过/
单独指定水平和垂直半径,水平半径 / 垂直半径border-radius
接受百分比值- 展开式属性,支持最多两个值,必须使用空格分隔。分别表示水平半径和垂直半径。而
border-radius
那种斜杠/
分隔的写法这里是不支持的,只能是空格。
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
border-radius
水平半径 / 垂直半径,各支持“上右下左”四个值写法
border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;
- 上半椭圆
border-radius: 50% / 100% 100% 0 0;
- 左半椭圆
border-radius: 100% 0 0 100% / 50%;
- 左上四分之一圆
border-radius: 100% 0 0 0;
平行四边形
- 平行四边形是矩形的父集,各条边两两平行,但是角度不一定是直角。
- CSS创建平行四边形的思路是通过
skew
实现。 - 直接将整个元素倾斜的话,元素的内容也会倾斜。
- 我们可以将内容单独用一层结构包裹在倾斜元素内,然后将内容反向倾斜
- 按照这种思路我们可以将倾斜元素作为子元素,这样就不会影响内容了,所以用伪元素代替是个好办法
嵌套元素方案:
<a href="#yolo" class="button"><div>Click me</div>
</a>.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
伪元素方案:
<a href="#yolo" class="button">Click me
</a>.button {position: relative;/* 其他的文字颜色、内边距等样式…… */
}
.button::before {content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;z-index: -1;background: #58a;transform: skew(45deg);
}
菱形图片
示例:https://codepen.io/xiangshuo1992/pen/jXZRmq
变形方案:
基于上面平行四边形的方案,菱形可以通过正方形旋转得到,再将子元素图片反方向矫正,不过这里有个问题是图片最大宽度是与边长相等的,我们期望的是与对角线相等,所以我们可以通过放大图片来实现。
<div class="picture"><img src="adam-catlace.jpg" alt="..." />
</div>
.picture {width: 400px;transform: rotate(45deg);overflow: hidden;
}
.picture > img {max-width: 100%;transform: rotate(-45deg) scale(1.42);
}
裁切路径方案:
还有一个兼容性不是很好的实现方案,只能作为渐进增强的方案了。clip-path
属性可以创建一个只有元素的部分区域可以显示的剪切区域,MDN文档示例:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
还可以加动画呢!
img {clip-path: polygon(50% 0, 100% 50%,50% 100%, 0 50%);transition: 1s clip-path;
}
img:hover {clip-path: polygon(0 0, 100% 0,100% 100%, 0 100%);
}
视觉效果
单侧投影
示例:https://codepen.io/xiangshuo1992/pen/JwvPPa
一般我们使用 box-shadow
的方法是,指定三个长度值和一个颜色值:
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
box-shadow
的参数列表是 box-shadow: X Y 模糊半径R1 扩张半径R2 颜色值;
所以上面的css属性值会生成一个相对于元素向右偏移2px,向下偏移3px,模糊半径为4px的阴影,我们把阴影看做是一个元素的话,这个元素的尺寸相当于比原来的元素大4*2=8px。
注意:确切地说,我们将在顶部看到1px的投影(4px-3px)、在左侧看到2px(4px-2px)、在右侧看到6px(4px+2px)、在底部看到7px(4px+3px)。在实践中,投影看起来会比这些值稍小,因为投影的颜色在边缘处的过渡不是线性的,这跟渐变不一样。
如果要实现单侧投影,我们就需要用到第四个属性,扩张半径啦。这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺寸。很显然,当我们设置了模糊半径之后,我们只有将扩张半径设置为负数才能缩小阴影,那这个值具体是多大呢,只要小于模糊半径的相反数就可以了,比如这样设置:box-shadow: 0 5px 4px -4px black;
。
邻边投影
要实现只在两条邻边有 box-shadow
,最简单的办法就是在基础用法上面将X和Y的偏移量调整到大于模糊半径的值就行,但是我们会发现这样会造成元素有一个比较大的阴影,视觉效果达不到要求,这时我们可以考虑结合扩张半径属性来进行优化,利用扩张半径的负值来缩小阴影,具体数值该设置为多大呢,我们将偏移量调整为模糊半径的一半,扩张半径调整为模糊半径相反数的一半,比如:box-shadow: 3px 3px 6px -3px black;
就可以达到最终想要的效果了。
双侧投影
扩张半径在四个方向上的作用是均等的(也就是说,我们无法指定投影在水平方向上放大,而在垂直方向上缩小),唯一的办法是用两块投影(每边各一块)来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次:box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
。
END.
《CSS Secrets》读书笔记(3)相关推荐
- 构建之法读书笔记03
构建之法读书笔记03 阅读之前: 我发现这本书我越往后读越是后期软件方面的东西,好多东西因为我之前没有接触过软件,所以都变得晦涩难懂,但是大体意思我也应该明白.我知道微软但是不曾设想过他的工作体系 ...
- 构建之法读书笔记06
构建之法读书笔记06 阅读之前: 到最后了,其实这本书我初读的心态并不好,假期我还会再读一遍.这篇是关于项目的尾声就是发布之类的以及大的方向未来这个行业的东西.老实说,我选这个专业就是因为他和电 ...
- 构建之法读书笔记之五
今天我学习了构建之法的第五章--典型用户与典型场景.我们都知道,软件开发最终都是服务于用户,所以用户主导着我们的开发方向.软件开发离不开用户,所以能够搞清楚用户隐藏的要求也是软件开发过程中的的一个重要 ...
- 构建之法读书笔记01
前两周学习了什么是软件,软件工程师的能力评估与发展和软件单元测试与代码规范. 以前的做法: 读完这几部分,我发现我对软件存在很大的错误的认识,在我心里,一名厉害的程序员是可以独立完成一个软件,软件的各 ...
- 构建之法阅读笔记之三
构建之法阅读笔记之三 本章为团队和流程,主要介绍了典型的软件团队模式和开发流程以及它们的优缺点.TSP.MVP.MBP.RUP 团队:并不是几个人凑到一起就叫团队,称之为团队 1.应该有一致的集体目标 ...
- 构建之法阅读笔记(二)
离上次写阅读笔记很长时间了,罪恶感涌来.. 这次主要写一下我对创新的感受,这部分是在<构建之法>的第16章-IT行业的创新. 最近几年我经常能够听到"创新"这个词,总以 ...
- 构建之法阅读笔记05
这周时间,我阅读了构建之法的第九.十.十一章节. 在第九章中,邹欣老师给我们讲述了在我们的软件团队里除了能写代码.测试代码和画图做设计的成员,还有一类角色,不做上面这些事情但也很重要,我们叫他们项目经 ...
- 构建之法阅读笔记03
又到了一周的结尾,时间过得真快.这一周,阅读了<构建之法>关于团队和流程的部分.正好,这周我们用的就是结对开发的模式.算是理论加上实践吧. 和以往的单独编程不同的是,团队开发增加了与同学的 ...
- 05构建之法阅读笔记之三
今天看的构建之法的第10章"典型用户和场景",书上开始举了一个很好理解的例子,是一个理发师给顾客剪头发的例子,由例子可见,你光看用户的表面语言是不够的,我们应该理解的是用户语言背后 ...
- 构建之法阅读笔记之速读篇
新学期开始,我们开设了软件工程课程,在老师的指导下,我从网上找到了<构建之法>这本书,随着课堂上老师的讲解以及书籍的快速阅读,我对软件工程有了很多的了解.之前我们的编程只能算是基础,远远没 ...
最新文章
- 基于IOC的GUI框架设计与实现
- 【opencv】6.视频编码格式与封装格式
- git经常使用命令和问题
- AndroidStudio_安卓原生开发_v4v7升级到androidx方法---Android原生开发工作笔记147
- 实时音视频直播带货中影响用户体验的Bug根因
- 21点游戏java实现
- frame越过另一个frame_Python3.6实现一个简单的文本编辑器
- 258. Move 0s To The End I -- Laicode
- SIT测试 和 UAT测试
- u盘加密truecrypt_Mac OS X上的TrueCrypt驱动器加密入门
- python实现谷歌翻译
- 秒搜神器everything背后的索引原理
- 自媒体平台数据统计分析爬虫之【一点号】模拟登陆分析详解及数据统计接口详解
- 程序员应该看的十大电影
- 联想ThinkBook解锁FN键
- 不同币种间的清账 应付账款是USD记账 预付账款账款是人民币记账 如何清账
- oracle 格式化命令,format 命令的输入规则 - Oracle Solaris 管理:设备和文件系统
- eclipes常用快捷键
- 安师大计算机系导师,安徽师范大学数学计算机科学学院导师介绍:陈付龙
- 润盈益通保本型理财产品优势