<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Иконки соц. сетей для сайта

Иконки соц. сетей для сайта

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

Другой вопрос подходят ли они по стилю для вашего сайта, не отвлекают ли от контента? А сами то Вы как думаете, когда видите красно-сине-зеленые ляпистые кнопки, одинаковые на всех сайтах, как в инкубаторе.

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

Иконки соц. сетей для сайта.

Иконочный шрифт Font Awesome

как нельзя кстати хорошо подходит для создания иконок соц. сетей на сайте. Давайте рассмотрим все преимущества:

  • легкость внедрения в проект
  • масштабируются без потери качества
  • не создают http-запросов к серверу
  • большой выбор векторных иконок
  • легко стилизовать под свой дизайн

Сделаем HTML разметку

Создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. В каждый пункт списка li поместим блок dlv с классом icon, внутри которых теги i с классами нужных вам иконок.

<div class="box">
  <ul>
    <li>
      <div class="icon">
     <i class="fab fa-facebook"></i>
     </div>
    </li>
    <li>
     <div class="icon">
      <i class="fab fa-twitter"></i>
     </div>
    </li>
    <li>
     <div class="icon">
      <i class="fab fa-youtube"></i>
     </div>
    </li>
    <li>
     <div class="icon">
      <i class="fab fa-pinterest-p"></i>
     </div>
    </li>
    <li>
     <div class="icon">
      <i class="fab fa-google-plus"></i>
     </div>
    </li>
  </ul>
</div>

На сайте fontawesome.com, находим нужные иконки и копируем код в свой HTML-файл.

<i class="fab fa-google-plus"></i>

Подключаем иконочный шрифт, путем копирования строки с кодом и вставки между тегами head.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Иконки соц. сетей появились на странице, теперь предстоит их стилизация.

Иконки соц. сетей для сайта.

CSS-код

Разместим иконки в центре, для этого пропишем контейнеру с классом box код ниже.

.box {
    text-align: center;

Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.

.box ul {
    list-style: none;
    margin-top: 60px;
}

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

.box ul li {
    width: 40px;
    height: 40px;
    background: #fff;
    border: solid 4px #ea86c6;
}

Отобразим список в строку: display: inline-block;

На картинке иконки стоят не по центру, маленького размера и неправильного цвета.

Иконки соц. сетей для сайта.

Работа с классом icon

Опускаем иконки на 15% вниз:

.icon {
    margin-top: 15%;
}

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

color: #ea86c6;
font-size: 1.7em;

Можно было бы на этом остановиться, но тогда зачем мы делали рамку у пунктов списка?

Иконки соц. сетей для сайта.

Hover эффект для иконок

Создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет.

.box ul li:hover {
    border: solid 4px #b63a64;
}

У иконок изменится цвет и увеличится размер:

.box ul li:hover .icon {
    font-size: 1.5em;
    color: #b63a64;
}

Плавность hover эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.

See the Pen Social icons Font Awesome by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.