Мастерская: декоративные элементы / Социальные кнопки, шаг 3 [3/18]
×

Социальные кнопки, шаг 3 [3/18]

У нас есть 3 серых ссылки-квадрата, осталось покрасить их в цвета соцсетей и добавить иконки.

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

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

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Социальные кнопки, шаг 3</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="share"> <b>Соцсети</b> <a class="social social-vk" href="http://vk.com/htmlacademy"></a> <a class="social social-fb" href="http://www.facebook.com/htmlacademy"></a> <a class="social social-tw" href="http://twitter.com/htmlacademy_ru"></a> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; font-size: 14px; } .share { width: 270px; margin: 0 auto; margin-top: 120px; padding: 10px; padding-left: 20px; background: #ecf0f1; } .share b { margin-right: 15px; font-weight: normal; text-transform: uppercase; color: #7f8c8d; } .social { display: inline-block; width: 40px; height: 40px; margin-right: 10px; background: #bdc3c7; vertical-align: middle; } .social-vk { } .social-fb { } .social-tw { }
HTML Academy
  1. Задайте для класса .social фоновое изображение /assets/course14/social.png без повторения.
  2. Для класса .social-vk цвет фона #6d8fb3 и расположение фонового изображения 0 0.
  3. Для класса .social-fb цвет фона #526da3 и расположение -40px 0.
  4. Для класса .social-tw цвет фона #73bfe6 и расположение -80px 0.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.