有關複雜CSS插圖的建議

如果您問我關於前端開發的最多問題，我會說這是“我如何在CSS上變得更好？”。這個問題通常在分享我做出的CSS插圖後出現。這是我喜歡在Codepen上做的事情。

對於許多人來說，CSS是這種無法馴服的神話野獸。克里斯（Chris）的這推文讓我笑了起來，因為儘管具有諷刺意味的是，它有很多真相。也就是說，如果我告訴您您只是創建想要的任何東西，那隻是幾個屬性和技術怎麼辦？事實是，您確實如此親密。

我一直想撰寫這樣的文章一段時間，但是這是一個很難介紹的話題，因為有很多可能性和許多技術，以至於通常有多種方法可以完成同一件事。 CSS插圖也是如此。沒有正確或錯誤的方法。我們都使用相同的畫布。有很多不同的工具可以在頁面上獲取這些像素。

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

時間和練習

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

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

我發布了一張模因般的圖片，說明了一個杯子，而本的回答完美地總結了事情：

當我第一次看到推文時，我很想在CSS中創建這個，但後來我認為我的答復大約需要一個月。

需要時間！

CSS插圖pic.twitter.com/vqpqlktte5

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

>

追踪是完全可以接受的

我們經常對我們要說明的是什麼有所了解。畢竟，本文與設計無關。這是關於拍攝圖像並使用DOM和CSS渲染。我很確定這項技術已經出現以來已經存在。但是，這是我最近幾個月分享的。

• 查找或創建您要說明的圖像。
• 用標籤將其拉入HTML。
• 將其放置在您的插圖下方。
• 減少圖像不透明度，使其仍然可見，但不要太過過度。
• 用DOM跟踪它。

令我驚訝的是，這項技術不是常識。但這對於創建準確的CSS插圖非常寶貴。

在這裡查看此技巧：

這是創建CSS @eggheadio的時間段？

之後，用剪輯路徑調整了陰影？

？ 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日

並在這裡嘗試：

注意響應能力

如果從本文中有兩種外賣技巧，那就讓它成為上面的“跟踪”，而下一個。

那裡有一些CSS插圖的絕妙示例。但是，其中一些不幸的是，它們在小屏幕上並沒有設計（甚至是可見）。我們生活在一個對技術第一印像很重要的時代。考慮使用CSS說明的鍵盤的示例。有人遇到您的工作，在他們的智能手機上打開它，他們只有一半的插圖或一小部分。他們可能錯過了演示中最酷的部分！

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

對於尺寸和定位，您可以選擇使用縮放單元或百分比。當您需要使用Box Shadow時，這特別有用，因為該物業接受視口單元，但不接受百分比。

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

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

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

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

然後，我們創建縮放單元。

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

有了圖像尺寸，我們可以創建一個統一的單元，該單元將通過我們的圖像進行擴展。我們知道高度是最大的單元，因此我們將其用作創建分數單元的基礎。

我們得到這樣的東西：

 - 單元：0.06501950585Vmin;

看起來很尷尬，但是請相信我，很好。我們可以使用它來使用calc（）來尺寸插圖容器。

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

如果我們使用百分比或新的 - 單位自定義屬性來在CSS Illustration的容器中樣式元素，我們將獲得響應式CSS插圖……而它只使用CSS變量進行了幾行數學！

調整此演示的大小，您會發現所有內容始終使用50Vmin作為尺寸約束。

測量兩次，切一次

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

這看起來可能有點時髦，但我測量了這個場景。這是我休息室裡的電視組合單元。這些測量值等於厘米。我用這些基於電視的實際高度獲得了一個響應單元。由於自定義屬性，我們可以給這個數字以及所有其他數字，可以輕鬆記住它的用途。

 ：根 {
  - 輕開關：15;
  - 光線開關 - 境：10;
  - 輕便開關：15;
  - 輕便開關底：25;
 -TV-BEZEL：15;
 -TV-UNIT-BEZEL：4;
  - 態度高：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（ - 一個cm））;
  - 標准單位高度：calc（var（ - 單位高） * var（ - 一個cm））;
}

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

在所有事物上使用絕對定位

