斑點(diǎn)，斑點(diǎn)，斑點(diǎn)。你討厭他們。你愛他們。就個人而言，作為設(shè)計(jì)文盲，我喜歡過度使用它們……很多。而且，當(dāng)您一遍又一遍地重復(fù)相同的過程時，這只是一個問題，即您可以優(yōu)化它的數(shù)量，或者在這種情況下，在CSS中創(chuàng)建斑點(diǎn)的最簡單方法是什么？事實(shí)證明，與往常一樣，有很多方法。

要知道我們的以下斑點(diǎn)是否值得使用，我們需要他們通過三個測試：

1. 它們只能使用一個元素（最好沒有偽元）。
2. 它們可以輕松設(shè)計(jì)（理想情況下是通過在線工具）。
3. 我們可以對它們使用梯度背景，邊界，陰影和其他CSS影響。

事不宜遲，讓我們的斑點(diǎn)，斑點(diǎn)，斑點(diǎn)就在進(jìn)去。

只是在線生成它們

我知道，單擊有關(guān)在CSS中制作斑點(diǎn)的文章只是為了讓我說您可以在CSS之外生成它們，這是令人沮喪的。盡管如此，這可能是在網(wǎng)絡(luò)上創(chuàng)建斑點(diǎn)的最常見方法，因此要徹底，這些是我以前用來創(chuàng)建SVG斑點(diǎn)的一些在線工具。

• 海基。此后，我使用的可能性最大，除了斑點(diǎn)外，它還可以產(chǎn)生許多SVG背景。
• Blobmaker。用于制作斑點(diǎn)的專用工具。這顯然是Haikei的一部分，因此您可以同時使用兩者。
• 最后，幾乎所有圖形程序都可以使您手工繪制斑點(diǎn)并將其導(dǎo)出為SVG。

例如，這是我剛剛生成的。保持它，因?yàn)樯院髸缮嫌脠觥?/p>

<svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FA4D56" d="M65.4,-37.9C79.2,-13.9,81,17,68.1,38C55.2,59.1,27.6,70.5,1.5,69.6C-24.6,68.8,-49.3,55.7,-56,38.2C-62.6,20.7,-51.3,-1.2,-39,-24.4C-26.7,-47.6,-13.3,-72,6.2,-75.6C25.8,-79.2,51.6,-62,65.4,-37.9Z" transform="translate(100 100)"></path>
</svg>

使用Border-Radius

雖然違反直覺，但我們可以使用theborder-radiusproperty創(chuàng)建斑點(diǎn)。無論如何，這種技術(shù)并不是什么新鮮事。這是Nils Binderin 2018所描述的，但仍然相當(dāng)不知道。即使對于那些使用它的人，內(nèi)部工作也不是完全清楚的。

首先，您可能會知道每個單個角落的半徑都從左上角順時針旋轉(zhuǎn)。例如，我們可以將每個角落的radiusto設(shè)置為氣泡正方形：

<div></div>

 .blob {
  邊界拉迪烏斯：25％50％75％100％；
}

但是，Whatborder-radiusdo（以及為什么稱為“半徑”）是按照給定半徑的圓圈塑造每個角落的原因。例如，如果我們將左上角設(shè)置為25％，它將跟隨一個半徑為25％的圓圈，其大小是形狀的大小。

 .blob {
  邊界 - 左邊 - 拉迪烏斯：25％；
}

鮮為人知的是，每個角屬性仍然是其水平和垂直半徑的捷徑。通常，您將這兩個半徑設(shè)置為相同的值，獲得一個圓圈，但是可以單獨(dú)設(shè)置它們以創(chuàng)建橢圓形。例如，以下將水平半徑設(shè)置為元素寬度的25％，垂直范圍為其高度的50％：

 .blob {
  邊界 - 左邊 - 拉迪烏斯：25％50％；
}

