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

Начнём прохождение курса с простой задачи — вёрстки кнопок социальных сетей.

Обычно такие кнопки являются просто ссылками на страницы компании в социальных сетях. Стилизация работающих «лайков» является более сложной задачей.

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

Декоративные элементы CSS3

Маска при наведении, шаг 1[1/31]

В этой серии заданий мы реализуем довольно распространённый интерфейсный приём — появление текстового описания по наведению на блок с картинкой — в необычном виде. Сама картинка при этом имеет нестандартную форму из-за геометрической фигуры-маски, применённой к ней.

Для начала применим к основным элементам блока с текстом базовый стиль: размер шрифта заголовков и параграфа, цвет фона и текста, общий вид кнопки-ссылки, ведущей к подробной информации.

В коде пока что нет ничего необычного, кроме полупрозрачного фонового цвета у текстового блока, заданного с помощьюrgba, и свойстваborder-radiusдля скруглённых углов у кнопки-ссылки.

Маска при наведении, шаг 2[2/31]

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

Контейнеру мы присвоим фоновое изображение. С помощью псевдокласса:hoverи свойстваdisplayбудем управлять видимостью текстового блока.

Маска при наведении, шаг 3[3/31]

На этом шаге создадим и применим к картинке маску нестандартной формы.

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

Также давайте немного оживим блок с маской и будем плавно изменять его форму при наведении с помощью трансформации масштабированияtransform: scale.

Маска при наведении, шаг 4[4/31]

Создадим ещё один подобный блок, имеющий на этот раз форму окружности. Для этого воспользуемся той же техникой, что и в первом случае, но другой «круглой» картинкой-маскойround.svg.

Выдвигающееся описание, шаг 1[5/31]

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

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

Особой прелестью такого подхода является то, что мы можем обращаться к текстовому значению атрибута HTML-элемента непосредственно из CSS. Делается это с помощью свойстваcontent, задающего генерируемое содержимое псевдоэлементов и функцииattr(), которая применяется для добавления значения атрибута HTML-элемента в стилевое свойство.

Например, если у нас есть в разметке элемент<p data-text="hello">world</p>, то мы можем получить надпись «hello world», взяв «hello» из атрибутаdata-textв CSS и отобразив его в псевдоэлементе::before:

p::before {
    content: attr(data-text) " ";
}

В нашем случае давайте хранить тексты в атрибутах ссылки: заголовок блока в тексте атрибутаdata-title, а описательную часть — в атрибутеdata-description. Соответственно заголовок будем выводить в качестве контента псевдоэлемента::before, а описание — содержимым псевдоэлемента::after.

Выдвигающееся описание, шаг 2[6/31]

Теперь давайте реализуем плавное появление и сокрытие блока с текстовой информацией.

Для этого:

1. Спрячем псевдоэлементы::beforeи::afterпод картинку в блоке.caption-linkотрицательным значением cвойстваz-index.
2. По наведению на.caption-linkбудем сдвигать картинку на расстояние, равное ширине картинки, вправо, так чтобы блок с описанием становился видимым, оставаясь на прежнем месте.
3. Ограничим область видимости за границей блока.caption-linkс помощьюoverflow: hidden, чтобы визуально казалось, что картинка плавно уезжает и скрывается.

Выдвигающееся описание, шаг 3[7/31]

Эффект по наведению уже сейчас выглядит хорошо. Дополним его ещё немного.

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

Эффектные ссылки, шаг 1[8/31]

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

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

Эффектные ссылки, шаг 2[9/31]

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

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

Эффектные ссылки, шаг 3[10/31]

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

Эффектные ссылки, шаг 4[11/31]

В этом задании воспользуемся ранее изученным приёмом одновременного использования пользовательскогоdata-атрибута, свойстваcontentи функцииattr().

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

Эффектные ссылки, шаг 5[12/31]

Создадим ещё одну эффектную ссылку. На этот раз псевдоэлементы будут играть роль верхней и нижней декоративной рамки. Мы будем по-прежнему управлять их позицией и прозрачностью по наведению на ссылку.

Сначала установим псевдоэлементы в исходную позицию вверху и внизу ссылки.

Эффектные ссылки, шаг 6[13/31]

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

