Значки меню

Как сделать значки меню не картинками, а написать в html + css.

Этот вопрос возник у меня после того, как я сделал дизайн сайта адаптивным, и разместил сверху симпатичную менюшку из значков для меню, которые нарезал в Яндекс Картинках.

Радость создания испарилась как туман ясным утром, после очередной проверки скорости загрузки сайта.

Каждая малюсенькая картинка, предварительно адаптированная, грузилась около 200 ms. Солидная портянка с html грузится на порядок быстрее.

Вот тогда я решил попробовать написать значки кодом, и вот что получилось.

Размер значков я сделал 40 х 40 пикселей, для лучшего просмотра, но изменяя их число в коде, вы можете сделать их любого размера для себя.

@

Почта Код

 

Написать Код

 

Меню Код

 

Домашняя Код

 

Настройки Код

 

Пуск Код

 

Комментарии Код

 

Почта

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>

Написать

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>

Домашняя

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>

Настройки

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>

Пуск

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>

Комментарии

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>

Пока всё. Будет время попробую нарисовать ещё. Значков для меню ещё много.

Возможно кто-то из Вас найдёт ошибки в коде, укажет как их исправить или предложит дополнения. Буду весьма признателен. И не только я.

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

2 комментария на «Значки меню»

  1. stariс говорит:

    Спасибо!

  2. Максим говорит:

    В коде для значка «Настройки» поставлены лишние точка с запятой после «.gear»,
    «position» и «relative».

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *