如果您問(wèn)我關(guān)於前端開(kāi)發(fā)的最多問(wèn)題，我會(huì)說(shuō)這是“我如何在CSS上變得更好？”。這個(gè)問(wèn)題通常在分享我做出的CSS插圖後出現(xiàn)。這是我喜歡在Codepen上做的事情。

對(duì)於許多人來(lái)說(shuō)，CSS是這種無(wú)法馴服的神話野獸?？死锼梗–hris）的這推文讓我笑了起來(lái)，因?yàn)閮嵐芫哂兄S刺意味的是，它有很多真相。也就是說(shuō)，如果我告訴您您只是創(chuàng)建想要的任何東西，那隻是幾個(gè)屬性和技術(shù)怎麼辦？事實(shí)是，您確實(shí)如此親密。

我一直想撰寫(xiě)這樣的文章一段時(shí)間，但是這是一個(gè)很難介紹的話題，因?yàn)橛泻芏嗫赡苄院驮S多技術(shù)，以至於通常有多種方法可以完成同一件事。 CSS插圖也是如此。沒(méi)有正確或錯(cuò)誤的方法。我們都使用相同的畫(huà)布。有很多不同的工具可以在頁(yè)面上獲取這些像素。

儘管沒(méi)有“一件尺寸適合所有尺寸”的方法，但我可以提供的是一套可能會(huì)在旅途中幫助您的技術(shù)。

時(shí)間和練習(xí)

CSS插圖需要大量時(shí)間和練習(xí)。您想成為的越準(zhǔn)確，插圖就越複雜，它的時(shí)間就越長(zhǎng)。耗時(shí)的部分通常不是決定要使用哪些屬性以及如何使用，而是使事物看起來(lái)正確的修補(bǔ)。準(zhǔn)備好對(duì)瀏覽器開(kāi)發(fā)工具中的樣式檢查員非常熟悉！我還建議您嘗試一下visbug。

本·埃文斯（Ben Evans）和戴安娜·史密斯（Diana Smith）是兩位出色的CSS藝術(shù)家。最近，兩者都談到了CSS插圖時(shí)的時(shí)間消耗。

我發(fā)布了一張模因般的圖片，說(shuō)明了一個(gè)杯子，而本的回答完美地總結(jié)了事情：

當(dāng)我第一次看到推文時(shí)，我很想在CSS中創(chuàng)建這個(gè)，但後來(lái)我認(rèn)為我的答復(fù)大約需要一個(gè)月。

需要時(shí)間！

CSS插圖pic.twitter.com/vqpqlktte5

- 傑伊？ （@jh3yy）2020年5月10日

追蹤是完全可以接受的

我們經(jīng)常對(duì)我們要說(shuō)明的是什麼有所了解。畢竟，本文與設(shè)計(jì)無(wú)關(guān)。這是關(guān)於拍攝圖像並使用DOM和CSS渲染。我很確定這項(xiàng)技術(shù)已經(jīng)出現(xiàn)以來(lái)已經(jīng)存在。但是，這是我最近幾個(gè)月分享的。

• 查找或創(chuàng)建您要說(shuō)明的圖像。
• 用標(biāo)籤將其拉入HTML。
• 將其放置在您的插圖下方。
• 減少圖像不透明度，使其仍然可見(jiàn)，但不要太過(guò)過(guò)度。
• 用DOM跟蹤它。

令我驚訝的是，這項(xiàng)技術(shù)不是常識(shí)。但這對(duì)於創(chuàng)建準(zhǔn)確的CSS插圖非常寶貴。

在這裡查看此技巧：

這是創(chuàng)建CSS @eggheadio的時(shí)間段？

之後，用剪輯路徑調(diào)整了陰影？

？ https://t.co/XhDRspwwFg via @CodePen #webdev #coding #CSS #animation #webdesign #design #creative #100DaysOfCode #HTML #Timelapse https://t.co/ZQ1hyzcoSA pic.twitter.com/iPf7ksYCGX

- 傑伊？ （@jh3yy）2020年5月1日

