Image placeholder

纯css代码绘制个性英文字母和图标

Image placeholder
F2EX 2016-07-31

uedcsslogo

使用css以及css3的一些特性可以快速绘制出英文字母,甚至是个性的组合图案。

ued CSS部分:

/*u*/
.u{ position:relative; top:0; left:0; width:36px; height:36px; border-width:12px; border-color:#4CA3DF; border-style:solid; border-radius:50%;}
.u:before{ position:absolute; content:''; bottom:30px; background-color:#34495e; width:36px; height:36px; border-radius: 50%; }
.u .c1, .u .c2 { background-color: #4ca3df; border-radius: 50%; width: 12px; height: 12px; left: -1px; position: absolute; top: -8px; }
.u .c2 {left:auto; right:-1px;}
/*e*/
.e {position:relative; top:0; left:0; width:36px; height:36px; border-width:12px; border-color:#EA6154; border-style:solid; border-radius:50%; -webkit-transform: rotate(95deg); transform: rotate(95deg);}
.e:before{ position:absolute; content:''; bottom:25px; background-color:#34495e; width:60px; height:50px; border-radius: 50%; left:-12px; }
.e .c1, .e .c2 { background-color: #EA6154; border-radius: 50%; width: 12px; height: 12px; left: -7px; position: absolute; top: -3px; }
.e .c2 {left:auto; right:-7px;}
.e .c3 {position: absolute; width: 12px; height: 35px; background-color: #EA6154; left: 3px; top:-7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-radius: 10px 20px 0 0;}
.e .c3 .c3-1, .e .c3 .c3-2 { background-color: #EA6154; border-radius: 50%; width: 12px; height: 12px; left: 0; position: absolute; top: -1px; }
.e .c3 .c3-2 {left:auto; right: 0; top:28px;}
/*d*/
.d {position:relative; top:0; left:0; width:36px; height:36px; border-width:12px; border-color:#F4A62C; border-style:solid; border-radius:50%;}
.d .c1 {position: absolute; width: 12px; height: 33px; background-color: #F4A62C; left: 36px; top:-18px;}
.d .c1 .c1-1 {background-color: #F4A62C; border-radius: 50%; width: 12px; height: 12px; left: 0; position: absolute; top: -6px; }
更多纯css制作的精美图标:

[codepen_embed height=”265″ theme_id=”light” slug_hash=”psLen” default_tab=”result” user=”MyXoToD”]See the Pen Pure CSS Clock (animated) by Max (@MyXoToD) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”light” slug_hash=”EIKdJ” default_tab=”result” user=”alikhalilifar”]See the Pen Flat CSS Pure Burger Icon by Ali Khalilifar (@alikhalilifar) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”light” slug_hash=”qdvnK” default_tab=”result” user=”PanKex”]See the Pen Pure CSS Google logos by Pan Kex (@PanKex) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”light” slug_hash=”khydI” default_tab=”result” user=”PaFF”]See the Pen Hanging picture frames by Paff (@PaFF) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”light” slug_hash=”rFElD” default_tab=”result” user=”willpaige”]See the Pen Computer Monitor and Laptop pure CSS by Will Paige (@willpaige) on CodePen.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”light” slug_hash=”GdKqp” default_tab=”result” user=”savage69kr”]See the Pen Full CSS NES by Joohun, Maeng (@savage69kr) on CodePen.[/codepen_embed]


2017-09-18