我的CSS學習之旅
原文鏈接：https://blog.prototypr.io/how-i-started-drawing-css-images-3fd878675c89
作者：Sasha
我開始在Dribbble上探索平面設計，同時我想知道我是否可以用CSS製作這些平面圖像？ 我意識到我可以，我覺得那將是我的下一個挑戰。在Codevember的第14天，我使用了一點JavaScript製作了一杯簡單的咖啡，在網頁中，您可以在不同的版本之間選擇：Americano，Latte，Cappucino或Water（多樣咖啡）。
CSS Girl
我受到了圖像，視覺設計，和一些非常可愛的東西的啟發。但不幸的是，我沒有用手繪畫的天賦。我很喜歡在Dribble(國外知名平面設計網站http://www.dribble.com）上看其他設計者的插圖作品，我十分羨慕他們，因為他們可以畫出非常可愛和錯綜複雜的插圖，同時這些東西把我帶到設計這條路上。
第一張繪畫作品在Paper app
現在是故事時間，下面的故事將會讓你覺得飢餓。
我正在Codepen上面探索有趣的動畫效果。看到很多漂亮的作品讓我也想去創造一些同樣漂亮的東西。
我研究了一些開發人員如何使用畫布繪製出酷炫，複雜的形狀。 我決定也試一試。 我一直在用canvas來掙扎，因為它很大程度上依賴於數學和JavaScript。 我想專註於視覺效果而不是數學密集型媒體。 不學Canvas（至少現在不學）。
然後我發現了Codevember的挑戰，這裡你每天都在必須進行編碼的練習。
我開始了挑戰，第一天和第二天很艱難，因為我還在學習如何在網上瀏覽所有可用的資源。
第三天，我決定畫一個很大的皮卡丘臉。 Pokemon GO仍然是對我非常難道的事情，我絕對喜歡皮卡丘。 同也是因為它非常簡單，只有圓圈和CSS border-radius組成。 我添加了一些HTML5音頻元素，使其更加可愛。 我對結果感到非常高興。 這促使我繼續努力學習更多關於CSS的知識。
在Codevember的第8天的時候，我能夠繪製出需要一些jQuery / JS的電池。 我每天花許多的時間，通過創造新的內容來學習我學到的東西。
我開始在Dribbble上探索平面設計，同時我想知道我是否可以用CSS製作這些平面圖像？ 我意識到我可以，我覺得那將是我的下一個挑戰。
在Codevember的第14天，我使用了一點JavaScript製作了一杯簡單的咖啡，在網頁中，您可以在不同的版本之間選擇：Americano，Latte，Cappucino或Water。
在Codevember的第21天，我實習了部分CSS動畫，並使用矩形和圓形等基本CSS形狀來製作這個屏幕和咖啡杯。顯然我意識到很多開發人員都感受到了我對咖啡的熱愛！
在Codevember的第二十五天，在我的這些以早餐主題圖畫中，仍然在使用很多CSS circles。我覺得現在是讓冒險進入更複雜形狀領域的時候了。
在Codevember的第28天，我決定探索新的CSS形狀，比如星星和三角形。我創作了一顆聖誕樹，並用這顆聖誕樹代替了我家要買的真正的聖誕樹。
在Codevember的最後，我真的很喜歡製作這些漂亮可愛的CSS圖像，我想挑戰更多複雜的東西。同時，我遇到了很多其他的開發人員，他們和我一起完成了這些任務。
接著我註冊了所以我就註冊了Michael Mangialardi的「每日CSS圖像挑戰賽」(Daily CSS Images Challenge)。 每一天我們都有了一個話題或主題，而我們被挑戰只用CSS來說明。 這一挑戰給了我每天提供繼續創作內容的靈感。 同時還幫助我鍛煉了創造性地思考新的表達方式，並學習網頁設計中的一些CSS技巧。
Day 1: Cub
第一個挑戰非常簡單，你可以製作一個像圓圈一樣的基本形狀的小熊。 但我喜歡製作可愛的東西，我給了它一個奶嘴，所以它看起來不會太誇張。Daily CSS Images 1: Bear cub with pacifier #dailycssimages
Day 2: Elephant
怎麼畫大象鼻子？ 我用CSS形狀玩遊戲，查找像CSS技巧的引用。 經過幾個小時的研究，我想出了這一塊。
Day 3: Beaver 海狸
不好意思？ 我實在無法想像海狸是怎樣的。 我花了一段時間才搞清楚。 我在網上搜索海狸圖片，並從多個來源獲取靈感，將一些東西放在一起。 海狸正在申請工作，我想支持它的搜索，所以給它一個好的措施的領帶！#dailycssimages 3: Beaver with tie
Day 4: Tiger
我又用簡單的形狀和border-radius來製造一條條紋虎。 我受到平面設計風格的文本和網頁布局的啟發，所以我讓老虎讀了一份報紙以跟上時事。#dailycssimages 4 - Tiger reading newspaper
一個簡單的時鐘。 滴答滴答。 我使用了一些JavaScript，因為我想讓時鐘表示當前的實際時間。 我使用vanilla JavaScript獲取當前時間，並使用setInterval函數來增加小時，分鐘和秒針的角度。#dailycssimages 6: ClockDay 5: Favorite Animated Animal
當然是邁克Wazowski！ 我是皮克斯的粉絲。 我嘗試了更多的CSS技巧，使角和嘴。 諸如：before和：after之類的Pseudo-selectors對於用單個div創建複合形狀非常有用。#dailycssimages 5: Mike Wazowski
Day 6: Clock
一個簡單的時鐘。 滴答滴答。 我使用了一些JavaScript，因為我想讓時鐘表示當前的實際時間。 我使用vanilla JavaScript獲取當前時間，並使用setInterval函數來增加小時，分鐘和秒針的角度。#dailycssimages 6: Clock
Day 7: Ruler
我再一次使用了JavaScript，用JavaScript來製作標尺的厘米線，但很快就知道你實際上可以用box-shadow屬性來製作這些線條。#dailycssimages 7: Ruler
Day 8: Notepad
使用更多的Javascript，我產生記事本的環，洞，並使用SVG畫臉。 這時候，我對CSS有了很多的了解，但是我還是剛剛開始使用SASS，並沒有意識到SASS會給我一個真正的力量，直到有人真的把我的鋼筆釘在Codepen上，然後用SASS重建它。 那時我決定了。 SASS是我的下一個挑戰。#dailycssimages 8: Notepad
Day 9: Calendar
我偶然發現了的一個叫http://a.singlediv.com的網站，上面的一個人Lynn Fisher，她用一個div製作了非常好的CSS圖像。 直到這一點，我已經為我的圖像中的每個形狀創建單獨的div元素。 它激勵我把今天的挑戰作為一個單獨的一個。#dailycssimages 9: Single Div Calendar
Day 10: Pencil Jar
我的CSS中使用更多的SASS。 鉛筆圖像是使用SASS @each函數生成的。#dailycssimages 10: Pencil Jar
Day 11: Pizza
我是一個美食愛好者。 所以，遲早我會把我對食物的熱愛引入到我創造的圖像中，那只是時間問題。 披薩成為下一個挑戰的時候，我得到了這個機會！ 只需簡單的形狀，如圓形和三角形，就可以製作披薩片！ 我還添加了融化乳酪的CSS動畫。 烹飪會更容易。#dailycssimages 11: Pizza
Day 12: Hamburger
我了解了背景圖像的徑向漸變，以及如何操縱它！ 我用它做頂麵包上的芝麻。 保持由少量空間分隔的配料突出漢堡的每個元素。 這個挑戰讓我真的餓了！#dailycssimages 12: Hamburger
Day 13: Taco
我再次使用徑向漸變來製作塔科上的漸變，我還開始了一個YouTube頻道，與其他人分享我的編碼體驗。#dailycssimages 13: Taco
Day 14: Cheesecake
我真的很喜歡這個作品。 我學習了rotateX，你可以在X軸上旋轉一個形狀！ 你也可以用rotateY和rotateZ做。 我用這個屬性來旋轉芝士蛋糕的頂層。#dailycssimages 14: Cheesecake
Day 15: Pumpkin Pie
這個有簡單的CSS形狀和盒子陰影來創建陰影。 為了製作餡餅外殼，我使用了三個正方形，並將它們旋轉到不同的角度，用邊界半徑四捨五入。 我正在餓著寫這個，你呢？#dailycssimages 15: Pumpkin Pie
Day 16: Frankenstein
我喜歡恐怖，但為了保持挑戰，我需要克服恐懼。 到現在為止，我已經習慣了將許多簡單的形狀結合起來，以表達我想要畫的東西。 我專註於使用平面設計風格將可怕的東西變成更可愛的表現形式。#dailycssimages 16: Frankenstein
Day 17: Zombie
殭屍難以製作的可愛，所以我用一些美味的蛋糕覆蓋它。 我不認為它喜歡被埋在蛋糕裡面！#dailycssimages Day 17: Zombie Cake
Day 18: Vampire
我想把吸血鬼的主題曲折一下。 我從一個帶有創意的手提包中得到了一些啟發（做飯非常危險）。 我想到這些芭比娃娃是個小吸血鬼。 迷你吸血鬼IRL！ 我添加了滲血，以產生戲劇效果（提示：戲劇性的聲音效果）。#dailycssimages Day 18: Vampire
Day 19: Monster of choice
這對我來說很艱難，因為我已經畫出了我選擇的怪物（Mike Wazowski）。 我決定創造我自己可愛的小怪獸，不能停止流口水。 我叫他Beebee。#dailycssimages Day 19: Monster
更進一步
我從日常的CSS挑戰中休息一下，因為有來自我喜愛的其他藝術家的靈感。 我跟隨的超級天才設計師之一是斯科特·圖斯克（Scott Tusk）。 我編寫了Tusk先生的一個商店插圖的CSS版本。
我跟著另外一個圖斯克先生的傑作。 平面設計的桌子。 這些作品是錯綜複雜的小細節，是如此令人滿意的捕捉。 它在這些微妙的細節，使圖像真正獨特
我學到了什麼
即使我沒有手繪插圖的天賦，也可以通過其他媒介來表達自己。 我發現媒體在HTML和CSS。 為了達到一個可以創作出漂亮藝術品的地步，我把注意力集中在兩個方面：基礎知識和一致性。 使用基本的CSS形狀，如矩形和像border-radius這樣的基本屬性，為我提供了肌肉記憶，以進一步複雜的插圖。
關於CSS的知識還有很多，這只是漫長旅程的開始，我將繼續獲得靈感。 希望我能啟發他人開始他們的旅程。
待續...
作者鏈接: Twitter | YouTube | Codepen
迷茫的時候看看文章！
翻譯不到位的地方可以指出，有任何問題可在評論處發言。
推薦閱讀：