在用純css實(shí)現(xiàn)這些效果之前，筆者先介紹幾個(gè)常用的SCSS Mixin和一個(gè)得力武器，用它們來進(jìn)行創(chuàng)作將會(huì)事半功倍
覆蓋 - cover
@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {
position: absolute;
top: $top;
left: $left;
width: $width;
height: $height;
}
當(dāng)你想在原先元素的基礎(chǔ)上再“復(fù)制”一個(gè)元素，并將其覆蓋在它身上時(shí)，你將會(huì)用到它
demo地址：https://codepen.io/alphardex/pen/GRjEoBZ
嵌入 - inset
@mixin inset($inset: 0) {
position: absolute;
top: $inset;
left: $inset;
right: $inset;
bottom: $inset;
}
同樣地，這也是在原先元素基礎(chǔ)上復(fù)制出一個(gè)元素，只不過這個(gè)元素位置和原先的元素相同，大小會(huì)基于原先的元素而增減。
舉個(gè)例子，倘若你想創(chuàng)建多個(gè)半徑不同的同心圓，這個(gè)Mixin將會(huì)很有幫助
aqua.css
aqua.css是筆者開源的一個(gè)優(yōu)雅的、輕量級(jí)的CSS框架。里面有很多常用的組件以及常用的樣式類，用它來寫CSS體驗(yàn)將會(huì)非常爽
在codepen上，筆者準(zhǔn)備了一個(gè)aqua.css模版，大家可以用它來進(jìn)行CSS的創(chuàng)作
常見UI效果
條紋效果
首先，我們要抓住“邊框”這個(gè)詞，如何創(chuàng)作出一個(gè)特殊的邊框呢？如果一般的CSS屬性實(shí)現(xiàn)不了的話，可以考慮用偽元素來實(shí)現(xiàn)，思路如下：在原先的元素下方創(chuàng)建一個(gè)有條紋背景的偽元素，并保證原先元素覆蓋住它就行，這樣就模擬了邊框的效果。
那么如何創(chuàng)建條紋背景呢？這里我們將使用repeating-linear-gradient來實(shí)現(xiàn)它
<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);
}
}
為了保證復(fù)用性，這里將其抽象成了border-stripe類，里面的值都可以通過CSS變量來動(dòng)態(tài)調(diào)節(jié)
demo地址：https://codepen.io/alphardex/pen/VwKWvdG
光澤效果
一看到光澤，相信你可能會(huì)想到一個(gè)關(guān)鍵角色——徑向漸變，通過它，我們可以創(chuàng)作出放射狀的圖案，而光澤也恰好是放射狀的，再根據(jù)背景可以疊加的特性，光澤效果就能輕松實(shí)現(xiàn)了
<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);
}
}
demo地址：https://codepen.io/alphardex/details/vYXZNez
不規(guī)則形狀
首先，讓我們先觀察一下上圖的緞帶形狀是由哪些基本形狀組成的：中間是一個(gè)矩形，矩形下方有2個(gè)三角形，左右2側(cè)各有一個(gè)被裁切過的矩形。一提裁切，就能想到clip-path這個(gè)屬性，于是問題也就很好解決了
<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);，這起到了水平翻轉(zhuǎn)的作用，它可以防止再寫一遍clip-path
demo地址：https://codepen.io/alphardex/pen/OJRvaaR
浮雕效果
通過仔細(xì)觀察，你會(huì)發(fā)現(xiàn)這是由2個(gè)同心的元素組成的，于是自然就想到了inset這個(gè)Mixin。
創(chuàng)建了2個(gè)同心元素后，就要想辦法來創(chuàng)建它們的浮雕光澤了。這里的光澤可以用box-shadow來實(shí)現(xiàn)，通過疊加多重陰影，我們就能模擬出浮雕的效果了
<div class="px-6 py-2 text-xl embossed cursor-pointer" data-text="浮雕按鈕" style="--emboss-radius: 1.5rem">
浮雕按鈕
</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);
}
}
demo地址：https://codepen.io/alphardex/pen/poEEERM?editors=0110
