「链接和长图失效,请大家点击阅读原文查看详情」
何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。
每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情
等,这些应该都是我们从小到大写文章而接触到的写作技巧。
作为程序猿的我们,写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,同时也让自己成就感满满(哈哈,这个才是重点)。因此,我整理下三年来自己使用到的一些「CSS开发技巧」,希望能让你写出耳目一新、容易理解、舒服自然的代码。
既然写文章有这么多的写作技巧,那么我也需要对「CSS开发技巧」整理一下,起个易记的名字。
「Layout Skill」:布局技巧
「Behavior Skill」:行为技巧
「Color Skill」:色彩技巧
「Figure Skill」:图形技巧
「Component Skill」:组件技巧
备注
代码只作演示用途,不会详细说明语法
部分技巧示例代码过长,使用CodePen
进行保存,点击「在线演示」即可查看
兼容项点击链接即可查看当前属性的浏览器兼容数据,自行根据项目兼容需求考虑是否使用
以下代码全部基于CSS进行书写,没有任何JS代码,没有特殊说明的情况下所有属性和方法都是CSS类型
一部分技巧是自己探讨出来的,另一部分技巧是参考各位前端大神们的,都是一个互相学习的工程,大家一起进步
要点:移动端使用rem布局
需要通过JS设置不同屏幕宽高比的font-size
,结合vw
单位和calc()
可脱离JS的控制
场景:「rem页面布局」(不兼容低版本移动端系统)
兼容:vw、calc()
/* 基于UI width=750px DPR=2的页面 */
html {
font-size: calc(100vw / 7.5);
}
要点:通过:nth-child()
筛选指定的元素设置样式
场景:「表格着色」、「边界元素排版」(首元素、尾元素、左右两边元素)
兼容::nth-child()
代码:在线演示
要点:通过writing-mode
调整文本排版方向
场景:「竖行文字」、「文言文」、「诗词」
兼容:writing-mode
代码:在线演示
要点:通过text-align-last:justify
设置文本两端对齐
场景:「未知字数中文对齐」
兼容:text-align-last
代码:在线演示
要点:通过:not()
排除指定元素不使用设置样式
场景:「符号分割文字」、「边界元素排版」(首元素、尾元素、左右两边元素)
兼容::not()
代码:在线演示
要点:通过object-fit
使图像脱离background-size
的约束,使用
来标记图像背景尺寸
场景:「图片尺寸自适应」
兼容:object-fit
代码:在线演示
要点:通过flexbox
或inline-block
的形式横向排列元素,对父元素设置overflow-x:auto
横向滚动查看
场景:「横向滚动列表」、「元素过多但位置有限的导航栏」
兼容:overflow-x
代码:在线演示
要点:通过text-overflow:ellipsis
对溢出的文本在末端添加...
场景:「单行文字溢出」、「多行文字溢出」
兼容:text-overflow、line-clamp、box-orient
代码:在线演示
要点:分辨率比较低的屏幕下显示1px的边框会显得模糊,通过::before
或::after
和transform
模拟细腻的1px边框
场景:「容器1px边框」
兼容:transform
代码:在线演示
要点:通过transform:scale3d()
对内容进行翻转(水平翻转、垂直翻转、倒序翻转)
场景:「内容翻转」
兼容:transform
代码:在线演示
要点:通过letter-spacing
设置负值字体间距将文本倒序
场景:「文言文」、「诗词」
兼容:letter-spacing
代码:在线演示
要点:使用flexbox横向布局
时,最后一个元素通过margin-left:auto
实现向右对齐
场景:「右侧带图标的导航栏」
兼容:margin
代码:在线演示
要点:iOS页面非body元素
的滚动操作会非常卡(Android不会出现此情况),通过overflow-scrolling:touch
调用Safari原生滚动来支持弹性滚动,增加页面滚动的流畅度
场景:「iOS页面滚动」
兼容:iOS自带-webkit-overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
要点:有时执行动画可能会导致页面卡顿,可在特定元素中使用硬件加速来避免这个问题
场景:「动画元素」(绝对定位、同级中超过6个以上使用动画)
兼容:transform
.elem {
transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
要点:在标签上自定义属性data-*
,通过attr()
获取其内容赋值到content
上
场景:「提示框」
兼容:data-*、attr()
代码:在线演示
要点:使用伪类
:valid
和:invalid
配合pattern
校验表单输入的内容
场景:「表单校验」
兼容:pattern、:valid、:invalid
代码:在线演示
要点:通过pointer-events:none
禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于的
disabled
场景:「限时点击按钮」(发送验证码倒计时)、「事件冒泡禁用」(多个元素重叠且自带事件、a标签跳转)
兼容:pointer-events
代码:在线演示
要点:使用
+
或~
配合for
绑定radio
或checkbox
的选择行为
场景:「选项框美化」、「选中项增加选中样式」
兼容:+、~
代码:在线演示
要点:表单控件触发focus
和blur
事件后往父元素进行冒泡,在父元素上通过:focus-within
捕获该冒泡事件来设置样式
场景:「登录注册弹框」、「表单校验」、「离屏导航」、「导航切换」
兼容::focus-within、:placeholder-shown
代码:在线演示
要点:将整个页面等比划分成小的单元格,每个单元格监听:hover
,通过:hover
触发单元格的样式变化来描绘鼠标运动轨迹
场景:「鼠标跟随轨迹」、「水波纹」、「怪圈」
兼容::hover
代码:在线演示
要点:通过max-height
定义收起的最小高度和展开的最大高度,设置两者间的过渡切换
场景:「隐藏式子导航栏」、「悬浮式折叠面板」
兼容:max-height
代码:在线演示
要点:通过background-attachment:fixed
或transform
让多层背景以不同的速度移动,形成立体的运动效果
场景:「页面滚动」、「视差滚动文字阴影」、「视差滚动文字虚影」
兼容:background-attachment、transform
代码:在线演示
要点:通过transform-delay
或animation-delay
设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行
场景:「开场动画」
兼容:transform、animation
代码:在线演示
要点:通过resize
设置横向自由拉伸来调整目标元素的宽度
场景:「富文本编辑器」、「分栏阅读」
兼容:resize
代码:在线演示
要点:border
没有定义border-color
时,设置color
后,border-color
会被定义成color
场景:「边框颜色与文字颜色相同」
兼容:color
.elem {
border: 1px solid;
color: #f66;
}
要点:通过filter:grayscale()
设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
场景:「网站悼念」
兼容:filter
代码:在线演示
要点:通过::selection
根据主题颜色自定义文本选择颜色
场景:「主题化」
兼容:::selection
代码:在线演示
要点:通过linear-gradient
设置背景渐变色并放大背景尺寸,添加背景移动效果
场景:「主题化」、「彩虹背景墙」
兼容:gradient、animation
代码:在线演示
要点:通过linear-gradient
设置背景渐变色,配合background-clip:text
对背景进行文本裁剪,添加滤镜动画
场景:「主题化」、「特色标题」
兼容:gradient、background-clip、filter、animation、text-fill-color
代码:在线演示
要点:通过caret-color
根据主题颜色自定义光标颜色
场景:「主题化」
兼容:caret-color
代码:在线演示
要点:通过scrollbar
的scrollbar-track
和scrollbar-thumb
等属性来自定义滚动条样式
场景:「主题化」、「页面滚动」
兼容:::scrollbar
代码:在线演示
要点:通过filter
的滤镜组合起来模拟Instagram滤镜
场景:「图片滤镜」
兼容:filter
代码:在线演示、css-gram
要点: 场景:各种图形容器 兼容:clip、transform 代码:在线演示 要点:通过 场景:「高斯模糊蒙层」、「票劵」(电影票、购物卡)、「遮罩动画」 兼容:mask、perspective、transform-style、animation 代码:在线演示 要点:通过 场景:「文字强化显示」、「文字下划线」、「内容分割线」 兼容:gradient 代码:在线演示 要点:通过 场景:「主题化」 兼容:gradient 代码:在线演示 要点:通过 场景:「项占比饼图」 兼容:gradient 代码:在线演示 要点:使用 场景:「格子背景」、「占位图」 兼容:gradient 代码:在线演示 要点:通过 场景:「容器投影」、「背景补间动画1」、「背景补间动画2」、「立体投影」、「文字立体投影」、「文字渐变立体投影」、「长投影」、「霓虹灯」、「灯光阴影」 兼容:box-shadow、filter、text-shadow 代码:在线演示 要点:通过 场景:「头像阴影」 兼容:filter 代码:在线演示 要点:通过 场景:「图片裁剪」、「新手引导」、「背景镂空」、「投射定位」 兼容:box-shadow 代码:在线演示 要点:通过 场景:「内描边」、「外描边」 兼容:outline 代码:在线演示 要点:累加选项单位的计数器 场景:「章节目录」、「选项计数器」、「加法计数器」 兼容:counters 代码:在线演示 要点:下划线跟随鼠标移动的导航栏 场景:「动态导航栏」 兼容:+ 代码:在线演示 要点:不间断冒出气泡的背景墙 场景:「动态背景」 兼容:animation 代码:在线演示 要点:提示滚动进度的指示器 场景:「阅读进度」 兼容:calc()、gradient 代码:在线演示 要点:显示器故障形式的文本 场景:「错误提示」 兼容:data-*、attr()、animation 代码:在线演示 要点:通过拾色器改变图像色相的换色器 场景:「图片色彩变换」 兼容:mix-blend-mode 代码:在线演示 要点:展示当前状态的悬浮球 场景:「状态动态显示」、「波浪动画」 兼容:gradient、animation 代码:在线演示 要点:相交粘粘效果的双球回弹运动 场景:「粘粘动画」 兼容:filter、animation 代码:在线演示 要点:边缘带孔和中间折痕的票劵 场景:「电影票」、「代金券」、「消费卡」 兼容:gradient 代码:在线演示 要点:带有渐变倒影的加载条 场景:「加载提示」 兼容:box-reflect、animation 代码:在线演示 要点:三维建模的立方体 场景:「三维建模」 兼容:transform、perspective、transform-style、animation 代码:在线演示 要点:鼠标悬浮时动态渐变显示的边框 场景:「悬浮按钮」、「边框动画」 兼容:gradient 代码:在线演示 要点:可切换内容的标签页 场景:「内容切换」 兼容:scroll-behavior 代码:在线演示 要点:可切换内容的导航栏 场景:「页面切换」 兼容:~ 代码:在线演示 要点:可折叠内容的面板 场景:「隐藏式子导航栏」 兼容:~ 代码:在线演示 要点:点击星星进行评分的按钮 场景:「评分」 兼容:~ 代码:在线演示 要点:变换 场景:「加载提示」 兼容:animation 代码:在线演示 要点:自适应照片数量的相册 场景:「九宫格相册」、「微信相册」、「图集」 兼容::only-child、:first-child、:nth-child()、:nth-last-child()、~ 代码:在线演示 要点:单一颜色的圆角进度条 场景:「进度条」 兼容:gradient 代码:在线演示 要点:渐变螺纹的进度条 场景:「进度条」、「加载动画」 兼容:gradient、animation 代码:在线演示 要点:点击呈现按下状态的按钮 场景:「按钮点击」 兼容:box-shadow 代码:在线演示 要点:带混沌虚影的加载圈 场景:「加载提示」 兼容:filter、animation 代码:在线演示 要点:蛇形运动的边框 场景:「蛇形动画」 兼容:clip、animation 代码:在线演示 要点:逐个字符自动打印出来的文字 场景:「代码演示」、「文字输入动画」 兼容:ch、animation 代码:在线演示 写到最后总结得差不多了,如果后续我想起还有哪些遗漏的「CSS开发技巧」,会继续在这篇文章上补全。 最后送大家一个键盘! 欢迎在下方进行评论,喜欢本文的「点个赞」或「收个藏」,同时也希望各位朋友对文章里的要点进行补充或提出自己的见解。 「关注公众号::before
、::after
)通过clip
、transform
等方式绘制各种图形
使用mask雕刻镂空背景
mask
为图像背景生成蒙层提供遮罩效果使用linear-gradient描绘波浪线
linear-gradient
绘制波浪线
使用linear-gradient描绘彩带
linear-gradient
绘制间断颜色的彩带
使用conic-gradient描绘饼图
conic-gradient
绘制多种色彩的饼图
使用linear-gradient描绘方格背景
linear-gradient
绘制间断颜色的彩带进行交互生成方格
使用box-shadow描绘单侧投影
box-shadow
生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧
使用filter描绘头像彩色阴影
filter:blur() brightness() opacity()
模拟阴影效果
使用box-shadow裁剪图像
box-shadow
模拟蒙层实现中间镂空
使用outline描绘内边框
outline
设置轮廓进行描边,可设置outline-offset
设置内描边
Component Skill
迭代计数器
下划线跟随导航栏
气泡背景墙
滚动指示器
故障文本
换色器
状态悬浮球
粘粘球
商城票券
倒影加载条
三维立方体
动态边框
标签页
标签导航栏
折叠面板
星级评分
加载指示器
...
长度的加载提示
自适应相册
圆角进度条
螺纹进度条
立体按钮
混沌加载圈
蛇形边框
自动打字
总结
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x
结语
关注IQ前端
IQ前端
,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」