現(xiàn)在，我們可以像橢圓一樣塑造每個角落，正是所有四個橢圓的組合都會產(chǎn)生斑點(diǎn)的幻想！只要考慮到通過Border-radiusproperty使用水平和垂直半徑語法，我們就需要使用正向斜線（/）將水平半徑與垂直半徑分開。

 .blob {
  邊界拉迪烏斯：
    /* 水平的 */
    100％30％60％70％ /
    /* 垂直的 */
    50％40％70％70％；
}

語法不太直觀，因此從頭開始設(shè)計(jì)斑點(diǎn)可能會令人頭疼。幸運(yùn)的是，尼爾斯·粘合劑（Nils Binder）為此做了一個toolexact！

斑點(diǎn)斑點(diǎn)在一起

這個黑客很棒。我們不應(yīng)該使用它，但我們?nèi)匀贿@樣做。誠然，我們僅限于無聊的斑點(diǎn)。由于Border-Radius的性質(zhì)，無論我們嘗試多么努力，我們都只會得到凸形。

只是去外訂單 - 拉迪烏斯，我們可以通過將一個以上的斑點(diǎn)粘在一起來盡量減少一點(diǎn)：

但是，我不想花太多時間在這種技術(shù)上，因?yàn)樗磺袑?shí)際了，不值得。列舉一些缺點(diǎn)：

1. 我們使用的是多個元素，或者至少是額外的偽元素。理想情況下，我們希望將其保留在一個元素上。
2. 我們沒有一個工具來原型blobby融合，因此制作是一個反復(fù)試驗(yàn)的過程。
3. 我們不能使用邊界，漸變或盒子陰影，因?yàn)樗鼈儠沂驹氐拇缶V。

多個背景和SVG過濾器

這是盧卡斯·貝伯（Lucas Bebber）在此描述的粘糊糊效應(yīng)的改進(jìn)，盡管我不知道誰是誰提出的。在原始效果中，可以將幾個元素變形在一起，例如粘在彼此之間并流出的液體滴劑：

它通過首先模糊的形狀在附近的形狀來起作用，從而創(chuàng)造了一些連接的陰影。然后，我們將對比度提高，迫使模糊并在此過程中平穩(wěn)連接它們。以克里斯·科耶（Chris Coyer）的演示為例（這是從2014年到10年前?。?/p>

如果您查看代碼，您會注意到Chris沿TheBlur（）和Contrast（）函數(shù)使用FilterProperty，我在其他Blob演示中也看到了這一點(diǎn)。具體來說，它在父元素上的每個圓圈和thencontrast（）上應(yīng)用。因此，如果我們有以下HTML：

  <div></div>
  <div></div>
  <div></div>

…我們需要應(yīng)用過濾器和背景顏色：

 .blob {
  過濾器：對比（50）;
  背景：白色； / *純色是必需的 */
}

.subblob {
  過濾器：模糊（15px）;
  背景：黑色； / *純色是必需的 */
}

但是，有一個很好的理由為什么這些演示堅(jiān)持白色形狀和黑色背景（反之亦然），因?yàn)橐坏╊伾粔驅(qū)Ρ?，事情就變得不可預(yù)測了。通過更改顏色，在以下演示中自己查看。保持警惕：陰影變得丑陋。

為了解決這個問題，我們將使用SVG過濾器。我不想在SVG上獲得技術(shù)性太高（如果您愿意，請閱讀Luca的帖子！）。簡而言之，我們可以使用SVG應(yīng)用模糊和對比度的過濾器，但是現(xiàn)在，我們還可以選擇將對比度應(yīng)用于哪個顏色通道，而與normalContrast（）不同，它可以修改所有顏色。

由于我們想將色彩通道（R，GANDB）保持不變，因此我們只會為Alpha頻道構(gòu)成對比度。這轉(zhuǎn)化為下一個SVG濾波器，可以嵌入HTML中：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute;">
  <defs>
    <filter>
      <fegaussianblur in="SourceGraphic" stddeviation="12" result="blur"></fegaussianblur>
      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6" result="goo"></fecolormatrix>
      <feblend in="SourceGraphic" in2="blob"></feblend>
    </filter>
  </defs>
