纯CSS3绘制26个英文字母
在这里你看到的26个标准的英文字母并不是普通的字体,它们是用CSS在空白的页面上绘制出来的,纯css作品。主要运用了CSS3里的多个新变换功能,需要使用最新的浏览器进行观赏。
网页代码中用到(<!-- 浮动Div换行 --> <div style="clear:both">)和Div边距设置和浮动(margin:20px 5px 10px 80px; float: left;)。其中边距Margin四个像素依次代表:上右下左。
以下按字母表顺序,列出绘制26个字母的CSS。
.A{
position:relative;
margin:10px 30px 10px 5px; /*上右下左 */
float: left;
left:30px;
width:60px;
height:91px;
border-bottom:solid 14px #0feee2;
}
.A:before{
transform:skew(-19deg,0);
position:absolute;
content:'';
top:12.5px;
left:0;
width:16px;
height:125px;
background-color:#0feee2;
}
.A:after{
transform:skew(19deg,0);
position:absolute;
content:'';
top:12.5px;
left:45px;
width:16px;
height:125px;
background-color:#0feee2;
}
.B{
position:relative;
margin:10px 20px 10px 30px;
float: left;
top:12.5px;
left:10px;
width:60px;
height:125px;
border-left:solid 16px #2056cd;
}
.B:before{
position:absolute;
content:'';
width:52px;
height:39px;
border-width:15px 15px 10px 0;
border-color:#2056cd;
border-style:solid;
border-radius:0 240%180%0 /0 180%180%0;
}
.B:after{
position:absolute;
content:'';
bottom:0;
width:58px;
height:43px;
border-width:10px 15px 15px 0;
border-color:#2056cd;
border-style:solid;
border-radius:0 180%220%0 /0 180%180%0;
}
.C{
position:relative;
margin:10px 5px 10px 10px;
float: left;
top:12.5px;
left:10px;
width:84px;
height:95px;
border-width:15px 12px 15px 16px;
border-color:#87adef;
border-style:solid;
border-radius:50%;
}
.C:before{
transform:rotate(45deg);
position:absolute;
content:'';
top:2px;
left:49px;
width:90px;
height:90px;
background-color:#ffffff;
}
.D{
position:relative;
margin:10px 20px 10px 5px;
float: left;
top:12.5px;
left:10px;
border-left:solid 15px #ade081;
height:125px;
}
.D:before{
position:absolute;
content:'';
top:0;
left:0;
width:60px;
height:95px;
border-width:15px 15px 15px 0;
border-color:#ade081;
border-style:solid;
border-radius:0 300%300%0 /0 180%180%0;
}
.E{
position:relative;
margin:10px 10px 10px 60px;
float: left;
top:12.5px;
left:10px;
width:63px;
height:95px;
border-width:15px 0 15px 16px;
border-color:#cd2388;
border-style:solid;
}
.E:before{
position:absolute;
content:'';
top:38px;
left:0px;
width:53px;
height:15px;
background-color:#cd2388;
}
.F{
position:relative;
margin:10px 5px 10px 10px;
float: left;
top:12.5px;
left:10px;
width:63px;
height:110px;
border-width:15px 0 0 16px;
border-color:#668899;
border-style:solid;
}
.F:before{
position:absolute;
content:'';
top:38px;
left:0px;
width:53px;
height:15px;
background-color:#668899;
}
.G{
position:relative;
margin:10px 5px 10px 5px;
float: left;
top:12.5px;
left:10px;
width:84px;
height:95px;
border-width:15px 12px 15px 16px;
border-color:#f0af00;
border-style:solid;
border-radius:50%;
}
.G:before{
transform:rotate(45deg);
position:absolute;
content:'';
top:2px;
left:48px;
background-color:#ffffff;
width:90px;
height:90px;
}
.G:after{
position:absolute;
content:'';
bottom:0.5px;
right:7px;
width:28px;
height:36px;
border-width:13px 14px 0 0;
border-color:#f0af00;
border-style:solid;
}
.H{
position:relative;
margin:10px 10px 10px 5px;
float: left;
top:12.5px;
left:10px;
width:60px;
height:125px;
border-width:0 16px 0 16px;
border-color:#cde680;
border-style:solid;
}
.H:before{
position:absolute;
content:'';
top:53px;
left:0;
width:60px;
height:14px;
background-color:#cde680;
}