並在這裡嘗試：

注意響應(yīng)能力

如果從本文中有兩種外賣(mài)技巧，那就讓它成為上面的“跟蹤”，而下一個(gè)。

那裡有一些CSS插圖的絕妙示例。但是，其中一些不幸的是，它們?cè)谛∑聊簧蟻K沒(méi)有設(shè)計(jì)（甚至是可見(jiàn)）。我們生活在一個(gè)對(duì)技術(shù)第一印像很重要的時(shí)代?？紤]使用CSS說(shuō)明的鍵盤(pán)的示例。有人遇到您的工作，在他們的智能手機(jī)上打開(kāi)它，他們只有一半的插圖或一小部分。他們可能錯(cuò)過(guò)了演示中最酷的部分！

這是我的技巧：為您的插圖提供視圖單元，並創(chuàng)建自己的縮放單元。

對(duì)於尺寸和定位，您可以選擇使用縮放單元或百分比。當(dāng)您需要使用Box Shadow時(shí)，這特別有用，因?yàn)樵撐飿I(yè)接受視口單元，但不接受百分比。

考慮我在上面創(chuàng)建的CSS Egghead.io徽標(biāo)。我找到了我想使用的圖像，並使用IMG標(biāo)籤將其彈出在DOM中。

 <image src="'egghead.png'/"></image>

 img {
 身高：50Vmin;
 左：50％；
 不透明度：0.25;
 位置：固定；
 頂部：50％；
 變換：轉(zhuǎn)換（-50％，-50％）;
}

高度為50Vmin，是CSS插圖的所需尺寸。降低的不透明度使我們能夠隨著進(jìn)步的方式清楚地“追蹤”插圖。

然後，我們創(chuàng)建縮放單元。

 /**
 *圖像尺寸為742 x 769
 *寬度為742
 *身高是769
 *我所需的尺寸是50Vmin
*/
：根 {
  - 大?。?0;
  - 單位：calc（（var（ -  size） / 769） * 1Vmin）;
}

有了圖像尺寸，我們可以創(chuàng)建一個(gè)統(tǒng)一的單元，該單元將通過(guò)我們的圖像進(jìn)行擴(kuò)展。我們知道高度是最大的單元，因此我們將其用作創(chuàng)建分?jǐn)?shù)單元的基礎(chǔ)。

我們得到這樣的東西：

 - 單元：0.06501950585Vmin;

看起來(lái)很尷尬，但是請(qǐng)相信我，很好。我們可以使用它來(lái)使用calc（）來(lái)尺寸插圖容器。

 。蛋 {
 高度：計(jì)算（769 * var（ - 單位））;
 位置：相對(duì)；
 寬度：calc（742 * var（ - 單位））;
 z索引：2;
}

如果我們使用百分比或新的 - 單位自定義屬性來(lái)在CSS Illustration的容器中樣式元素，我們將獲得響應(yīng)式CSS插圖……而它只使用CSS變量進(jìn)行了幾行數(shù)學(xué)！

調(diào)整此演示的大小，您會(huì)發(fā)現(xiàn)所有內(nèi)容始終使用50Vmin作為尺寸約束。

測(cè)量?jī)纱?，切一?/h3>

另一個(gè)提示是測(cè)量事物。哎呀，如果您使用物理對(duì)象，您甚至可以拿起磁帶尺寸！

