应用单div完成CSS 制图方式汇总

2020-10-19 19:56 jianzhan
为何只应用1个 Div?

2013年5月,我报名参加了 CSSConf,看到了Lea Verou 有关 border-radius 的演讲,你将会会觉得这个特性很不起眼。可是这个演讲让我大开见识,了解到 CSS 也有许多个人行为我是不上解的。追忆起我還是造型艺术生的那段岁月,持续地促进着我变成所选媒体的权威专家。做为1个 Web 设计方案师,CSS 是我的媒体,因而我尽我所能地学习培训,探寻它的极限。

为何仅有1个 Div?

追忆我之前学画的情况下,课堂教学上还做了混和色调的试验,大家就应用3原色,红、黄、蓝,造就出了别的色调的光谱仪。这个试验的目地是让大家掌握色调的特点,另外这类限定也让大家搞清楚了混和的能量。你自然能够买1只翠绿色的笔,可是你还可以应用蓝色和黄色把翠绿色做出来。限定你的可选项,会让你再次评定手头上已有的专用工具。

我决策刚开始1个应用CSS 美术绘画的新项目,过段時间我就会得出1个只用 CSS 绘图的新物品。以便获得更大的挑戰,探寻 CSS 的发展潜力,我给自身定了这个限定,只是用1个 Div。不可以立即买1只翠绿色的笔(加上更多的 Div),我要做的便是尽其所能地融合 CSS 特性来完成我的目地。

专用工具箱

1个 Div 再加访问器适用的那些 CSS 特性,看起来能用的专用工具太少了。可是我发现难题不在于你在应用是多少物品,而在于你怎样看待你在应用的物品。

伪元素

由于 CSS 有伪类,因此尽管仅有1个 Div,但具体上我可使用3个元素。因而,应用divdiv:beforediv:after,大家能够这样:


拷贝编码
编码以下:

div { background: red; }
div:before { background: yellow; }
div:after { background: blue; }

非常容易想起,这3个元素能够并排变成3个叠在1起的层。因而,在我的脑海中,它看起来是下面这样的:

样子

应用 CSS 和单独元素,大家能够制做3种基本图型。应用widthheight特性制做正方形/矩形框,应用border-radius制做圆/椭圆,应用border制做3角形/梯形。

大家还能够应用 CSS 建立别的图型,但是绝大多数都可以以简易组成这些基本图型来完成,这些简易的图型最非常容易制做,也最非常容易改动。

好几个同样的样子

应用叠加的box-shadow,大家能够建立好几个同样的样子,这些样子能够有着不1样的尺寸、色调和模糊不清实际效果。大家能够在x或y轴上挪动这些图型,因而基本上能够绘图无尽的图型。


拷贝编码
编码以下:

div {
box-shadow: 170px 0 10px yellow,
330px 0 0 ⑵0px blue,
330px 5px 5px ⑵0px black;
}

大家乃至能够给box-shadow加上box-shadow。留意它们声明次序。再者,把它们作为层更非常容易了解。

渐变色

渐变色根据给定1个灯源,能够被用来生产制造明暗和浓淡实际效果,可让简易扁平的图型看起来更真正。融合好几个background-image,大家可使用许多层的渐变色来完成更为繁杂光影,乃至是更多的图型。


拷贝编码
编码以下:

div {
background-image: linear-gradient(to right, gray, white, gray, black);
}
div:after {
background-image: radial-gradient(circle, yellow 50%, transparent 50%), linear-gradient(to right, blue, red);
}

视觉效果

最艰难的一部分视觉效果,即怎样拼凑这些样子变成可被认知的制图。伴随着我愈来愈重视制图的技能,发现视觉效果这1步很关键。以便保证这1点,我经常凝望这主题有关的照片,将其激光切割为好几个可视性的一部分。全是1个个样子,全是1个个色调。我把整张照片简化为1些小的带色调样子或区块,我了解(大致上)怎样应用 CSS 来完成它们。

案例

大家1起细心看看两个制图,并学习培训怎样溶解成不一样的区块,生成1个大的图型。第1个便是1支翠绿色的蜡笔。

蜡笔由两个基本图型组成:矩形框的笔身和3角形的笔尖。

我务必完成下面这些点来捕捉真正蜡笔的觉得:

纸质包装上不一样的色调包装印刷在包装上的样子和文本条纹暗示蜡笔是圆的明暗实际效果,暗示圆形的蜡笔和灯源

