设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:首页 > 网页设计 > CSS > 正文

我是如何开始制作CSS图片的

时间:2017-03-10 17:01 来源:本站整理 作者:SecYe安全 阅读:

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

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%
上一篇:让CSS更完美:PostCSS-modules
下一篇:没有了