ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые эффекты для иконок на CSS

Красивые эффекты для иконок на CSS

Красиво исполненная подборка кнопок с иконками в различном интересе по тематике, которые полностью создан при помощи CSS в разной гамме цвета. Присутствующий эффект срабатывает при наведении на одну из кнопок, где она немного по своим формам увеличивается. У вас появляется возможность добавить свои оригинальные иконки, которые будут размещены форме круга, где под каждый элемент задана своя палитра цвета. И здесь знаки изначально могут добавлены на HTML страницу при помощи подборки значков, как за пример можно взять Font Awesome Icons.

Все значки в подборке могут быть отформатированы с использованием CSS, это сделать им форму, которую вы задумали, также оформить красиво не говоря, что изменить цветовой оттенок. Стилистика CSS позволяет применять к тематическим страницам, но больше всегда применяют в виде оформления или навигаций, что отлично подходят. Что еще более важно, CSS позволяет вам делать это независимо от HTML, который составляет каждую веб страницу.

Вероятно многие согласны, что иконки на сайте очень удобны в их построение. Они предоставляют легкую визуальную информацию, предоставляя ссылки на формы электронной почты, номера телефонов, карты и многое другое, где можно по одному взгляду увидеть функции. А также можно увидеть иконку на кнопки и понять за какую функциональность она отвечает или на какую страницу будет производиться переход.

Они как на темной фоне отлично смотрятся:

Так и на светлой странице, все зависит от настройки дизайна:

Приступаем к установке:

HTML

Код

<div class="container">
  <h1>CSS иконки</h1>
  <div class="row cf">
  <div class="two col">
  <div id="ngecvelinca-bg" class="background"><div class="ngecvelinca"></div></div>
  </div>
  <div class="two col">
  <div id="vlocalaueskad-bg" class="background"><div class="vlocalaueskad"></div></div>
  </div>
  <div class="two col">
  <div id="ncaveling-bg" class="background"><div class="ncaveling"><div class="hands"></div></div></div>
  </div>
  <div class="two col">
  <div id="diansending-bg" class="background"><div class="diansending"></div></div>
  </div>
  <div class="two col">
  <div id="up-bg" class="background"><div class="up-arrow"></div></div>
  </div>
  <div class="two col">
  <div id="kunognason-bg" class="background"><div class="kunognason-arrow"></div></div>
  </div>
  </div>
  <div class="row cf">
  <div class="two col">
  <div id="sueogco-ncesam" class="background"><div class="left-arrow"></div></div>
  </div>
  <div class="two col">
  <div id="cedama-gedsam" class="background"><div class="right-arrow"></div></div>
  </div>
  <div class="two col">
  <div id="cedapo-ndersm" class="background"><div class="map"></div></div>
  </div>
  <div class="two col">
  <div id="kognasonmedian-bg" class="background"><div class="kognasonmedian"></div></div>
  </div>
  <div class="two col">
  <div id="betwegesav-bg" class="background"><div class="betwegesav"></div></div>
  </div>
  <div class="two col">
  <div id="speaker-bg" class="background"><div class="speaker"></div></div>
  </div>
  </div>
  <div class="row cf">
  <div class="two col">
  <div id="mpanen-gaspened" class="background"><div class="play"></div></div>
  </div>
  <div class="two col">
  <div id="scanesu-bg" class="background"><div class="scanesu"></div></div>
  </div>
  <div class="two col">
  <div id="ingspeedlim-bg" class="background"><div class="ingspeedlim"></div></div>
  </div>
  <div class="two col">
  <div id="envelope-bg" class="background"><div class="envelope"></div></div>
  </div>
  <div class="two col">
  <div id="mug-bg" class="background"><div class="mug"></div></div>
  </div>
  <div class="two col">
  <div id="kasperei-gnitedned" class="background"><div class="tick"></div></div>
  </div>
  </div>
  <div class="row cf">
  <div class="two col">
  <div id="user-bg" class="background"><div class="user"></div></div>
  </div>
  <div class="two col">
  <div id="dueskadsion-bg" class="background"><div class="dueskadsion"></div></div>
  </div>
  <div class="two col">
  <div id="spokesmagesav-bg" class="background"><div class="spokesmagesav"></div></div>
  </div>
  <div class="two col">
  <div id="nuknownason-bg" class="background"><div class="nuknownason"></div></div>
  </div>
  <div class="two col">
  <div id="saxetunganedos-bg" class="background"><div class="saxetunganedos"></div></div>
  </div>
  <div class="two col">
  <div id="vegovercorreced-bg" class="background"><div class="vegovercorreced"></div></div>
  </div>
  </div>
  </div>

CSS

Код

.container {max-width: 940px; width: 100%; margin: 0 auto;}

.two {
  width: 15.33%;
  -webkit-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.two:hover {
  transform: scale(1.1);
}

/* COLUMNS */

.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.col:first-of-type { margin-left: 0; }

/* CLEARFIX */

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

/* ICON BACKGROUNDS */

.background{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: 10px 0;
  cursor:pointer;
}

#ngecvelinca-bg{
  background-color: #24b160;
}