這看起來(lái)可能有點(diǎn)時(shí)髦，但我測(cè)量了這個(gè)場(chǎng)景。這是我休息室裡的電視組合單元。這些測(cè)量值等於厘米。我用這些基於電視的實(shí)際高度獲得了一個(gè)響應(yīng)單元。由於自定義屬性，我們可以給這個(gè)數(shù)字以及所有其他數(shù)字，可以輕鬆記住它的用途。

 ：根 {
  - 輕開(kāi)關(guān)：15;
  - 光線開(kāi)關(guān) - 境：10;
  - 輕便開(kāi)關(guān)：15;
  - 輕便開(kāi)關(guān)底：25;
 -TV-BEZEL：15;
 -TV-UNIT-BEZEL：4;
  - 態(tài)度高：25Vmin;
 -One-cm：calc（var（ - 所需高度） / var（ - 電視高））;
 -TV寬度：158.1;
 -TV高度：89.4;
  - 單位高：42;
  - 單位寬度：180;
  - 單位頂：78.7;
 -TV-Bottom：114.3;
  - 尺度-TV寬度：calc（var（ - 電視寬度） * var（-1-cm））;
  - 尺度-TV-HEIGHT：calc（var（-tv-height） * var（-1-cm））;
  - 尺度單位寬度：calc（var（ - 單位寬度） * var（ - 一個(gè)cm））;
  - 標(biāo)準(zhǔn)單位高度：calc（var（ - 單位高） * var（ - 一個(gè)cm））;
}

一旦我們計(jì)算一個(gè)變量，我們就可以在任何地方使用它。我知道我的電視寬158.1厘米，高89.4厘米。我檢查了手冊(cè)。但是在我的CSS插圖中，它將始終擴(kuò)展到25Vmin。

在所有事物上使用絕對(duì)定位

這將為您節(jié)省一些擊鍵。通常，您會(huì)希望完全定位元素。保存自己，將此規(guī)則放在某個(gè)地方。

 / *您的班級(jí)名稱(chēng)可能會(huì)有所不同 */
.css-lustration *，
.css-lustration *：之後，
.css-lustration *：之前，
.css-lustration：之後，
.css-lustration：{
 盒子大小：邊框框；
 位置：絕對(duì)；
}

您的鍵盤(pán)將感謝您！

定位是CSS的一個(gè)棘手概念。您可以在CSS年鑑中閱讀有關(guān)如何使用它的更多信息。

或者，與這個(gè)小位置遊樂(lè)場(chǎng)一起玩：

堅(jiān)持

這是迄今為止最難做的事情。您如何處理CSS插圖？你甚至從哪裡開(kāi)始？您應(yīng)該從最外面的部分開(kāi)始並努力工作嗎？那效果不佳。

奇怪的是，您會(huì)嘗試一些方法，並找到一種更好的方法。當(dāng)然，您會(huì)做一些來(lái)回的事情，但是，您練習(xí)的越多，就可以在發(fā)現(xiàn)模式和開(kāi)發(fā)最適合您的方法方面獲得越好。

我傾向於將我的方法與您如何創(chuàng)建插圖組成的矢量圖像有關(guān)。如果需要，將其分開(kāi)並在紙上繪製。但是，從底部開(kāi)始，然後向上努力。這往往首先意味著更大的形狀，稍後更細(xì)節(jié)。當(dāng)您需要移動(dòng)元素時(shí)，您總是可以使用堆疊索引進(jìn)行修補(bǔ)。

維護(hù)您的樣式紮實(shí)的結(jié)構(gòu)

這使我們進(jìn)入了結(jié)構(gòu)。嘗試避免使用插圖的平坦DOM結(jié)構(gòu)。保持原子質(zhì)使移動(dòng)插圖的一部分變得更加容易。這也將使顯示和隱藏插圖的一部分甚至在以後對(duì)它們進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)更容易?？紤]CSS Snorlax演示。手臂，腳，頭等是單獨(dú)的元素。與我試圖將所有東西放在一起的情況下，這使得對(duì)手臂的動(dòng)畫(huà)變得容易得多，因?yàn)槲铱梢院?jiǎn)單地將動(dòng)畫(huà)應(yīng)用於.snorlax__arm-left級(jí)別。

這是我創(chuàng)建演示的及時(shí)拍攝：

試圖將我們昨晚建造的CSS Snorlax的時(shí)間解密匯總在一起？

有趣的是看著它！

？ https://t.co/vbvymfun5v通過(guò) @codepen＃webdev #coding #html #css #webdesign #webdesign＃100daysofcode #creative #design＃animimative＃animation＃animation pic.twitter.com/0mjtlprqfpp