這將為您節省一些擊鍵。通常，您會希望完全定位元素。保存自己，將此規則放在某個地方。

 / *您的班級名稱可能會有所不同 */
.css-lustration *，
.css-lustration *：之後，
.css-lustration *：之前，
.css-lustration：之後，
.css-lustration：{
 盒子大小：邊框框；
 位置：絕對；
}

您的鍵盤將感謝您！

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

或者，與這個小位置遊樂場一起玩：

堅持

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

奇怪的是，您會嘗試一些方法，並找到一種更好的方法。當然，您會做一些來回的事情，但是，您練習的越多，就可以在發現模式和開發最適合您的方法方面獲得越好。

我傾向於將我的方法與您如何創建插圖組成的矢量圖像有關。如果需要，將其分開並在紙上繪製。但是，從底部開始，然後向上努力。這往往首先意味著更大的形狀，稍後更細節。當您需要移動元素時，您總是可以使用堆疊索引進行修補。

維護您的樣式紮實的結構

這使我們進入了結構。嘗試避免使用插圖的平坦DOM結構。保持原子質使移動插圖的一部分變得更加容易。這也將使顯示和隱藏插圖的一部分甚至在以後對它們進行動畫動畫更容易。考慮CSS Snorlax演示。手臂，腳，頭等是單獨的元素。與我試圖將所有東西放在一起的情況下，這使得對手臂的動畫變得容易得多，因為我可以簡單地將動畫應用於.snorlax__arm-left級別。

這是我創建演示的及時拍攝：

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

有趣的是看著它！

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

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

處理尷尬的形狀

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

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

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

我們如何創建外曲線？這有點棘手。但是我喜歡使用的技巧是一個透明的元素，邊框厚。然後使用邊框 - 劃線，並在需要時夾住多餘。

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

剪輯路徑是你的朋友

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

這是我前一段時間構建的一些演示，展示了不同的剪輯路徑可能性。

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

邊境 - 拉迪烏斯是你的另一個朋友

您將需要Border-Radius來創建曲線。一個罕見的技巧是使用“雙”語法。這使您可以為每個角創建水平和垂直半徑。

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

陰影技術

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

陰影增加了深度並營造出逼真的感覺。考慮一下Gal Shir插圖的這種表演。 Gal擅長使用陰影和漸變製作精美的插圖。我認為進行重新創建它並包括一個切換陰影的開關，以查看它產生的不同。

陰影效果通常是通過盒子陰影和背景圖像組合創建的。

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

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

請注意，徑向級（）和線性級別（）在這裡使用，並且並非總是具有完美的圓數值。同樣，這些數字很好。實際上，您將花費大量時間在風格檢查員中進行調整和修補。

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

 .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）;
}

當然，有時會更有意義地使用過濾器：drop-shadow（）而不是獲得所需的效果。

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

盒子陰影是如此強大，以至於您可以用它來創建整個插圖。我曾經開玩笑說創建一美元的CSS插圖。

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

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

我用一個發電機用單個Div創建插圖。但是阿爾瓦羅·蒙托羅（Alvaro Montoro）對此進行了一些進一步的處理，並寫了一個用盒子陰影來做的發電機。

預處理器非常有幫助

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

這是證明乾燥結構的另一個示例。這些花是用相同的標記構造的，但是每個花都有自己的索引類，用於應用範圍的CSS屬性。

第一朵花具有這些特性：

 .Flower-1 {
 -HUE：190;
 -X：0;
  -  Y：0;
  - 大小：125;
 -r：0;
}

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

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

最新的Codepen Spark中的動畫響應CSS LEIF功能！ ✨

對於那些不認識動物過境的人，萊夫是一個綠色的懶惰者，訪問了您的島嶼？

這是一個時間！ ？

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

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

就是這樣！

出去，使用以下技巧，提出自己的秘訣，分享它們，並分享您的CSS傑作！嘿，如果您有自己的建議，請也分享！這絕對是通過大量反複試驗來學到的那種東西 - 對我有用的東西可能與對您有用的東西不同，我們可以從這些不同的方法中學習

以上是有關複雜CSS插圖的建議的詳細內容。更多資訊請關注PHP中文網其他相關文章！