√灵活运用CSS开发技巧 请戳这里,持续更新
√灵活运用JS开发技巧 请戳这里,持续更新
何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。
每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情
等,这些应该都是我们从小到大写文章而接触到的写作技巧。
作为程序猿的我们,写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,同时也让自己成就感满满(哈哈,这个才是重点)。因此,我整理下三年来自己使用到的一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。
既然写文章有这么多的写作技巧,那么我也需要对CSS开发技巧整理一下,起个易记的名字。
√Layout Skill:布局技巧
√Behavior Skill:行为技巧
√Color Skill:色彩技巧
√Figure Skill:图形技巧
√Component Skill:组件技巧
备注
CodePen
进行保存,点击在线演示即可查看rem布局
需要通过JS设置不同屏幕宽高比的font-size
,结合vw
单位和calc()
可脱离JS的控制/* 基于UI width=750px DPR=2的页面 */
html {
font-size: calc(100vw / 7.5);
}
:nth-child()
筛选指定的元素设置样式在线演示
writing-mode
调整文本排版方向在线演示
text-align-last:justify
设置文本两端对齐在线演示
:not()
排除指定元素不使用设置样式在线演示
object-fit
使图像脱离background-size
的约束,使用来标记图像背景尺寸在线演示
flexbox
或inline-block
的形式横向排列元素,对父元素设置overflow-x:auto
横向滚动查看在线演示
text-overflow:ellipsis
对溢出的文本在末端添加…
在线演示
::before
或::after
和transform
模拟细腻的1px边框在线演示
transform:scale3d()
对内容进行翻转(水平翻转、垂直翻转、倒序翻转)在线演示
letter-spacing
设置负值字体间距将文本倒序在线演示
flexbox横向布局
时,最后一个元素通过margin-left:auto
实现向右对齐在线演示
非body元素
的滚动操作会非常卡(Android不会出现此情况),通过overflow-scrolling:touch
调用Safari原生滚动来支持弹性滚动,增加页面滚动的流畅度-webkit-overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
.elem {
transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
data-*
,通过attr()
获取其内容赋值到content
上在线演示
:valid
和:invalid
配合pattern
校验表单输入的内容在线演示
pointer-events:none
禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于的disabled
在线演示
+
或~
配合for
绑定radio
或checkbox
的选择行为在线演示
focus
和blur
事件后往父元素进行冒泡,在父元素上通过:focus-within
捕获该冒泡事件来设置样式在线演示
:hover
,通过:hover
触发单元格的样式变化来描绘鼠标运动轨迹在线演示
max-height
定义收起的最小高度和展开的最大高度,设置两者间的过渡切换在线演示
background-attachment:fixed
或transform
让多层背景以不同的速度移动,形成立体的运动效果在线演示
transform-delay
或animation-delay
设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行在线演示
resize
设置横向自由拉伸来调整目标元素的宽度在线演示
border
没有定义border-color
时,设置color
后,border-color
会被定义成color
.elem {
border: 1px solid;
color: #f66;
}
在线演示
filter:grayscale()
设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们在线演示
::selection
根据主题颜色自定义文本选择颜色在线演示
linear-gradient
设置背景渐变色并放大背景尺寸,添加背景移动效果在线演示
linear-gradient
设置背景渐变色,配合background-clip:text
对背景进行文本裁剪,添加滤镜动画在线演示
caret-color
根据主题颜色自定义光标颜色在线演示
scrollbar
的scrollbar-track
和scrollbar-thumb
等属性来自定义滚动条样式在线演示
filter
的滤镜组合起来模拟Instagram滤镜
在线演示
::before
、::after
)通过clip
、transform
等方式绘制各种图形mask
为图像背景生成蒙层提供遮罩效果在线演示
linear-gradient
绘制波浪线在线演示
linear-gradient
绘制间断颜色的彩带在线演示
conic-gradient
绘制多种色彩的饼图在线演示
linear-gradient
绘制间断颜色的彩带进行交互生成方格在线演示
box-shadow
生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧在线演示
filter:blur() brightness() opacity()
模拟阴影效果在线演示
box-shadow
模拟蒙层实现中间镂空在线演示
outline
设置轮廓进行描边,可设置outline-offset
设置内描边在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
…
长度的加载提示在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
在线演示
写到最后总结得差不多了,后续如果我想起还有哪些CSS开发技巧遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
最后送大家一个键盘!
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
完