Итоговый проект по курсу JavaScript 30
Код: https://github.com/js3032/js3032.github.io
Мне кажется важным подводить итог сделанному, чтобы иметь возможность показать себе и другим чем занимался, чему научился, на что потратил время. И для самого себя делать такие отчёты важнее, чем для других.
Сайт мне нравится.
Несколько слов о задачах, которые возникали и их решениях.
1) В качестве прототипа взяла это портфолио https://chippd.github.io/
Мне оно понравилось.
В целом заметила, что wow-эффекты на сайтах привлекают внимание только при первом просмотре, а потом начинают утомлять. Поэтому современные сайты делают максимально спокойными
Цветовую гамму подбирала здесь https://www.pantone.com/color-of-the-year-2017 и здесь https://colorganize.com/
В итоге остановилась на цветах, выбранных в исходном сайте. Но сайты с сочетаниями цветов заслуживают внимания и могут быть полезными в будущем.
2) Переключение языков на сайте реализовала в html, где для каждого абзаца делала две версии на русском и английском, с классами соответственно "ru" и "en"
Затем добавила несложный js-код:
var language = document.querySelector(".language");
var p = document.querySelectorAll("p");
language.textContent = "en";
language.addEventListener("click", function() {
p.forEach(elem => elem.classList.toggle("ru"));
return language.textContent == "en" ?
language.textContent = "ru" : language.textContent = "en";
});
Здесь language - класс кнопки для переключения языков, р - тег абзаца.
Только что увидела, что в IE 9 код не работает. Стрелочные функции, метод forEach для массива ему, вероятно, неизвестны.
3) Круглое видео пыталась сделать через слой-маску, с круглым отверстием, который накладывается поверх нижнего слоя с видео. И так бы эта громоздкая конструкция и осталась, если бы не оказалось, что при изменении масштаба страницы размеры картинки и видео меняются непропорционально. При некоторых значениях масштаба у круглого видео оказывался срезанным один из краёв
Оказывается, у видео тоже есть свойство border-radius
Стили круглого видео выглядят так
video {
width: 240px;
height: 240px;
object-fit: cover;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
4) Свойство object-fit: cover;
Это новое свойство, аналог background-size: cover; но применяется для картинок и видео.
Дело в том, что исходное видео не квадратное, а прямоугольное. Значение border-radius: 50%; сделает его не круглым, а овальным. А если указать ширину и высоту, то большая сторона видео примет указанное значение, а меньшая подстроится под неё. Свойство object-fit: cover; позволяет указать оба значения: и ширину и высоту, и быть уверенным, что изображение или видео полностью заполнит всё предназначенное для него пространство
Здесь статья почему object-fit и object-position могут стать любимыми CSS-свойствами http://css-live.ru/articles/kratkij-obzor-object-fit-i-object-position.html
5) Визуальная шпаргалка по флексбоксам: http://css-live.ru/articles-css/shpargalka-po-shpargalke-po-flexbox.html
6) Проблема с transition
Если задавать любому hover-эффекту значение transition, изображение дёргается. Проблема давняя, здесь о ней спрашивают https://toster.ru/q/310927
Но там по ссылке ответа нет.
Зато есть здесь: https://ru.stackoverflow.com/
Свойство transform: translateZ(0); решает проблему с transition
7) Редактирование svg
svg-файлы открываем блокнотом и меняем значения
width="32" height="32" viewBox="0 0 32 32" указывая нужный размер, а
fill="#000000" указывая нужный цвет
Для проверки результата открываем svg в браузере
Но такой способ работает не всегда
Ещё один вариант. Идём сюда: https://icomoon.io/app/#/select
Нажимаем вверху слева сиреневую кнопку Import Icons
Загружаем наш svg
Выбираем его, он обводится желтой рамкой
Внизу серая неприметная кнопка Generate SVG & More
Кликаем по ней. Появляется кнопка Download, а рядом с ней ещё более неприметная шестерёнка с настройками. Кликаем по шестерёнке
Ставим галочку Owerride size, указываем размер
И указываем цвет, без знака решётки
Закрываем настройки, скачиваем. Распаковываем архив. Находим папку svg. Там наш файл уже отредактированный.