我的CSS学习之旅
时间：2023-07-21 15:48:01 | 来源：网站运营
时间：2023-07-21 15:48:01 来源：网站运营
我的CSS学习之旅：
原文链接：https://blog.prototypr.io/how-i-started-drawing-css-images-3fd878675c89
作者：Sasha
我开始在Dribbble上探索平面设计，同时我想知道我是否可以用CSS制作这些平面图像？ 我意识到我可以，我觉得那将是我的下一个挑战。在Codevember的第14天，我使用了一点JavaScript制作了一杯简单的咖啡，在网页中，您可以在不同的版本之间选择：Americano，Latte，Cappucino或Water（多样咖啡）。
我受到了图像，视觉设计，和一些非常可爱的东西的启发。但不幸的是，我没有用手绘画的天赋。我很喜欢在Dribble(国外知名平面设计网站
http://www.dribble.com）上看其他设计者的插图作品，我十分羡慕他们，因为他们可以画出非常可爱和错综复杂的插图，同时这些东西把我带到设计这条路上。
第一张绘画作品在Paper app
现在是故事时间，下面的故事将会让你觉得饥饿。
我正在Codepen上面探索有趣的动画效果。看到很多漂亮的作品让我也想去创造一些同样漂亮的东西。
我研究了一些开发人员如何使用画布绘制出酷炫，复杂的形状。 我决定也试一试。 我一直在用canvas来挣扎，因为它很大程度上依赖于数学和JavaScript。 我想专注于视觉效果而不是数学密集型媒体。 不学Canvas（至少现在不学）。
然后我发现了Codevember的挑战，这里你每天都在必须进行编码的练习。
我开始了挑战，
第一天和第二天很艰难，因为我还在学习如何在网上浏览所有可用的资源。
第三天，我决定画一个很大的皮卡丘脸。 Pokemon GO仍然是对我非常难道的事情，我绝对喜欢皮卡丘。 同也是因为它非常简单，只有圆圈和CSS border-radius组成。 我添加了一些HTML5音频元素，使其更加可爱。 我对结果感到非常高兴。 这促使我继续努力学习更多关于CSS的知识。
皮卡丘 Pikachu在Codevember的第8天的时候，我能够绘制出需要一些jQuery / JS的电池。 我每天花许多的时间，通过创造新的内容来学习我学到的东西。
电池 Battery Charging我开始在Dribbble上探索平面设计，同时我想知道我是否可以用CSS制作这些平面图像？ 我意识到我可以，我觉得那将是我的下一个挑战。
在Codevember的第14天，我使用了一点JavaScript制作了一杯简单的咖啡，在网页中，您可以在不同的版本之间选择：Americano，Latte，Cappucino或Water。
咖啡杯 Coffee Cup在Codevember的第21天，我实习了部分CSS动画，并使用矩形和圆形等基本CSS形状来制作这个屏幕和咖啡杯。显然我意识到很多开发人员都感受到了我对咖啡的热爱！
http://codepen.io/sashatran/full/BQWNRe在Codevember的第二十五天，在我的这些以早餐主题图画中，仍然在使用很多CSS circles。我觉得现在是让冒险进入更复杂形状领域的时候了。
鸡蛋和平底锅 Egg and Pan在Codevember的第28天，我决定探索新的CSS形状，比如星星和三角形。我创作了一颗圣诞树，并用这颗圣诞树代替了我家要买的真正的圣诞树。
圣诞树 Christmas Tree在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: Clock
Day 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版本。
CSS商店 CSS shop我跟着另外一个图斯克先生的杰作。 平面设计的桌子。 这些作品是错综复杂的小细节，是如此令人满意的捕捉。 它在这些微妙的细节，使图像真正独特
CSS办公室 CSS Office我学到了什么即使我没有手绘插图的天赋，也可以通过其他媒介来表达自己。 我发现媒体在HTML和CSS。 为了达到一个可以创作出漂亮艺术品的地步，我把注意力集中在两个方面：基础知识和一致性。 使用基本的CSS形状，如矩形和像border-radius这样的基本属性，为我提供了肌肉记忆，以进一步复杂的插图。
关于CSS的知识还有很多，这只是漫长旅程的开始，我将继续获得灵感。 希望我能启发他人开始他们的旅程。
待续...
作者链接: Twitter | YouTube | Codepen
迷茫的时候看看文章！
翻译不到位的地方可以指出，有任何问题可在评论处发言。
在线咨询
