HTML + Верстка

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

Поиграться можно по ссылке: https://jsfiddle.net/wc2oeapv/

Установим browsersync глобально:

npm install -g browser-sync

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

cd ~/path_to_project

Запускаем:

browser-sync start --server --no-notify --no-ui --files *

Используемые параметры:

--server — запустить локальный сервер;

--no-notify — отключить уведомления;

--no-ui — не запускать «админку»;

--files * — следить за изменениями всех файлов в директории.

---

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

Создадим алиас. В файле .bashrc или .zshrc (зависит от того, чем пользуетесь):

alias bs="browser-sync start --server --no-notify --no-ui --files *"

Обновляем окружение:

source ~/.bashrc
// or
source ~/.zshrc

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

bs

---

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

Стили

.question-input {
 display: none;
}

.answer {
 height: 0;
 overflow: hidden;
 transition: 0.5s;
}

.question-input:checked + .question-label + .answer {
 height: auto;
 padding: 10px 0;
}

Разберем по частям

Скрываем чекбокс

.question-input {
 display: none;
}

Задаем стили для ответа

.answer {
 // обнуляем высоту
 height: 0;
 // скрываем блок
 overflow: hidden;
 // задаем длительность анимации
 transition: 0.5s;
}

.question-input:checked + .question-label + .answer {
 height: auto;
 padding: 10px 0;
}

Пара слов об анимации — она кривая:

Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение. Именно поэтому, в качестве хака, мы используем padding.

Если такая анимация вас устраивает — считайте вам повезло, а если она и вовсе не нужна — читайте следующую статью про создание аккордеона на чистом HTML.

Актуальное демо смотрите в моем codepen.