CSS创意与视觉表现
视觉效果
CSS代码：
.cover {
padding: 36% 50%;
background: linear-gradient(to right, white 50%, black calc(50% + 1px));
position: relative;
font-size: 200%;
}
.cover::before,
.cover::after {
content: ‘‘;
position: absolute;
width: 36%; height: 50%;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
}
.cover::before {
top: 0;
background: radial-gradient(circle, white 13%, black calc(13% + 1px));
}
.cover::after {
bottom: 0;
background: radial-gradient(circle, black 13%, white calc(13% + 1px));
}
.cover-h,
.cover-p {
position: absolute;
mix-blend-mode: difference;
left: 0; right: 0;
text-align: center;
color: #fff;
z-index: 1;
}HTML代码：
<div class="cover">
<h2 class="cover-h">CSS创意与视觉表现</h2>
</div>布局
平行四边形布局
# shape-outside是不规则形状环绕布局的核心,支持的属性值分为如下四大类
1. none # 默认值
2. <shape-box> # 图形盒子
3. <basic-shape> # 基本图函数
4. <image> # 图像类
效果
代码
CSS代码：
.shape-left {
float: left;
width: 200px; height: 500px;
shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
float: right;
width: 200px; height: 500px;
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
display: block;
padding: 1px;
position: relative;
z-index: 0;
}
.content::before {
content: ‘‘;
position: absolute;
background-color: #fff;
transform: skewX(-22deg);
left: 50px; right: 50px; top: 0; bottom: 0;
border: 1px solid #ddd;
z-index: -1;
}HTML代码
<div class="shape-left"></div> <div class="shape-right"></div> <content class="content"> ...内容... </content>
图形
透明方格
# 原理小方格错位叠加后效果
效果
代码
CSS代码：
.square {
display: inline-block;
padding: 300px;
background-color: #fff;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
}HTML代码:
<div class="square"></div>