众所周时"position:sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。回顾positionvaluesposition中目前有五个值分别是static、relative、absolute、fixed、sticky。使用场景分别如下：static:此值为默认值，元素仍然隶属于文档流，此时不受left、z-index等属性控制。relative:此值配和left等属性可以改变元素在页面中的位置，但不会影响其他元素，因为原位置仍会空白保留。absolute:此值与前两个有本质上的区别，因为他会讲元素
基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果本文带来的炫酷的导航交互效果，一个结构层次清晰的导航是网站必不可少的功能之一，它可以帮助用户快速轻松的找到想要的信息。导航功能在PC端项目用到的比较多，国内一般的后台管理系统的导航都比较类似，都是一些颜色宽高大小的不同，涉及到官方网站或活动推广类型的相对会比较重设计感以及交互感。以下的效果都是我比较中意的设计及交互，全都来源于codepen，为了更方便快速体验效果，都已更新在
基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果本文带来的炫酷的导航交互效果，一个结构层次清晰的导航是网站必不可少的功能之一，它可以帮助用户快速轻松的找到想要的信息。导航功能在PC端项目用到的比较多，国内一般的后台管理系统的导航都比较类似，都是一些颜色宽高大小的不同，涉及到官方网站或活动推广类型的相对会比较重设计感以及交互感。以下的效果都是我比较中意的设计及交互，全都来源于codepen，为了更方便快速体验效果，都已更新在
本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关toggle开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果那些你不知道的炫酷开关交互效果效果1基于普通的开关效果增加了向内部延伸的3D效果，核心是通过设置内阴影box-shadow:inset实现，除开对元素本身增加阴影，还设置了两个伪元素提升3D效果，以下是核心实现代码：label{ background:#af4c4c;border:.5pxsolidrgba(117,117,117,0
本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关toggle开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果那些你不知道的炫酷开关交互效果效果1基于普通的开关效果增加了向内部延伸的3D效果，核心是通过设置内阴影box-shadow:inset实现，除开对元素本身增加阴影，还设置了两个伪元素提升3D效果，以下是核心实现代码：label{ background:#af4c4c;border:.5pxsolidrgba(117,117,117,0
本文翻译自CSSGridandCustomShapes,Part3，略有删改原作者：TemaniAfif基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSSgrid，clip和mask来自定义网格形状布局。CSS网格和自定义形状系列第1部分第2部分第3部分（当前文章）三部分文章不一定要按照顺序阅读，之间没有强制的关联关系，但是可以看看之前的文章，了解作者是如何完成当前的效果，接下来开始我们的第一个案例。案例一图片库以上效果图我们的HTML代码如下：本系列的主要挑战都是尽可能使用少量的html标签，后续的示例也是使用相同的
本文翻译自CSSGridandCustomShapes,Part3，略有删改原作者：TemaniAfif基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSSgrid，clip和mask来自定义网格形状布局。CSS网格和自定义形状系列第1部分第2部分第3部分（当前文章）三部分文章不一定要按照顺序阅读，之间没有强制的关联关系，但是可以看看之前的文章，了解作者是如何完成当前的效果，接下来开始我们的第一个案例。案例一图片库以上效果图我们的HTML代码如下：本系列的主要挑战都是尽可能使用少量的html标签，后续的示例也是使用相同的
本文翻译自CSSGridandCustomShapes,Part1，略有删改在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。如下所示，如果图像不是完全正方形，而是形状像六边形或菱形怎么办？我们怎么做呢。事实上，我们将结合我们已经研究过的CSS网格技术，并加入一些CSSclip-path和mask魔法，为您可以想象的任何形状创建精美的图像网格！相同的HTML我们将要研究的大多数布局乍一看似乎很容易实现，但具有挑战性的部分是使用相同的HTML标记来实现它们。我们可以使用很多包装器、divs等等，
本文翻译自CSSGridandCustomShapes,Part1，略有删改在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。如下所示，如果图像不是完全正方形，而是形状像六边形或菱形怎么办？我们怎么做呢。事实上，我们将结合我们已经研究过的CSS网格技术，并加入一些CSSclip-path和mask魔法，为您可以想象的任何形状创建精美的图像网格！相同的HTML我们将要研究的大多数布局乍一看似乎很容易实现，但具有挑战性的部分是使用相同的HTML标记来实现它们。我们可以使用很多包装器、divs等等，