Эффектные ссылки: все вместе[14/31]

Это самое простое задание серии. Давайте просто соберём вместе все созданные эффекты и посравниваем их.

Закруглённые внутрь углы, шаг 1[15/31]

С помощью свойстваborder-radiusмы можем легко сглаживать края блоков и даже сделать блок визуально полностью круглым. Но, к сожалению,border-radiusможет сделать только выпуклые углы, а вогнутые — нет.

В этой серии заданий мы построим блок с вогнутыми углами.

Для этого, помимо ранее известных свойств, в текущей серии заданий мы воспользуемся свойствомclip.

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

Синтаксис свойстваclipс функцией, вырезающей прямоугольную область:

clip: rect(верхняя-координата, правая-координата, нижняя-координата, левая-координата);

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — px, em… Если край области нужно оставить без изменений, устанавливается значениеauto.

Нагляднее о том, как именно применяются координаты, показано на картинке:

Для построения блока с вогнутыми краями создадим поочерёдно для каждого угла свой маскирующий блок.

Начнём с нижнего левого угла.

Закруглённые внутрь углы, шаг 2[16/31]

Продолжим маскировать углы. Аналогично левому нижнему замаскируем правый нижний угол блока.

Закруглённые внутрь углы, шаг 3[17/31]

А теперь замаскируем левый верхний угол блока.

Закруглённые внутрь углы, шаг 4[18/31]

И, наконец, замаскируем последний правый верхний угол блока, а потом покрасим маскировку в белый цвет.

Слайдер на CSS, шаг 1[20/31]

В этой серии мы будем строить полнофункциональный слайдер на HTML и CSS без применения JavaScript.

Как такое может быть? Может! Мы воспользуемся приёмом, который возможно встречался вам раньше взадании из курса «Селекторы. Часть 3».

Но обо всём по порядку. Сначала нужно собрать разметку с картинками в нужном виде:

• картинки располагаются в ряд;
• у общего контейнера должно быть задано свойство overflow: hidden , скрывающее всё, кроме текущей видимой картинки;
• а ширина дочернего контейнера должна равняться суммарной ширине всех картинок внутри.

Поехали!

Слайдер на CSS, шаг 2[21/31]

Займёмся кнопками переключения слайдов.

Для начала внесём кнопки и подписи к ним в HTML, немного декорируем подписи и скроем сами кнопки.

Кнопки и подписи связаны между собой атрибутамиidиfor, поэтому клик на подписи будет выделять и соответствующий чекбокс (даже если он невидим).

Слайдер на CSS, шаг 3[22/31]

Теперь нам нужно в зависимости от состояния невидимых радио-кнопок соответствующим образом стилизовать видимые подписи. Для этого воспользуемся подобным селектором:

#btn-1:checked ~ .slider-controls label[for="btn-1"] { 
    ...
}

Что он выбирает? Подпись в блоке.slider-controls, идущем в разметке после выделенной радио-кнопки сid="btn-1". Причём подпись с атрибутомfor="btn-1", то есть связанную с этой радио-кнопкой. То что нужно!

Стилизуем таким образом все подписи к радио-кнопкам.

Слайдер на CSS, шаг 4[23/31]

Теперь у нас есть действующие кнопки переключения слайдов. Осталось подобным образом реализовать плавный сдвиг контейнера с картинками, чтобы в зависимости от выделенной радио-кнопки показывать соответствующую по счёту картинку.

Для этого применим такой селектор:

#btn-1:checked ~ .slider-inner .slider-slides { 
    ...
}

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

Хлебные крошки, шаг 1[24/31]

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

Кстати, «хлебными крошками» называется навигационный блок, который показывает в каком разделе сайта вы находитесь, а также путь к этому разделу от главной страницы сайта. Крошки чем-то похожи на пути в файловой системе.

Этот элемент обычно верстают очень просто — последовательность ссылок внутри блока с классом. А вот вариантов оформления существует много. И мы разберём один из достаточно сложных.

Исходная заготовка включает в себя контейнер.breadcrumbsс тремя ссылками. Контейнер сделан блочно-строчным, а ссылки выстроены в ряд с помощьюfloat. Также заданы некоторые исходные размеры, отступы и другие свойства.