最先,我应用divbackground色调制做蜡笔的人体一部分,从顶部究竟部渐变色,并应用box-shadow暗示立体式感:


拷贝编码
编码以下:

div {
background: #237449;
background-image: linear-gradient(to bottom,
transparent 62%,
black(.3) 100%);
box-shadow: 2px 2px 3px black(.3);
}

随后,我应用1个从左到右的linear-gradient制做纸包装。alpha值为.6,这样的以前的渐变色能够显出来。


拷贝编码
编码以下:

div {
background-image: linear-gradient(to right,
transparent 12px,
rgba(41,237,133,.6) 12px,
rgba(41,237,133,.6) 235px,
transparent 235px);
}

接下来,我再次应用一样的方法,从左到右渐变色,制做蜡笔上的条纹。


拷贝编码
编码以下:

div {
background-image: linear-gradient(to right,
transparent 25px,
black(.6) 25px,
black(.6) 30px,
transparent 30px,
transparent 35px,
black(.6) 35px,
black(.6) 40px,
transparent 40px,
transparent 210px,
black(.6) 210px,
black(.6) 215px,
transparent 215px,
transparent 220px,
black(.6) 220px,
black(.6) 225px,
transparent 225px);
}

纸包装上包装印刷的椭圆,应用1个radial-gradient轻轻松松搞定!


拷贝编码
编码以下:

div {
background-image: radial-gradient(ellipse at top,
black(.6) 50px,
transparent 54px);
}

我刚刚独立展现了各个一部分,但是别忘了background-image看起来是这样的:


拷贝编码
编码以下:

div {
// ellipse printed on wrapper
background-image: radial-gradient(ellipse at top,
black(.6) 50px,
transparent 54px),
// printed stripes
linear-gradient(to right,
transparent 25px,
black(.6) 25px,
black(.6) 30px,
transparent 30px,
transparent 35px,
black(.6) 35px,
black(.6) 40px,
transparent 40px,
transparent 210px,
black(.6) 210px,
black(.6) 215px,
transparent 215px,
transparent 220px,
black(.6) 220px,
black(.6) 225px,
transparent 225px),
// wrapper
linear-gradient(to right,
transparent 12px,
rgba(41,237,133,.6) 12px,
rgba(41,237,133,.6) 235px,
transparent 235px),
// crayon body shading
linear-gradient(to bottom,
transparent 62%,
black(.3) 100%)
}

进行了div,大家把留意力迁移到:before伪类元素上,建立蜡笔的笔头。应用实心和全透明的边框,我制做了1个3角形,把它和我以前绘图的div放到1起。


拷贝编码
编码以下:

div:before {
height: 10px;
border-right: 48px solid #237449;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
}

比起蜡笔笔杆,笔头看起来有点平,大家可使用:after伪类元向来修补这个难题。我加上1个从顶部究竟部的linear-gradient,制做了1个反光实际效果,贯穿整只蜡笔。


拷贝编码
编码以下:

div:after {
background-image: linear-gradient(to bottom,
white(0) 12px,
white(.2) 17px,
white(.2) 19px,
white(0) 24px);
}

这给那个扁平的3角形加上更多的层级感,更为真正。制做贴近尾声,我给:after加上1些文本,精准定位,使得看起来好像包装印刷在蜡笔包装上的1样。


拷贝编码
编码以下:

div:after {
content: 'green';
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: black(.3);
text-align: right;
padding-right: 47px;
padding-top: 17px;
}

大获全胜!

此外1个案例

蜡笔做为1个非常好的事例,很好地展现了怎样应用background-imagegradient来造成真正的实际效果。下面这个事例将展现好几个box-shadow的强劲的地方:单div的拍照机。

这是拍照机的行为主体一部分,应用background-imageborder-image制做的。

下面是1张 gif,展现:before伪类元素(黑色的那个矩形框),和应用它的box-shadow建立出来的许多拍照机的细节一部分。


拷贝编码
编码以下:

