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