- 傑伊？ （@jh3yy）2020年4月28日

處理尷尬的形狀

在CSS-Tricks上有一篇非常好的文章，用於使用CSS創(chuàng)建形狀。但是，像長(zhǎng)曲線甚至外曲線一樣，更“尷尬”的形狀又如何呢？在這些情況下，我們需要在框框外面思考。溢出，邊界 - 拉迪烏斯和剪貼畫(huà)等屬性是很大的助手。

考慮一下此CSS jigglypuff演示。切換複選框。

那是創(chuàng)建曲面形狀的關(guān)鍵！我們的元素比施加邊界的radius的身體大得多。然後，我們將溢出：隱藏在身體上以切斷該零件。

我們?nèi)绾蝿?chuàng)建外曲線？這有點(diǎn)棘手。但是我喜歡使用的技巧是一個(gè)透明的元素，邊框厚。然後使用邊框 - 劃線，並在需要時(shí)夾住多餘。

如果您擊中切換，它會(huì)揭示我們用來(lái)穿過(guò)該角落的元素。另一個(gè)技巧可能是覆蓋與背景顏色匹配的圓圈。這很好，直到我們需要更改背景顏色為止。如果您有該顏色的變量或其他位置，則可以。但是，這可能會(huì)使事情更難維護(hù)。

剪輯路徑是你的朋友

您可能已經(jīng)註意到了最後一個(gè)演示中的幾個(gè)有趣的CSS屬性，包括剪輯路徑。如果您想創(chuàng)建複雜的CSS形狀，則很可能需要剪貼式路徑。當(dāng)隱藏父盒溢出不做時(shí)，切斷元素的位置特別方便。

這是我前一段時(shí)間構(gòu)建的一些演示，展示了不同的剪輯路徑可能性。

還有這個(gè)演示從“ CSS的形狀”文章中獲取想法，並用剪輯路徑重新創(chuàng)建。

邊境 - 拉迪烏斯是你的另一個(gè)朋友

您將需要Border-Radius來(lái)創(chuàng)建曲線。一個(gè)罕見(jiàn)的技巧是使用“雙”語(yǔ)法。這使您可以為每個(gè)角創(chuàng)建水平和垂直半徑。

玩這個(gè)演示，真正欣賞邊界拉迪烏斯的力量。我主張全面使用百分比，以保持響應(yīng)速度。

陰影技術(shù)

您已經(jīng)擁有所有的形狀，一切都很好地佈置了，並且所有正確的顏色都已經(jīng)到位了……但是仍然有些東西看上去。奇怪的是，這缺乏陰影。

陰影增加了深度並營(yíng)造出逼真的感覺(jué)?？紤]一下Gal Shir插圖的這種表演。 Gal擅長(zhǎng)使用陰影和漸變製作精美的插圖。我認(rèn)為進(jìn)行重新創(chuàng)建它並包括一個(gè)切換陰影的開(kāi)關(guān)，以查看它產(chǎn)生的不同。

陰影效果通常是通過(guò)盒子陰影和背景圖像組合創(chuàng)建的。

這些屬性的關(guān)鍵是我們可以將它們堆放在逗號(hào)分隔的列表中。例如，演示中的大鍋具有在體內(nèi)使用的梯度列表。

 .cauldron {
 背景：
  徑向梯度（25％55％，var（ - 邊緣色），透明），25％25％，透明），
  徑向梯度（-2％50％，100％100％100％，透明，透明92％，var（ - 大鍋彩色）），），），
  徑向梯度（-5％50％，100％100％100％，透明，透明80％，var（ - 黑暗）），
  線性級(jí)別（310DEG，var（ - 內(nèi)式彩色）25％，透明），var（ - 大鍋彩色）;
}

請(qǐng)注意，徑向級(jí)（）和線性級(jí)別（）在這裡使用，並且並非總是具有完美的圓數(shù)值。同樣，這些數(shù)字很好。實(shí)際上，您將花費(fèi)大量時(shí)間在風(fēng)格檢查員中進(jìn)行調(diào)整和修補(bǔ)。