</svg>

要應(yīng)用它，我們將再次使用filter，但是這次我們將將其設(shè)置為tourl（“＃blob”），以便從HTML中拉出SVG。

 .blob {
  過濾器：URL（“＃blob”）;
}

現(xiàn)在，我們甚至可以將其與梯度背景一起使用！

話雖如此，這種方法帶有兩個小但很重要的變化對普通CSS過濾器的變化：

1. 過濾器應(yīng)用于父元素，而不是單個形狀。
2. 母元素必須是透明的（這是一個巨大的優(yōu)勢）。為了改變背景顏色，我們可以更改身體或其他祖先的背景，它將無問題。

剩下的就是將subblobelements放在一起，以使它們形成足夠的形狀，然后應(yīng)用SVG過濾器以變形：

使其成為一個元素

這效果很好，但是它與我們通過變形的幾個Border-radius實(shí)例所產(chǎn)生的斑點(diǎn)有類似的問題：太多的元素?zé)o法簡單。幸運(yùn)的是，我們可以利用TheBackgroundProperty創(chuàng)建多種形狀，并使用SVG過濾器將它們共同形成，并在一個元素中使用。由于我們將其保留在一個元素上，因此我們將僅回到OneEmpty .blob div：

<div></div>

回顧一下，thebackgroundshorthand可以設(shè)置所有背景屬性，還可以立即設(shè)置多個背景。在所有屬性中，我們只關(guān)心background-image，background-tosive-background大小。

首先，我們將使用二進(jìn)制（）使用radial-Gradient（）來創(chuàng)建元素內(nèi)的圓：

身體 {
  背景：徑向梯度（最遠(yuǎn)的側(cè)面，var（-blob-color）100％，＃0000）;
  背景重復(fù)：無重復(fù)； /* 重要的！ */
}

這是每個參數(shù)的作用：

• 最遠(yuǎn)的一側(cè)：將形狀限制在元素的盒子盒中心最遠(yuǎn)的盒子上。這樣，它被保存為一個圓圈。
• var（-blob-color）100％：用相同的顏色填充背景形狀從0到100％，因此最終以純色。
• ＃0000：完成形狀后，它可以完全停止透明度，因此顏色結(jié)束了。

下一部分是使用thebackground-position和background-sizeproperties移動和調(diào)整大小。幸運(yùn)的是，兩者都可以設(shè)置為漸變的漸變，并通過前向斜線（/）彼此分開。

身體 {
  背景：徑向級別（...）20％30％ / 30％40％；
  背景重復(fù)：無重復(fù)； /* 重要的！ */
}

第一對百分比設(shè)置了形狀的水平和垂直位置（作為左上角的參考），而第二對設(shè)置了形狀的寬度和高度（作為參考元素的大小為參考）。

正如我提到的那樣，我們可以將不同的背景堆疊在一起，這意味著我們可以根據(jù)需要創(chuàng)建盡可能多的圓圈/橢圓！例如，我們可以在同一元素上創(chuàng)建三個橢圓：

 .blob {
  背景：
    徑向梯度（最遠(yuǎn)的一側(cè)，var（-blob-color）100％，＃0000）20％30％ / 30％40％， 
    徑向梯度（最遠(yuǎn)的一側(cè)，var（-blob-color）100％，＃0000）80％50％ / 40％60％， 
    徑向梯度（最遠(yuǎn)的一側(cè)，var（-blob-color）100％，＃0000）50％70％ / 50％50％；
  背景重復(fù)：無重復(fù)；
}

更好的是，SVG過濾器不在乎形狀是由元素還是背景制成的，因此我們還可以使用LastUrl（#BLOB）過濾器將它們變形！

盡管這種方法對于斑點(diǎn)來說可能太多了，但它可以在無縫的動畫中解鎖擠壓，拉伸，分裂和合并斑點(diǎn)。