div:before {
background: #333;
box-shadow: 0 0 0 2px #eee,
⑴px ⑴px 1px 3px #333,
⑼5px 6px 0 0 #ccc,
30px 3px 0 12px #ccc,
⑴8px 37px 0 46px #ccc,
⑼6px ⑹px 0 ⑹px #555,
⑼6px ⑼px 0 ⑹px #ddd,
⑴55px ⑴0px 1px 3px #888,
⑴65px ⑴0px 1px 3px #999,
⑴70px ⑴0px 1px 3px #666,
⑴62px ⑻px 0 5px #555,
85px ⑷px 1px ⑶px #ccc,
79px ⑷px 1px ⑶px #888,
82px 1px 0 ⑷px #555;
}

相近的,下面是:after(灰色的圆)和应用它的box-shadow制做的几个细节一部分。


拷贝编码
编码以下:

div:after {
background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
border-radius: 50%;
box-shadow: 0 3px 2px #999,
1px ⑵px 0 white,
⑴px ⑶px 2px #555,
0 0 0 15px #c2c2c2,
0 ⑵px 0 15px white,
⑵px ⑸px 1px 17px #666,
0 10px 10px 15px black(.3),
⑼0px ⑸1px 1px ⑷3px #aaa,
⑼0px ⑸0px 1px ⑷0px #888,
⑼0px ⑸1px 0 ⑶4px #ccc,
⑼0px ⑸0px 0 ⑶0px #aaa,
⑼0px ⑷8px 1px ⑵8px black(.2),
⑴24px ⑺3px 1px ⑷8px #eee,
⑴25px ⑺2px 0 ⑷6px #666,
⑻5px ⑺3px 1px ⑷8px #eee,
⑻6px ⑺2px 0 ⑷6px #666,
42px ⑻2px 1px ⑷8px #eee,
41px ⑻1px 0 ⑷6px #777,
67px ⑺3px 1px ⑷8px #eee,
66px ⑺2px 0 ⑷6px #666,
⑷6px ⑻6px 1px ⑷5px #444,
⑷4px ⑻7px 0 ⑶8px #333,
⑷4px ⑻6px 0 ⑶7px #ccc,
⑷4px ⑻5px 0 ⑶4px #999,
14px ⑻9px 1px ⑷8px #eee,
12px ⑻4px 1px ⑷8px #999,
23px ⑻5px 0 ⑷7px #444,
23px ⑻7px 0 ⑷6px #888;
}

有点瘋狂?但是你看到了吧, 好几个box-shadow的确能够给应用单独div制图加上许多细节一部分。

最大的挑戰

我碰到了两个最大的挑戰,3角形的限定和gradient与众不同的个人行为。

3角形的难题

由于3角形是应用border建立的,这巨大地限定了我对它的运用。应用border-imageborder加上gradient,不可以独立加上在其中1边。没法给border建立出来的3角形加上box-shadow,由于box-shadow是加上在盒实体模型上的。因而要建立好几个3角形就会很艰难。看起来便是下面这样:


拷贝编码
编码以下:

div {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid red;
}
div:before {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid red;
border-image: linear-gradient(to right, red, blue);
}
div:after {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid red;
box-shadow: 5px 5px 5px gray;
}

多层渐变色

渐变色的个人行为便是会铺满全部background。在层叠好几个gradient的情况下就显得很讲技能。必须花销附加的時间思索全透明度、z-index这些事,还要弄清楚甚么要可见,甚么不必。但是若能合理地应用gradient,大家的制图能够包括许多让人惊叹的细节。

Tardis 便是1个很好的事例,显示信息或掩藏渐变色,建立了1张细节极强的照片。下图显示信息的是绘图的正中间全过程,能够看到数个从顶部究竟部的渐变色,宽度铺满全部器皿。

应用从左到右和从右到左的gradient,我能够遮挡住1一部分渐变色,另外把别的一部分渐变色显示信息出来。

最后的結果看上去包括了许多图型来组成 Tardis 的前面,但具体上它便是堆叠的linear-gradient。许多情况下迫不得已仿冒呀。

动态性地查询它们

源于这个新项目,有1个十分酷十分有效的好物品忽然出現,那便是 Rafael Carício(@rafaelcaricio) 开发设计的名为CSS Gradient Inspector的 Chrome 访问器软件。这个开发设计专用工具能够检测且能够电源开关元素上的每个 gradient,看起来就像电源开关1个个层。(它在平常新项目中也十分有效。)

我期待设计方案师和开发设计者应用动漫或 JavaScript 的作用来做相近的尝试,或对这些美术绘画做1些形变。你能够到http://div.justjavac.com或GitHub上盘玩1下这些 CSS。