菜单图标在CSS中绘制

如何使菜单图标不是图片,而是用html + css写。

在我使网站设计响应之后,我有了这个问题,并在菜单的图标上放置了一个漂亮的菜单,我切入Yandex Pictures。

在一个清晰的早晨,创造的快乐已经像雾一样消失,经过另一次检查网站的下载速度。

之前改编的每张微小图片都加载了大约200毫秒。 带有html的实心脚布加载速度更快。

就在那时我决定尝试用代码编写图标,这就是发生的事情。

[blok]

我制作的图标大小为40 x 40像素,以便更好地查看,但通过在代码中更改此数字,您可以为自己制作任何尺寸。

@

邮件 代码

 

代码

 

菜单 代码

 

代码

 

设置 代码

 

启动 代码

 

评论 代码

 

邮件

[blok]

CSS

.letter {
width: 40px;
height: 30px;
border: 2px solid #555;
border-radius: 2px;
position: relative;
}
.dog{
position: absolute;
top: 2px;
left: 12px;
width: 18px;
height: 18 px;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
background: #fff;
z-index: 1;
}
.letter:before {
content: "";
position: absolute;
top: 0;
left: 19px;
height: 30px;
border-left: 3px solid #333;
transform: skewX(54deg);
}
.letter:after {
content: "";
position: absolute;
top: 0;
right: 19px;
height: 30px;
border-left: 3px solid #333;
transform: skewX(-54deg);
}

HTML

<div class="letter">
<div class="dog">@</div>
</div>

[blok]

CSS

.pencil {
width: 50px;
height: 50px;
font-size: 40px;
font-weight: bold;
transform: rotate(120deg);
}

HTML

<div class="pencil">✎</div>

菜单
CSS

.menus {
font-size: 40px;
font-weight: bold;
}

HTML

<div class="menus">≡</div>

[blok]

CSS

.lodge {
position: relative;
width: 50px;
height: 50px;
}
.lodge:before,
.lodge:after
{
content: "";
position: absolute;
width: 30px;
height: 2px;
background: #333;
}
.lodge:before {
top: 19px;
left: 0;
transform: rotate(-45deg);
}
.lodge:after {
top: 19px;
left: 22px;
transform: rotate(45deg);
}
.wall {
position: absolute;
top: 25px;
left: 9px;
width: 30px;
height: 30px;
border: 2px solid #777;
}

.door {
position: absolute;
top: 39px;
left: 25px;
width: 10px;
height: 20px;
background: #777;
}

HTML

<div class="lodge">
<div class="wall"></div"≶
<div class="door"></div"≶
</div>

设置

[blok]

CSS

.gear; {
position;: relative;;
width: 40px;
height: 40px;
border-radius: 50%;
background: #777;
margin: 50px 0 0 10px;
}
.gear:before {
content: "";
position: absolute;
width: 20%;
height: 20%;
left: 40%;
top: 40%;
border-radius: inherit;
background: #fff;
}
.tooth1,
.tooth2,
.tooth3,
.tooth4,
.tooth5,
.tooth6
{
position: absolute;
top: -17px;
left: 0px;
width: 5px;
border: 20px solid transparent;
border-top: 25px solid #fff;
}
.tooth1 {
top: -21px;
left: -3px;
}
.tooth2 {
top: -12px;
left: 14px;
transform: rotate(60deg);
}
.tooth3 {
top: 6px;
left: 14px;
transform: rotate(120deg);
}
.tooth4 {
top: 15px;
left: -2px;
transform: rotate(180deg);
}
.tooth5{
top: 6px;
left: -18px;
transform: rotate(240deg);
}
.tooth6 {
top: -11px;
left: -19px;
transform: rotate(300deg);
}

HTML

<div class="gear">
<div class="tooth1"></div>
<div class="tooth2"></div>
<div class="tooth3"></div>
<div class="tooth4"></div>
<div class="tooth5"></div>
<div class="tooth6"></div>
</div>

启动

[blok]

CSS

.pusk {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: #777;
margin: 50px 0 0 0;
}
.pusk:before {
content: "";
position: absolute;
left: 22%;
top: 22%;
width: 55%;
height: 55%;
border-radius: inherit;
box-shadow: 0 0 0 3px #fff;
background: #777;
}
.pusk:after {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 40%;
height: 3px;
border-radius: 1px;
box-shadow: 0 0 0 3px #777;
background: #fff;
transform: rotate(90deg);
z-index: 1;
}

HTML

<div class="pusk"></div>

评论

[blok]

CSS

.narrator {
width: 40px;
height: 30px;
position: relative;
border-radius: 5px;
background: #777;
margin-top: 50px;
}
.narrator:before {
content: "";
position: absolute;
top: 25px;
left: 5px;
border: 10px solid transparent;
border-top: 15px solid #777;
}

HTML

<div class="narrator""></div>

现在。 有时间我会尝试画出更多。

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注