CSSGirl我的灵感来自图形、视觉设计和可爱的东西，但我在手绘方面没有天赋。我喜欢在Dribbble上看到其他设计师的插画，羡慕他们能做出可爱又精致的插画，太诱人了。故事时间开始了，但这篇文章可能会让你饿了。我浏览了Codepen，探索了很多有趣的动画，看到了很多可以带来视觉愉悦的神奇笔刷，这让我想要创造美好的东西。在研究了一些开发人员如何使用canvas绘制酷炫、复杂的形状后，我决定尝试一下canvas。由于canvas严重依赖数学和javascript，因此我在这方面苦苦挣扎。我想关注作品的视觉效果，而不是数学媒介。至少现在，我不想依赖画布。接下来是Codevember挑战-编码内容以在11月练习。第1天和第2天很艰难，因为我仍在学习如何浏览所有在线资源。第三天，我决定画一张全屏皮卡丘的脸。PokemonGO确实是一款非常不错的软件。当时很喜欢皮卡丘，Annnd也是因为操作起来非常简单，而且只有圆圈和CSS边框半径组成。我添加了HTML5音频元素以使其更加智能。我对结果非常满意，这也是Owen继续努力加深对CSS理解的动力。在Codevember的第8天，我完成了下图所示的电池充电笔，这需要一点jQuery/JS。我每天都在努力工作，通过创造一些新东西来练习我以前研究过的功能。我开始探索Dribbble的平面设计，想知道如何使用CSS制作这些平面图像？是的，这是我的下一个挑战。在Codevember的第14天，我在JavaScript的帮助下制作了一个简单的咖啡杯，你可以选择不同的口味：美式咖啡、拿铁咖啡、卡布奇诺咖啡或水（各种咖啡因）。在Codevember的第21天，我尝试使用CSS动画和一些基本的CSS形状（如矩形和基元）制作这个咖啡杯和展示。显然，我意识到许多开发人员喜欢分享我对咖啡的热爱。在Codevember的第25天，我还在我的画中使用了很多CSS圆圈，就像下面的早餐主题画一样。但现在是冒险进入更复杂形状领域的时候了。在代码十一月的第28天，我决定探索新的CSS形状，例如星形和三角形。我制作了一棵数字圣诞树来补充我新家里的真实圣诞树，这让我很开心。在Codevember的最后几天，我非常喜欢制作这些很棒、可爱的CSS图片，我想挑战自己用CSS制作更复杂的图片，比如使用box-shadow属性创建图片等。我真的很喜欢这个活动与其他开发人员建立一致性和问责制。所以我报名参加了MichaelMangialardi的每日CSS图像挑战赛。每天我们得到一个主题或主题，只能使用CSS来说明它。这个挑战给了我每天继续创作图像的组织性和一致性，它也帮助我创造性地思考如何以新的方式表达自己，同时学习更多的CSS技巧——我们在网络上可能从未使用过的技巧。让我展示一下我的一些作品Day1:Cub第一个挑战比较简单，使用一些基本的CSS形状，比如圆形，来制作一只小熊。不过我喜欢做可爱的东西，所以我给了他一个奶嘴，这样他就不会经常哭了。第二天：大象哦，大象的鼻子怎么画？在查找了一些CSS技巧后，我尝试使用不同的CSS形状。经过数小时的研究，我制作了这篇文章。第3天：BeaverPBJ？我无法想象海狸是什么样子的。画海狸花了我一些时间，我在网上搜索了海狸的图片，并结合了多种来源的灵感，将它们组合在一起。海狸正在找工作，让我给它打个领带，那会很贴心。第4天：老虎肉！再次使用一些简单的形状和border-radius，我做了一只条纹老虎。我的灵感来自文本和网页布局在平面设计风格中的样子，所以我让Tiger阅读报纸并了解时事。第5天：最喜欢的动画动物MikeWazowski！奇妙！我是皮克斯的忠实粉丝。我为Pixar的下巴和嘴巴使用了更多CSS技巧。伪类选择器：:before和:after在制作只有一个DIV的复合形状时很有用。第6天：时钟一个简单的时钟-滴答。我欺骗了一些JavaScript来制作它，因为我希望时钟代表实际的当前时间。我使用vanillaJavaScript获取当前时间，并使用setInterval函数来控制时针、分针和秒针的角度变化。Day7:Ruler又骗人用了JavaScript，主要是做尺子的厘米线。但是你很快就会看到，这些线条可以简单地通过使用box-shadow属性来制作。Day8:Notepad这次使用了更多的JavaScript来生成记事本的孔和循环，并使用SVG制作封面上的笑脸。我熟悉CSS，刚开始使用SASS，直到有人将我在Codepen上的一篇笔记fork并使用SASS重写，我才知道SASS有多强大。我感到非常惊讶，并且知道SASS将是我的下一个挑战。第9天：日历我偶然发现了LynnFisher的a.singlediv.com网站，她只用一个DIV就制作了很多非常酷的图像。受她的启发，我一直在尝试让我的图像的每个形状成为一个单独的DIV。它启发了我现在使用DIV来挑战图像。Day10:PencilJar受到SASS在CSS上应用的启发，这张笔的图片是用SASS的@each函数生成的。第11天：披萨我是一个美食家，所以我用CSS创建我最喜欢的食物的图像只是时间问题。当披萨成为下一个挑战的主题时，我的机会来了。只需几个简单的形状，如圆形和三角形，您就可以制作一片披萨。在奶酪融化的地方，我使用了一些CSS动画。我希望做饭也这么简单。Day12:Hamburger我了解了背景图像径向渐变以及如何使用它，我用它来制作汉堡包的芝麻，用少量空间将成分分开，从而突出每个元素汉堡包。这个挑战真的让我很饿。Day13:Taco我又用了radialgradients来做taco上的渐变，我也在YouTube上开始了我的课程，主要是和大家分享我的编码经验。Day14:Cheesecake我真的很喜欢这个主题。我了解了rotateX——你可以在X轴上选择一个图形，当然你也可以使用rotateY和rotateZ。我使用此属性来选择芝士蛋糕的顶层。第15天：南瓜派这个南瓜派使用简单的CSS形状和box-shadow属性（主要用于制作阴影）。对于馅饼皮，我取了三个正方形并将它们旋转到不同的角度，使用border-radius使尖角变圆。我写这篇文章的时候很饿，你呢？第16天：弗兰肯斯坦我不喜欢恐怖分子，但我需要克服恐惧才能继续挑战。现在，我已经习惯了组合许多简单的形状来表达我想要描绘的形象。我专注于使用平面设计风格将可怕的事物绘制成可爱的表情。第17天：僵尸很难让僵尸变得可爱，所以我把他埋在一些美味的蛋糕里，但我认为他不喜欢被埋在糖果里。第18天：吸血鬼我想为吸血鬼主题添加一些扭曲。我受到创可贴的启发（做饭很危险），我觉得这些创可贴是小吸血鬼，迷你吸血鬼IRL！我添加了渗血的喜剧效果（提示：戏剧性的音效）。第19天：选择怪物这对我来说很难，因为我已经在脑海中画了一个怪物（MikeWazowski）。我决定画一个一直流口水的可爱小怪物，我给它起名叫Beebee。第20天：超人我将学习如何使用CSS使用一些简单的形状来绘制一个人，我在YouTube上观看了Adob??eIllustrator的教程，以学习如何使用简单的形状绘制一个人。这是我迈出的第一步，然后情人节到了，我想帮肯特先生安排一次约会。喜欢它的女士请点击https://codepen.io/sashatran/...离开Codepen上的每日CSS挑战CSS商店受到许多开发人员对每日CSS挑战的启发，我暂时离开。跟随uber天才设计师ScottTusk，用CSS画了一张Tusk先生设计的超市插画，并更新了在线编码。CSSOfficeSpace我继续介绍图斯克先生的另一件杰作——平面设计师的办公桌。这件作品有复杂的小细节，这是一个令人满意的奖励。正是这些微小的细节使图像如此独特。我学到了什么虽然我没有太多的绘画天赋，但我可以通过其他方式表达自己，那就是通过HTML和CSS。为了达到创作可爱艺术品的水平，我专注于两件事：基础知识和合理性。频繁使用基本的CSS形状（例如矩形）和基本属性（例如border-radius）可以让我创建更复杂的插图。关于CSS我还有很多要学，这只是一个漫长旅程的开始，我会不断吸收不同的灵感。希望我能激励更多的人开始他们自己的旅程。未完待续……感谢您花时间阅读我的旅程，如果您认为本文可以帮助或启发某人，请分享并给我一个赞，谢谢！原文链接我是如何开始绘制CSS图像的
