切图仔，是大多数前端用来自嘲的称说。置信很多人平时写页面的时候，大部分工夫是在切图和排图，如此往返。这里并不是要否定切图自身，而是在质疑：始终切图到底对本人的功力增长有何益处？想想 UI 丢给你一套难看的界面，你却只需一个 img 标签，或者一个 background-image 属性即可搞定了它，但日后某个中央须要调整某些外观（色彩、文字等），你还不是会让 UI 再批改之前的素材，而后替换下来完事？这样就齐全受制于 UI，而无奈施展本人的能动性。
那么，如何突破这个僵局？很简略，如果你 CSS 玩的够溜，你就无需再进行那干燥无比的切图工作，那些界面、元素都是通过你双手亲自缔造而成的，只管创作它们可能会花一些功夫，但带来的回报也是微小的，你不仅可能自在掌控你所发明进去的元素，而且能大幅提高本人的 CSS 功力。
在此之前
在用纯 CSS 实现这些成果之前，笔者先介绍几个罕用的 SCSS Mixin 和一个得力武器，用它们来进行创作将会事倍功半
笼罩 – cover
@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {position: absolute; top: $top; left: $left; width: $width; height: $height;
}复制代码
当你想在原先元素的根底上再“复制”一个元素，并将其笼罩在它身上时，你将会用到它
嵌入 – inset
@mixin inset($inset: 0) {position: absolute; top: $inset; left: $inset; right: $inset; bottom: $inset;
}复制代码
同样地，这也是在原先元素根底上复制出一个元素，只不过这个元素地位和原先的元素雷同，大小会基于原先的元素而增减。
举个例子，假使你想创立多个半径不同的同心圆，这个 Mixin 将会很有帮忙
aqua.css
aqua.css 是笔者开源的一个优雅的、轻量级的 CSS 框架。外面有很多罕用的组件以及罕用的款式类，用它来写 CSS 体验将会十分爽
在 codepen 上，笔者筹备了一个 aqua.css 模版，大家能够用它来进行 CSS 的创作
常见 UI 成果
条纹成果
首先，咱们要抓住“边框”这个词，如何创作出一个非凡的边框呢？如果个别的 CSS 属性实现不了的话，能够思考用伪元素来实现，思路如下：在原先的元素下方创立一个有条纹背景的伪元素，并保障原先元素覆盖住它就行，这样就模仿了边框的成果。
那么如何创立条纹背景呢？这里咱们将应用 repeating-linear-gradient 来实现它
<div class=”card w-80″>
<div class=”border-stripe rounded-xl”>
Lorem ipsum… </div></div> 复制代码
.border-stripe {
–stripe-width: 0.5rem;
–stripe-deg: -45deg;
–stripe-color-1: var(–grey-color-1);
–stripe-offset-1: 2px;
–stripe-color-2: var(–skin-color-2);
–stripe-offset-2: 1rem;
–stripe-radius: 15px;
–stripe-inset: calc(var(–stripe-width) * -1);
&::before {@include inset(var(–stripe-inset)); content: “”; z-index: -1; background: repeating-linear-gradient(
var(–stripe-deg),
var(–stripe-color-1) 0 var(–stripe-offset-1),
var(–stripe-color-2) 0 var(–stripe-offset-2)
); border-radius: var(–stripe-radius);
}
}复制代码
为了保障复用性，这里将其形象成了 border-stripe 类，外面的值都能够通过 CSS 变量来动静调节
光泽成果
一看到光泽，置信你可能会想到一个要害角色——径向突变，通过它，咱们能够创作出放射状的图案，而光泽也恰好是放射状的，再依据背景能够叠加的个性，光泽成果就能轻松实现了
<div class=”flex flex-col space-y-4″>
<span class=”btn btn-primary btn-round inline-flex”>
<span class=”font-bold text-grad”>Shine Button 1</span>
</span>
<span class=”btn btn-info btn-round btn-depth inline-flex”>
<span class=”font-bold”>Shine Button 2</span>
</span></div> 复制代码
:root {
–blue-color-1: #08123d;
–gold-color-1: #dcb687;
–brown-color-1: #50301f;
–brown-color-2: #936237;
–gold-grad-1: radial-gradient(
circle at 50% 5%,
#{transparentize(white, 0.5)}, #eba262
), #eba262;
–gold-grad-2: linear-gradient(88deg, #e7924e 0%, #f8ffee 50%, #e7924e 100%);
–blue-grad-1: radial-gradient(
circle at 50% 5%,
#{transparentize(white, 0.8)}, #091344
), #091344;
–primary-color: var(–blue-grad-1);
–info-color: var(–gold-grad-1);
}.btn {
&-primary {border: 4px solid var(–gold-color-1); span {background-image: var(–gold-grad-2);
}
}
&-info {color: var(–brown-color-1); border: none;
}
&-depth {box-shadow: 0 -5px 0 var(–brown-color-2);
}
}复制代码
不规则形态
首先，让咱们先察看一下上图的缎带形态是由哪些根本形态组成的：两头是一个矩形，矩形下方有 2 个三角形，左右 2 侧各有一个被裁切过的矩形。一提裁切，就能想到 clip-path 这个属性，于是问题也就很好解决了
<div class=”ribbon”>
Pure CSS Ribbon <div class=”block”></div>
<div class=”block”></div>
<div class=”block”></div>
<div class=”block”></div></div> 复制代码
.ribbon {
–ribbon-color-1: var(–yellow-color-1);
–ribbon-color-2: var(–yellow-color-2);
–ribbon-color-3: var(–yellow-color-3); position: relative; padding: 0.5rem 1rem; color: white; background: var(–ribbon-color-1); .block {
&:nth-child(1),
&:nth-child(2) {position: absolute; bottom: -20%; width: 20%; height: 20%; background: var(–ribbon-color-2); clip-path: polygon(0 0, 100% 100%, 100% 0);
}
&:nth-child(1) {left: 0;
}
&:nth-child(2) {right: 0; transform: scaleX(-1);
}
&:nth-child(3),
&:nth-child(4) {position: absolute; z-index: -1; top: 20%; width: 40%; height: 100%; background: var(–ribbon-color-3); clip-path: polygon(0 0, 25% 50%, 0 100%, 100% 100%, 100% 0);
}
&:nth-child(3) {left: -20%;
}
&:nth-child(4) {right: -20%; transform: scaleX(-1);
}
}
}复制代码
留神到有一行代码transform: scaleX(-1);，这起到了程度翻转的作用，它能够避免再写一遍clip-path
浮雕成果
通过仔细观察，你会发现这是由 2 个同心的元素组成的，于是天然就想到了 inset 这个 Mixin。
创立了 2 个同心元素后，就要想方法来创立它们的浮雕光泽了。这里的光泽能够用 box-shadow 来实现，通过叠加多重暗影，咱们就能模拟出浮雕的成果了
<div class=”px-6 py-2 text-xl embossed cursor-pointer” data-text=” 浮雕按钮 ” >
浮雕按钮 </div> 复制代码
:root {
–red-color-1: #af2222;
–red-color-2: #c1423e;
–red-color-3: #c62a2a;
–red-color-4: #951110;
–green-color-1: #486433;
–green-color-2: #2b361a;
–red-grad-1: linear-gradient(
to right,
var(–red-color-1) 50%,
var(–red-color-2) 0
);
}.embossed {
–emboss-radius: 1rem;
–emboss-out: 6px;
–emboss-out-minus: calc(var(–emboss-out) * -1);
–emboss-inset: 2px;
–emboss-inset-minus: calc(var(–emboss-inset) * -1);
–emboss-blur: 1px;
–emboss-bg-1: var(–red-color-3);
–emboss-bg-2: var(–green-color-1);
–emboss-color-1: white;
–emboss-color-2: var(–red-color-4);
–emboss-color-3: var(–green-color-2); position: relative; box-sizing: border-box; white-space: nowrap;
&::before {@include inset(var(–emboss-out-minus)); content: “”; background: var(–emboss-bg-1); box-shadow: inset var(–emboss-inset-minus) var(–emboss-inset-minus)
var(–emboss-blur) var(–emboss-color-1),
inset var(–emboss-inset) var(–emboss-inset) var(–emboss-blur)
var(–emboss-color-2); border-radius: calc(var(–emboss-radius) + var(–emboss-out));
}
&::after {@include inset; @include flex-center; content: attr(data-text); color: white; font-weight: bold; background: var(–emboss-bg-2); box-shadow: inset var(–emboss-inset) var(–emboss-inset) var(–emboss-blur)
var(–emboss-color-1),
inset var(–emboss-inset-minus) var(–emboss-inset-minus)
var(–emboss-blur) var(–emboss-color-3); border-radius: var(–emboss-radius);
}
}复制代码