同樣，所有這些技巧都很棒，但不足以滿足我們想要的！我們完成了將斑點(diǎn)減少到單個元素的方法，但是我們?nèi)匀粺o法使用漸變，邊界或陰影，而且它們在設(shè)計(jì)和模型上也很乏味。然后，這將我們帶入了最終的斑點(diǎn)方法……

使用shape（）函數(shù)

幸運(yùn)的是，有一種新的方法來制作僅掉落到CSS的斑點(diǎn)：theshape（）函數(shù)！

我將簡要解釋Shape（）的語法，但是要深入說明，您需要查看CSS-Tricks Almanac的這一解釋器，以及Astemani Afif在TheShape（）函數(shù)上的三個零售款以及他最近的文章。

首先，CSSSHAPE（）函數(shù)與Theclip-PathProperty一起使用，將元素切成我們想要的任何形狀。更具體地說，它使用SVG'Spathsyntax的口頭版本。該語法具有許多類型的線條的命令，但是當(dāng)Blobbing fatshape（）Blob Blobs（）時，我們將使用thecurvecommand定義曲線：

 .blob {
  剪輯路徑：形狀（
    來自x0 y0， 
    用XC1 YC1曲線到X1 Y1， 
    用XC21 YC21 / XC22 YC22曲線到X2 Y2
    / * ... */
  ）；
}

讓我們分解每個參數(shù)：

• x0 y0定義形狀的起點(diǎn)。
• Curvestarts曲線曲線，其中的下一個點(diǎn)，而XC1 yc1定義了Bézier曲線中使用的控制點(diǎn)。
• 下一個參數(shù)是相似的，但是我們使用了xc21 yc21 / xc22 yc22instead來定義貝齊爾曲線上的兩個控制點(diǎn)。

老實(shí)說，我不完全理解Bézier曲線和控制點(diǎn)，但是幸運(yùn)的是，我們不需要它們才能使用Useshape（）和斑點(diǎn)！同樣，Shape（）使用SVG'Spathsyntax的口頭版本，因此它可以繪制SVG罐的任何形狀，這意味著我們可以翻譯我們之前生成的SVG斑點(diǎn)……以及CSS-yify它們。為此，我們將從我們的SVG中獲取TheDattribute（定義Path）并將其粘貼到Temani'ssvg Toshape（）Generator中。

這是工具為我生成的確切代碼：

 .blob {
  方面比例：0.925; /*也生成！ */

  剪輯路徑：形狀（
    從91.52％26.2％，
    曲線至93.52％78.28％，為101.76％42.67％/103.09％63.87％，
    曲線至44.11％99.97％，為83.95％92.76％/63.47％100.58％，
    曲線至1.45％78.42％，為24.74％99.42％/6.42％90.43％，
    曲線至14.06％35.46％，為-3.45％66.41％/4.93％51.38％，
    曲線至47.59％0.33％，為23.18％19.54％/33.13％2.8％，
    曲線至91.52％26.2％，為62.14％-2.14％/81.28％9.66％
  ）；
}

您可能已經(jīng)猜到了，它返回了我們美麗的斑點(diǎn)：

讓我們檢查一下是否通過我們的要求：

1. 是的，它們可以由一個元素制成。
2. 是的，它們也可以在發(fā)電機(jī)中創(chuàng)建，然后轉(zhuǎn)換為CSS。
3. 是的，我們可以使用梯度背景，但是由于clip-path（）的性質(zhì)，邊界和陰影被剪掉。

三分之二？也許三個半的三分之一？即使不是完美的，這也是對其他方法的巨大進(jìn)步。

結(jié)論

因此，las，我們未能找到我認(rèn)為是斑點(diǎn)的完美CSS方法。但是，我驚訝于如此瑣碎的設(shè)計(jì)斑點(diǎn)如何教會我們有關(guān)許多技巧和新的CSS功能，其中許多我不認(rèn)識自己。

以上是CSS斑點(diǎn)食譜的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！