Всё дополнительное оформление ссылок мы будем делать с помощью псевдоэлементов. И начнём с создания «стрелок» на концах ссылок с помощью::after. И для этого на первом шаге зададим псевдоэлементам базовые размеры, позиционирование и фон.

Хлебные крошки, шаг 2[25/31]

С помощью псевдоэлемента::afterмы создали в каждой ссылке по красному квадрату. Квадраты спозиционировали в правой части ссылок. Сейчас мы будем превращать их в стрелки.

Первым делом нужно будет добавить квадратам резкую тень со смещением в один пиксель — она будет контуром стрелок.

Затем мы сильно закруглим один из углов каждого квадрата. Свойствоborder-radiusможет работать подобноmarginилиpaddingи задавать разные радиусы скругления для каждого угла элемента. Для этого радиусы записываются через пробел:

border-radius: 1px 2px 3px 4px;
/*
1px - верхний левый угол
2px - верхний правый угол
3px - нижний правый угол
4px - нижний левый угол
*/

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

Затем с помощью трансформаций нужно повернуть квадраты на45°и немного уменьшить их, так как диагональ квадрата больше высоты ссылки.

Курс «

Мастерская: декоративные эффекты на CSS3

»

Хлебные крошки, шаг 3[26/31]

Перед вами практически готовые стрелки. Осталось только убрать вспомогательные фоны и рамки.

Для начала избавимся от вспомогательныхoutlineу ссылок.

Затем, чтобы стрелки слились со ссылками, изменим цвет фона у::afterс красного на белый.

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

Напоследок зададим внешний вид ссылок и стрелок при наведении и в активном состоянии. Для этого зададим фон сразу для нескольких селекторов:

.breadcrumbs a:hover,
.breadcrumbs a:hover::after,
.breadcrumbs a.active,
.breadcrumbs a.active::after {
    ...
}

Это нужно для того, чтобы и ссылка, и её псевдоэлемент меняли фон одновременно и визуально оставались одним целым.

Хлебные крошки, шаг 4[27/31]

Теперь давайте добавим нумерацию ссылок. Для этого используем оставшийся свободным псевдоэлемент::before.

Мы будем задавать номера ссылок автоматически с помощью CSS. Для этого используем следующие свойства:

• counter-reset , которое позволяет создать переменную-счётчик;
• counter-increment , которое позволяет увеличивать значение счётчика;
• функцию counter() , которая позволяет передавать значение счётчика свойству content у псевдоэлементов.

В исходном CSS для.breadcrumbsуже добавлено свойствоcounter-reset: flag. То есть наш счётчик уже создан и называетсяflag.

Чтобы увеличивать счётчик, нужно добавить свойствоcounter-increment: flagк каждому элементу, который будет нумероваться. А чтобы считывать значение счётчика и передавать его в псевдоэлементы, нужно задать им свойствоcontent: counter(flag).

Логично и изменение нумерации, и её отображение производить в самом::beforeу ссылок:

.breadcrumbs a::before {
    content: counter(flag);
    counter-increment: flag;
    ...
}

Ну и конечно же добавим базовое оформление для номеров ссылок.

Хлебные крошки, шаг 5[28/31]

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

Соберём резюме интересных приёмов, использованных в этой серии заданий:

1. по полной были задействованы оба псевдоэлемента;
2. разные размеры скругления углов в сочетании с трансформациями поворота и масштабирования — для создания стрелок;
3. резкие тени — для имитации рамок, хотя того же эффекта можно было добиться с помощьюborder;
4. использованы свойства для создания счётчиков и автоматической нумерации:counter-resetиcounter-increment;
5. использована функцияcounter()для отображения значения счётчиков в свойствеcontent.

Маркер на карте, шаг 1[29/31]

В последней серии заданий мы создадим красивый маркер на карте с использованием уже знакомых приёмов.

Для начала создадим квадратную заготовку маркера и расположим его на карте.

Маркер на карте, шаг 2[30/31]

Чтобы создать маркер в виде «капли», нужно закруглить все углы, кроме одного. Вы делали это в прошлой серии заданий.

Конечно, нужно добавить аккуратную тень.

И напоследок маркер нужно будет повернуть заострённым углом вниз.