[譯]我是如何開始製做CSS圖片的

時間 2019-11-07

標籤如何開始製做 css 圖片欄目 CSS 简体版

原文原文鏈接

CSS Girl
我受到了圖形、視覺設計和可愛東西的啓發，可是我卻在手繪上沒有天賦。我喜歡看其餘設計師在 Dribbble 上展現的插圖，並羨慕他們能夠繪製那麼可愛和複雜的插圖，很是的誘人。
css

故事時間開始，不過，這篇文章可能會讓你餓哦。canvas

我瀏覽了 Codepen ，探索了不少有趣的動畫，看到許多神奇的畫筆能夠給人的視覺帶來享受，這使得我想創造美麗的東西。app

我研究了一些開發者如何使用畫布繪製出酷炫、複雜的形狀，我決定嘗試使用 canvas。由於 canva s在很大程度上依賴數學和 JavaScript，我掙扎於使用它。相比數學媒介，我更想集中注意力於做品的視覺效果。至少如今，我不想依賴canvas。佈局

接下來是 Codevember 挑戰——在11月份練習的編碼內容。第1天和第2天是粗略的，由於我還在學習如何瀏覽全部的在線資源。學習

第3天，我決定畫一個全屏的 Pikachu 的臉。Pokemon GO 確實是一個挺不錯的軟件，當時的我是很是喜歡 Pikachu 的，Annnd 也是由於它很是易於操做，只由圓和CSS邊框半徑組成。我添加了一下 HTML5 audio 元素，使它更加的聰明。對於結果我很是的滿意，這是推進歐文繼續努力，更深刻地瞭解CSS的動力。
動畫

在 Codevember 的第8天，我可以完成下圖的電池充電筆，這須要一下 jQuery/JS。我天天都努力工做，經過建立新的東西來練習我以前研究的特徵。
網站

我開始探索 Dribbble 的平面設計，想知道我如何使用 CSS 來製做這些平面圖像？是的，這就是個人下一個挑戰。編碼

在 Codevember 的第14天，我藉助 JavaScript 作了一個簡單的杯子與咖啡，而且你能夠選擇不一樣的口味：美式咖啡、拿鐵咖啡、卡布奇諾或水（咖啡因的多樣性）。
spa

在 Codevember 的第21天，我嘗試運用 CSS animations 和一些基本的CSS形狀，如矩形和原形，作出這個咖啡杯和顯示屏。顯然我意識到，許多開發者喜歡分享我對咖啡的熱愛。
設計

在 Codevember 的第25天，我仍然在使用大量的 CSS circles 在個人圖紙上，以下圖的早餐主題繪圖。可是時候冒險進入更復雜的形狀領域了。

在 Codevember 的第28天，我決定探索新的 CSS 形狀，如星星和三角形。我作了一棵數字聖誕樹來補充我新家的那棵真的聖誕樹，這使我很快樂。

在 Codevember 的最後幾天，我真的很喜歡製做這些很棒的、很可愛的 CSS 圖像，我想挑戰本身，運用 CSS 製做更復雜的圖像，如運用 box-shadow 屬性建立圖像等。我真的很喜歡與其餘開發者一塊兒創建一致性和問責制的這個活動。

因此我在 Michael Mangialardi 上報名參加了每日CSS圖像挑戰。天天咱們都獲得一個話題或主題，只能使用 CSS 來講明它。這個挑戰給了我天天繼續建立圖像的組織性和一致性，它還幫助我創造性地思考如何用新的思惟去表達本身，同時瞭解到更多的 CSS 技巧——咱們可能永遠不會再網頁中使用的技巧。

下面來展現個人一些做品

Day 1: Cub

第一個挑戰比較簡單，運用 CSS 的一些基本形狀，如圓，作一個熊幼崽。不過我喜歡製做可愛的東西，因此我給它一個安撫奶嘴，那樣它就不會常常哭了。

Day 2: Elephant

哦，我如何畫大象的軀幹？我查找參考了一些 CSS 技巧後，嘗試玩不一樣的 CSS 形狀。通過數小時的研究後，我作出了這件做品。

Day 3: Beaver

PBJ?我沒法想象海狸是什麼樣的。我花了一些時間來把海狸畫出來，我在線搜索海狸的圖像，並結合多個資源啓發的靈感，把它們組合在一塊兒。海狸正在找工做，使用我給它一個領帶，這會是一個好的點綴。

Day 4: Tiger

Rawr！再次運用一些簡單的形狀和 border-radius ，我作了一隻條紋虎。個人靈感來自於文本和網頁佈局在平面設計風格中的表現，因此我讓老虎讀一個報紙，及時瞭解當前最新的事件。