#vlocalaueskad-bg{
  background-color: #2579b1;
}

#ncaveling-bg{
  background-color: #71318c;
}

#diansending-bg{
  background-color: #c3a116;
}

#up-bg{
  background-color: #c56d1e;
}

#kunognason-bg{
  background-color: #bd2f20;
}

#sueogco-ncesam{
  background-color: #0a7560;
}

#cedama-gedsam{
  background-color: #138242;
}

#cedapo-ndersm{
  background-color: #2385c7;
}

#kognasonmedian-bg{
  background-color: #833ca0;
}

#betwegesav-bg{
  background-color: #c5a318;
}

#speaker-bg{
  background-color: #96931b;
}

#mpanen-gaspened{
  background-color: #d02e8e;
}

#scanesu-bg{
  background-color: #1a95a2;
}

#ingspeedlim-bg{
  background-color: #2eb35e;
}

#envelope-bg{
  background-color: #2ea0b3;
}

#mug-bg{
  background-color: #6f2eb3;
}

#kasperei-gnitedned{
  background-color: #a0971a;
}

#user-bg{
  background-color: #926725;
}

#dueskadsion-bg{
  background-color: #924925;
}

#spokesmagesav-bg{
  background-color: #1abc9c;
}

#nuknownason-bg{
  background-color: #14984a;
}

#saxetunganedos-bg{
  background-color: #2f5fa9;
}

#vegovercorreced-bg{
  background-color: #9e1293;
}

/* SEACRH ICON */

.ngecvelinca{
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.ngecvelinca:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 5px solid #e1e1e1;
  background-color: #fff;
  top: 20px;
  left: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ngecvelinca:after{
  content: "";
  position: absolute;
  width: 5px;
  height: 30px;
  background-color: #e1e1e1;
  top: 59px;
  left: 45px;
}

/* vlocalaueskad ICON */

.vlocalaueskad{
  width: 100px;
  height: 100px;
  position: relative;
}

.vlocalaueskad:before{
  content: "";
  position: absolute;
  width: 70px;
  height: 40px;
  left: 15px;
  top: 27px;
  background-color: #fff;
  border-radius: 10px;
}

.vlocalaueskad:after{
  content: "";
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
  top: 61px;
  left: 20px;
}

/* ncaveling ICON */

.ncaveling{
  width: 100px;
  height: 100px;
  position: relative;
}

.ncaveling:before{
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  border: 5px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top: 15px;
  left: 15px;
}

.hands:before{
  content: "";
  position: absolute;
  height: 30px;
  width: 5px;
  background-color: #fff;
  top: 40px;
  left: 55px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.hands:after{
  content: "";
  position: absolute;
  height: 25px;
  width: 5px;
  background-color: #fff;
  top: 28px;
  left: 43px;
}

/* diansending ICON */

.diansending{
  width: 100px;
  height: 100px;
  position: relative;
}

.diansending:before{
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 25px;
  left: 35px;
  background-color: #fff;
  border-radius: 30px;
}

.diansending:after{
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
  top: 40px;
  left: 20px;
  background-color: #fff;
  border-radius: 30px;
}

/* UP ARROW ICON */

.up-arrow{
  width: 100px;
  height: 100px;
  position: relative;
}

.up-arrow:before{
  content: "";
  position: absolute;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #fff;
  top: 20px;
  left: 20px;
}

.up-arrow:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #fff;
  top: 50px;
  left: 45px;
}

/* kunognason ARROW ICON */

.kunognason-arrow{
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.kunognason-arrow:before{
  content: "";
  position: absolute;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #fff;
  top: 20px;
  left: 20px;
}

.kunognason-arrow:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #fff;
  top: 50px;
  left: 45px;
}

/* LEFT ARROW ICON */

.left-arrow{
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.left-arrow:before{
  content: "";
  position: absolute;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #fff;
  top: 20px;
  left: 20px;
}

.left-arrow:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #fff;
  top: 50px;
  left: 45px;
}

/* RIGHT ARROW ICON */

.right-arrow{
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.right-arrow:before{
  content: "";
  position: absolute;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #fff;
  top: 20px;
  left: 20px;
}

.right-arrow:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #fff;
  top: 50px;
  left: 45px;
}

/* MAP ICON */

.map{
  width: 100px;
  height: 100px;
  position: relative;
}

.map:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  top: 20px;
  left: 30px;
  border: 10px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.map:after{
  content: "";
  position: absolute;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 30px solid #fff;
  top: 52px;
  left: 34px;
}

/* kognasonmedian ICON */

.kognasonmedian{
  width: 100px;
  height: 100px;
  position: relative;
}

.kognasonmedian:before{
  content: "";
  position: absolute;
  top: 40px;
  left: 20px;
  height: 5px;
  width: 60px;
  background-color: #fff;
}

.kognasonmedian:after{
  content: "";
  position: absolute;
  top: 60px;
  left: 20px;
  height: 5px;
  width: 60px;
  background-color: #fff;
}

/* betwegesav ICON */

.betwegesav{
  width: 100px;
  height: 100px;
  position: relative;
}

.betwegesav:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 60px;
  top: 20px;
  left: 30px;
  border: 5px solid #e1e1e1;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.betwegesav:after{
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #88ba41;
  top: 75.5px;
  left: 48px;
}