通常，它與盒子陰影一起使用。但是，我們還可以使用插圖值來(lái)創(chuàng)建棘手的邊界和其他深度。

 .cauldron__opening {
 盒子陰影：
  0 0 px calc（var（ -  size） * 0.05px）calc（var（ -  size） * 0.005px）var（-rim-color）插圖，
  0 calc（var（ -  size） * 0.025px）0 calc（var（ -  size） * 0.025px）var（ -  inner-rim-color）插圖，
  0 10px 20px 0px var（ - 黑暗），0 10px 20px -10px var（ -  inner-rim-color）;
}

當(dāng)然，有時(shí)會(huì)更有意義地使用過(guò)濾器：drop-shadow（）而不是獲得所需的效果。

林恩·費(fèi)舍爾（Lynn Fisher）的A.Singlediv.com是這些屬性正在行動(dòng)的絕妙例子。在該站點(diǎn)上戳戳，並檢查一些插圖，以了解插圖中使用盒子陰影和背景圖像的好方法。

盒子陰影是如此強(qiáng)大，以至於您可以用它來(lái)創(chuàng)建整個(gè)插圖。我曾經(jīng)開(kāi)玩笑說(shuō)創(chuàng)建一美元的CSS插圖。

在CSS中吧？ ？ #webdev #css #Animation #webdesign #webdesign＃100DaysofCode #html https://t.co/vmyeyssk83

- 傑伊？ （@jh3yy）2020年4月22日

我用一個(gè)發(fā)電機(jī)用單個(gè)Div創(chuàng)建插圖。但是阿爾瓦羅·蒙托羅（Alvaro Montoro）對(duì)此進(jìn)行了一些進(jìn)一步的處理，並寫(xiě)了一個(gè)用盒子陰影來(lái)做的發(fā)電機(jī)。

預(yù)處理器非常有幫助

儘管不需要它們，但使用預(yù)處理器可以幫助您保持整潔和整潔。例如，PUG使編寫(xiě)HTML更快，尤其是在使用循環(huán)處理一堆重複元素時(shí)。從那裡，我們可以以一種只需要定義一次樣式的方式來(lái)範(fàn)圍定制屬性，然後在需要的地方覆蓋它們。

這是證明乾燥結(jié)構(gòu)的另一個(gè)示例。這些花是用相同的標(biāo)記構(gòu)造的，但是每個(gè)花都有自己的索引類(lèi)，用於應(yīng)用範(fàn)圍的CSS屬性。

第一朵花具有這些特性：

 .Flower-1 {
 -HUE：190;
 -X：0;
  -  Y：0;
  - 大?。?25;
 -r：0;
}

這是第一個(gè)，因此所有其他都基於它。請(qǐng)注意，第二朵花是如何向右駛下的。所要做的只是將不同的值分配給相同的自定義屬性：

 .flower-2 {
 -HUE：320;
 -X：140;
  -  Y：-75;
  - 大?。?5;
 -r：40;
}

最新的Codepen Spark中的動(dòng)畫(huà)響應(yīng)CSS LEIF功能！ ?

對(duì)於那些不認(rèn)識(shí)動(dòng)物過(guò)境的人，萊夫是一個(gè)綠色的懶惰者，訪問(wèn)了您的島嶼？

這是一個(gè)時(shí)間！ ？

？ https://t.co/tkhx4nwxp7通過(guò)@codepen pic.twitter.com/najirsslym

- 傑伊？ （@jh3yy）2020年5月19日

就是這樣！

出去，使用以下技巧，提出自己的秘訣，分享它們，並分享您的CSS傑作！嘿，如果您有自己的建議，請(qǐng)也分享！這絕對(duì)是通過(guò)大量反複試驗(yàn)來(lái)學(xué)到的那種東西 - 對(duì)我有用的東西可能與對(duì)您有用的東西不同，我們可以從這些不同的方法中學(xué)習(xí)

以上是有關(guān)複雜CSS插圖的建議的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！