使用color改变边框颜色
- 要点：
border没有定义border-color时，设置color后，border-color会被定义成color - 场景：边框颜色与文字颜色相同
- 兼容：color
.elem {
border: 1px solid;
color: #f66;
}
使用filter开启悼念模式
- 要点：通过
filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们 - 场景：网站悼念
- 兼容：filter
关键：
.mourning-mode {
width: 400px;
filter: grayscale(100%);
}
eg:
.mourning-mode {
width: 400px;
filter: grayscale(100%);
}
使用::selection改变文本选择颜色
- 要点：通过
::selection根据主题颜色自定义文本选择颜色 - 场景：主题化
- 兼容：::selection
图片.png
全局选择文字颜色
全局选择文字颜色
局部选择文字颜色
::selection {
background-color: #66f;
color: #fff;
}
.select-color {
line-height: 50px;
font-weight: bold;
font-size: 30px;
color: #f66;
p.special::selection {
background-color: #3c9;
}
}
使用linear-gradient控制背景渐变
- 要点：通过
linear-gradient设置背景渐变色并放大背景尺寸，添加背景移动效果 - 场景：主题化、彩虹背景墙
- 兼容：gradient、animation
图片.png
iCSS
.gradient-bg {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) left center/400% 400%;
font-weight: bold;
font-size: 100px;
color: #fff;
animation: move 10s infinite;
}
@keyframes move {
0%,
100% {
background-position-x: left;
}
50% {
background-position-x: right;
}
}
使用linear-gradient控制文本渐变
- 要点：通过
linear-gradient设置背景渐变色，配合background-clip:text对背景进行文本裁剪，添加滤镜动画 - 场景：主题化、特色标题
- 兼容：gradient、background-clip、filter、animation、text-fill-color
图片.png
Full Stack Developer
.gradient-text {
background-image: linear-gradient(90deg, #f66, #f90);
background-clip: text;
line-height: 60px;
font-size: 60px;
color: transparent;
animation: hue 5s linear infinite;
}
@keyframes hue {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(-1turn);
}
}
使用::scrollbar改变滚动条样式
- 要点：通过
scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式 - 场景：主题化、页面滚动
- 兼容：::scrollbar
图片.png
文章内容
样式：
.scroll-indicator {
overflow: hidden;
position: relative;
border: 1px solid #66f;
width: 500px;
height: 300px;
&::after {
position: absolute;
left: 0;
right: 5px;
top: 2px;
bottom: 0;
background-color: #fff;
content: "";
}
div {
overflow: auto;
height: 100%;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #66f;
}
}
article {
padding: 0 20px;
background: linear-gradient(to right top, #f66 50%, #f0f0f0 50%) no-repeat;
background-size: 100% calc(100% - 298px + 5px);
> * {
position: relative;
z-index: 9;
}
}
h1 {
line-height: 40px;
text-align: center;
font-size: 20px;
}
p {
margin-top: 20px;
line-height: 20px;
text-indent: 2em;
}
}
使用filter模拟Instagram滤镜
- 要点：通过
filter的滤镜组合起来模拟Instagram滤镜 - 场景：图片滤镜
- 兼容：filter
图片.png
-
Default
-
1977
-
Aden
-
Brannan
-
Brooklyn
-
Clarendon
-
Earlybird
-
Gingham
-
Hudson
-
Inkwell
-
Kelvin
-
Lark
-
LoFi
-
Maven
-
Mayfair
-
Moon
-
Nashville
-
Perpetua
-
Reyes
-
Rise
-
Slumber
-
Stinson
-
Toaster
-
Valencia
-
Walden
-
Willow
-
X-pro II
-
自定义：Obscure
.instagram-filter {
display: flex;
overflow: auto;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 1635px;
max-width: 100%;
min-height: 630px;
li {
overflow: hidden;
position: relative;
width: 225px;
height: 150px;
&.obscure {
filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
}
}
img {
width: 100%;
height: 100%;
}
p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 10px;
width: fit-content;
height: 30px;
background-color: #000;
filter: none;
line-height: 30px;
color: #fff;
}
}
使用mask雕刻镂空背景
- 要点：通过
mask为图像背景生成蒙层提供遮罩效果 - 场景：高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画
- 兼容：mask、perspective、transform-style、animation
图片.png
$mask-bg: "https://static.yangzw.vip/codepen/mountain.jpg";
$mask-text: "https://static.yangzw.vip/codepen/snow.jpg";
$logo: "https://static.yangzw.vip/codepen/logo.png";
.mask-bg {
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
&::after {
position: absolute;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
background: url($mask-bg) no-repeat center/cover;
filter: blur(10px);
content: "";
}
div {
position: relative;
z-index: 9;
width: 600px;
height: 300px;
background: url($mask-text) left center/150% auto;
mask: url($logo) center/cover;
animation: move 10s infinite;
}
}
@keyframes move {
0% {
background-position-x: 0;
}
50% {
background-position-x: 100%;
}
}