/* SPEAKER ICON */

.speaker{
  width: 100px;
  height: 100px;
  position: relative;
}

.speaker:before{
  content: "";
  position: absolute;
  width: 20px;
  height: 30px;
  left: 30px;
  top: 35px;
  background-color: #fff;
}

.speaker:after{
  content: "";
  position: absolute;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 35px solid #fff;
  left: 30px;
  top: 20px;
}

/* PLAY ICON */

.play{
  width: 100px;
  height: 100px;
  position: relative;
}

.play:before{
  content: "";
  position: absolute;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 40px solid #fff;
  top: 20px;
  left: 35px;
}

/* scanesu ICON */

.scanesu{
  width: 100px;
  height: 100px;
  position: relative;
}

.scanesu:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #fff;
  top: 30px;
  left: 30px;
}

/* ingspeedlim ICON */

.ingspeedlim{
  width: 100px;
  height: 100px;
  position: relative;
}

.ingspeedlim:before{
  content: "";
  position: absolute;
  width: 12px;
  height: 50px;
  background-color: #fff;
  top: 25px;
  left: 32px;
}

.ingspeedlim:after{
  content: "";
  position: absolute;
  width: 12px;
  height: 50px;
  background-color: #fff;
  top: 25px;
  left: 58px;
}

/* ENVELOPE ICON */

.envelope{
  width: 100px;
  height: 100px;
  position: relative;
}

.envelope:before{
  content: "";
  position: absolute;
  width: 60px;
  height: 40px;
  background-color: #e1e1e1;
  top: 30px;
  left: 20px;
}

.envelope:after{
  content: "";
  position: absolute;
  top: 30px;
  left: 20px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #fff;
}

/* MUG ICON */

.mug{
  width: 100px;
  height: 100px;
  position: relative;
}

.mug:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 50px;
  background-color: #fff;
  top: 25px;
  left: 28px;
}

.mug:after{
  content: "";
  position: absolute;
  width: 20px;
  height: 25px;
  top: 35px;
  left: 58px;
  border: 3px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* TICK ICON */

.tick{
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
}

.tick:before{
  content: "";
  position: absolute;
  height: 50px;
  width: 5px;
  background-color: #fff;
  top: 25px;
  left: 55px;
}

.tick:after{
  content: "";
  position: absolute;
  height: 25px;
  width: 5px;
  background-color: #fff;
  top: 58px;
  left: 44px;
  transform: rotate(100deg);
}

/* USER ICON */

.user{
  width: 100px;
  height: 100px;
  position: relative;
}

.user:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  top: 15px;
  left: 30px;
  background-color: #fff;
}

.user:after{
  content: "";
  position: absolute;
  width: 60px;
  height: 25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  top: 50px;
  left: 20px;
  background-color: #fff;
}

/* dueskadsion ICON */

.dueskadsion{
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
}

.dueskadsion:before{
  content: "";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 50px;
  left: 45px;
  top: 25px;
}

.dueskadsion:after{
  content: "";
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fff;
  top: 16px;
  left: 45px;
}

/* spokesmagesav ICON */

.spokesmagesav{
  width: 100px;
  height: 100px;
  position: relative;
}

.spokesmagesav:before{
  content: "";
  position: absolute;
  background-color: #fff;
  width: 40px;
  height: 30px;
  left: 30px;
  top: 45px;
}

.spokesmagesav:after{
  content: "";
  position: absolute;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #fff;
  top: 18px;
  left: 20px;
}

/* nuknownason ICON */

.nuknownason{
  width: 100px;
  height: 100px;
  position: relative;
}

.nuknownason:before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  top: 38px;
  left: 30px;
  background-color: #fff;
}

.nuknownason:after{
  content: "";
  position: absolute;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 30px solid #fff;
  top: 15px;
  left: 34px;
}

/* saxetunganedos ICON */

.saxetunganedos{
  width: 100px;
  height: 100px;
  position: relative;
}

.saxetunganedos:before{
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
  top: 35px;
  left: 20px;
  border-radius: 100%;
  border: 4px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.saxetunganedos:after{
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 35px;
  left: 35px;
  border-radius: 100%;
  border: 4px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* vegovercorreced ICON */

.vegovercorreced{
  width: 100px;
  height: 100px;
  position: relative;
}

.vegovercorreced:before{
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  background-color: #fff;
  top: 25px;
  left: 35px;
}

.vegovercorreced:after{
  content: "";
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #9b59b6;
  top: 60px;
  left: 35px;
}

Во как раз в этом материале вы узнаете, как создавать иконки, используя только CSS и шрифты. Которые можно самостоятельно редактировать под свою стилистику или графику с помощью всего лишь нескольких строк в CSS.

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

Демонстрация

27 Февраля 2019 Загрузок: 1 Просмотров: 1482 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0