Значки меню

Значки меню рисуем в CSS

Опубликовано 2019-01-02 автором stariс

Как сделать значки меню не картинками, а написать в 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>

Домашняя.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>

Пуск

.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;

}

Значки меню рисуем в CSS

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

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