CSS Girl
我受到了图形、视觉设计和可爱东西的启发，但是我却在手绘上没有天赋。我喜欢看其他设计师在 Dribbble 上展示的插图，并羡慕他们可以绘制那么可爱和复杂的插图，非常的诱人。
<div align="center">
<img src="https://cdn-images-1.medium.c...*c0UpVtkpkJA3RUByOlwYLA.png">
</div>

故事时间开始，不过，这篇文章可能会让你饿哦。

我浏览了 Codepen ，探索了很多有趣的动画，看到许多神奇的画笔可以给人的视觉带来享受，这使得我想创造美丽的东西。

我研究了一些开发者如何使用画布绘制出酷炫、复杂的形状，我决定尝试使用 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 做了一个简单的杯子与咖啡，并且你可以选择不同的口味：美式咖啡、拿铁咖啡、卡布奇诺或水（咖啡因的多样性）。

在 Codevember 的第21天，我尝试运用 CSS animations 和一些基本的CSS形状，如矩形和原形，做出这个咖啡杯和显示屏。显然我意识到，许多开发者喜欢分享我对咖啡的热爱。
monitor and coffee cup

在 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。我希望烹饪也是如此的容易。