Day 5: Favorite Animated Animal

Mike Wazowski！太棒了！我是 Pixar 的超級粉絲。我使用了更多的CSS技巧來作 Pixar 的觡和嘴。僞類選擇器：:before 和 :after 在只用一個 DIV 製做複合形狀的時候很是有用。

Day 6: Clock

一個簡單的時鐘——Tick tock。我欺騙性地使用了一些 JavaScript 製做它，由於我想時鐘可以表示實際的當前時間。我運用 vanilla JavaScript 去獲取當前時間，並使用 setInterval function 來控制時針、分針、秒針的角度變化。

Day 7: Ruler

我再次欺騙性地使用了 JavaScript ，主要用於製做標尺的 cm lines。可是很快你就會知道，能夠簡單地運用 box-shadow 屬性來製做這些 lines 。

Day 8: Notepad

此次使用了更多的 JavaScript，用於生成記事本的孔和環，而且使用了SVG製做封面的笑臉。我熟悉 CSS，剛開始使用 SASS，我之前並不知道 SASS 有多麼的強大，直到有人在 Codepen 上 fork 了個人一個筆記而且使用SASS改寫了它。我很是的驚訝，而且知道SASS會是個人下一個挑戰。

Day 9: Calendar

我偶然發現了 Lynn Fisher 的 a.singlediv.com 網站，她只用一個 DIV 作出了不少很是棒的圖像。受她的啓發，我一直嘗試用一個單獨的 DIV 製做個人圖像的每個形狀。它激勵我如今使用一個的 DIV 去挑戰圖像。

Day 10: Pencil Jar

被SASS在CSS上的應用所啓發，這張筆的圖片是使用 SASS @each function 生成的。

Day 11: Pizza

我是一個吃貨，因此把我所愛的食物用CSS創做成圖像，只是一個時間問題。當 pizza 成爲下一個挑戰主題時，個人機會來了。只須要一些簡單的形狀，如圓形和三角形，你就能製做一片 pizza。在奶酪融化那裏，我使用了一些 CSS animation。我但願烹飪也是如此的容易。

Day 12: Hamburger

我學習了 background-image 的徑向漸變，以及如何去使用它，我用它來製做 Hamburger 頂部包子的芝麻種子，用少許空間來保持成分分開，從而突出 Hamburger 的每一個元素。這個挑戰真的讓我餓了。

Day 13: Taco

我再次使用徑向漸變來在 taco 上作出漸變，我也在 YouTube 上開始了個人課程，主要與他人分享個人編碼經驗。

Day 14: Cheesecake

我真的很喜歡這個主題。我學習了rotateX —— 能夠在X軸上選擇一個圖形，固然你也可使用 rotateY 和 rotateZ。我使用這個屬性用於選擇 Cheesecake 的頂層。

Day 15: Pumpkin Pie

這個 Pumpkin Pie 使用了簡單的 CSS 形狀和 box-shadow 屬性（主要用於製做陰影）。爲了作餡餅皮，我用了三個正方形，並將它們旋轉到不一樣的角度，
用border-radius是尖銳的角變成圓角。寫到這裏我餓了，你呢？

Day 16: Frankenstein

我不是恐怖主義者的粉絲，但我須要克服個人恐懼，爲了可以保持挑戰性。如今，我漸漸習慣結合許多簡單的形狀來表達我想繪畫的圖像。我專一於使用平面設計的風格把恐怖的東西繪製成可愛的表情。

Day 17: Zombie

很難使 Zombies 變得可愛，因此我把他埋在一些美味的蛋糕裏面，不過我並不以爲它喜歡被埋在甜蜜裏面。

Day 18: Vampire

我想在 vampire 主題裏添加一些扭曲的成分。個人靈感來自於創口貼（烹飪是很危險的），我感受這些創可貼就是小吸血鬼，迷你 vampires IRL!我添加了滲透出血的喜劇性效果（提示：戲劇性的聲音效果）。

Day 19: Monster of choice

這對於我來講挺困難的，由於我在心底已經畫了一個怪物（Mike Wazowski）。我決定畫一個可愛的小怪物，它會一直流口水，我稱它爲Beebee。

Day 20: Superman

我打算學習如何使用CSS的一些簡單形狀繪製一我的，我在 YouTube 上觀看了tutorial for Adobe Illustrator，學習如何用簡單的形狀繪製人。這是我踏出的第一步，緊接着情人節到了，我想幫助Mr. Kent謀劃一個約會。以爲合適的女士請點擊 https://codepen.io/sashatran/...