Украшаем иконки на сайте

Я к вам с новым украшательством, на сей раз подсветим иконки.

Отлично подойдет для сайтов с темной темой или просто выполненных в темных тонах. Только посмотрите, как круто подсвечиваются иконки, ну огонь же)

Код можно поглядеть здесь: https://codepen.io/frontbox/pen/zYQRepR

Спойлер на HTML

Если вам нужно запилить на странице раскрывающиеся блоки, например:
— Спойлеры для FAQ.
— Меню со сворачиваемыми подменю.
— Список с раскрываемыми элементами и т.п.

То это легко реализовать с помощью тегов <details> и <summary>, без JS.

Код выглядит так:

<details>  
    <summary>Подробнее</summary>  
    <p>Скрытый контент</p>  
</details>

Ну, а навести красоту можно по своему усмотрению с помощью CSS)

Выпадающий список с автозаполнением на HTML

Ну и раз мы начали разговор про тег <datalist>, то давайте заодно рассмотрим, как делать выпадающий список.

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

Пример:

<input list="cars">  
<datalist id="cars">  
    <option value="BMW">  
    <option value="Mercedes">  
    <option value="Ford">  
    <option value="Lambo">  
    <option value="Ferrari">  
</datalist>

Под тегом <input> нужно создать <datalist>, содержащий список элементов <option>.

📄 Шпаргалки по Flexbox CSS

Любите верстать с помощью флексов? Я тоже)

Чтобы не гуглить свойства, если вдруг забыли, вот вам классные шпаргалки:

— На русском языке
— На англ. языке

Главная фишка в том, что они интерактивные и очень наглядные.

Сохраняйте, 100% пригодится в работе)

🖼 Тег <picture> — адаптируем картинки

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

Браузер читает каждый тег <source> по порядку, если условия выполняются, то он берет картинку из атрибута srcset, а остальные теги <source> игнорируются. Если же ни одно из условий в тегах <source> не выполняются, то выводится картинка из тега <img>.

Пример:

<picture>
    <source srcset="1000x300.jpg" media="(min-width: 1000px)">
    <source srcset="700x300.jpg" media="(min-width: 700px)">
    <img src="300x300.jpg" alt="">
</picture>

Очень классный тег, попробуйте, если еще не пробовали)

📌 Путь фронтендера

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

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

— На русском языке
— На инглише

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

Модальное окно с помощью псевдокласса :target

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

Давайте сегодня рассмотрим, как сделать простое модальное окно на CSS, без использования JS.

Для этих целей воспользуемся псевдоклассом :target.

Код посмотреть можно в codepen.

🐸 Flexbox Froggy

Давайте сегодня отдохнем с пользой, зарубимся в игру, а заодно прокачаем навыки работы с Flexbox)

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

Это позволяет визуально представить применение различных свойств Flexbox, таких как align-items, justify-content, flex-direction и другие.

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

Поиграть можно здесь — https://flexboxfroggy.com/#ru

Плавная прокрутка с помощью scroll-behavior

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

За плавность прокрутки отвечает свойство scroll-behavior со значением smooth:

html {
  scroll-behavior: smooth;
}

Пример этого чуда в действии можно увидеть здесь:
https://codepen.io/frontbox/pen/pomKyQg

Ровняем блок по центру экрана

Тривиальная задача, с которой сталкивается каждый верстальщик. Это может быть необходимо, чтобы выровнять модальное окно, какой-то контент на первом экране лендинга и т.п.

Есть несколько способов, но давайте разберем самый простой — с помощью флексов.

Делаем родителя флекс-контейнером и задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:

.container {
   height: 100vh; /* это высота вьюпорта */
   display: flex;
   align-items: center;
   justify-content: center;
}

Полный код можно глянуть здесь.

Все просто, красиво и без костылей)

Простой zoom-эффект на CSS для изображения

Давайте в несколько строк, добавим интерактивности для сайта. Создадим эффект зума при наведении на картинку.

Пример работы можно глянуть на видео к этому посту.

А вот и сам код:

html:

<div class="image-container">
    <img src="img.jpg">
</div>

css:

.image-container {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.5);
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-container:hover img {
    transform: scale(1.2);
}

Как это работает:
— Контейнер image-container имеет фиксированный размер, а изображение увеличивается внутри него, сохраняя свои пропорции;
— При наведении курсора изображение увеличивается, тем самым создаётся необходимый эффект.

Необычный генератор заглушек для изображений

Не всегда, когда разрабатывается сайт уже есть готовые изображения для него. Для того, чтоб обозначить в нужных местах изображения обычно используют заглушки (placeholder).

Обычно используют типа таких сервисов - https://imgholder.ru/
Где задаются размеры изображения и цвет, если нужно, а потом уже вставляем полученную ссылку в тег img и лицезреем картинку.

Но недавно мне скинули еще один генератор, здесь все также, только вставляются изображения наших четвероногих друзей)

Собственно вот сайт - https://placedog.net/

Захотелось с вами поделиться, го тестить)

Я пишу на JavaScript

Делаем числа в таблицах красивыми

Иногда приходится верстать таблицы, которые (внезапно) содержат числа. Так вот, чтобы улучшить восприятие этих чисел, бывает полезно использовать свойство:
font-variant-numeric: tabular-nums;

Это свойство задает одинаковую ширину для каждой цифры.

Код можно глянуть здесь.

Го удивлять всех юзеров стильными таблицами)

Декоративная линия между колонками

На днях смотрел, как сверстан многоколоночный текст на одном сайте и заметил, что колонки разделяли с помощью border-right. Как то не очень красиво, специально для разделения колонок в тексте, есть свойство column-rule.

column-rule: 3px solid red;

Задаем ширину, стиль и цвет разделительной линии.

Пример можно глянуть здесь.

А более подробное описание работы с этим свойством и в целом работу со столбцами можно прочитать тут.

Пойду сыну предъявлю, 8 лет пацану, а он без офера сидит на шее у родителей) Канал паренька здесь.

Текст на размытом фоне

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

Делается довольно просто, вот код:

<div class="glass-backdrop">
    <span>Текст на размытом фоне</span>
</div>

.glass-backdrop {
    height: 300px;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    background: url("background.jpg") center no-repeat;    
}
.glass-backdrop span {
    position: relative;
    text-align: center;
    color: #FFF;
    width: 80%;
    font-size: 34px;
    line-height: 40px;
    padding: 40px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 16px 28px rgba(0,0,0,0.2);
    text-shadow: 0 0 12px rgba(0,0,0,0.6);   
    text-transform: uppercase;
    font-family: 'Roboto', Tahoma, sans-serif;
    letter-spacing: 4px;
    z-index: 1;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

Пощупать код можно здесь.

Прячем html-элемент без помощи CSS

Все знают, про display: none, с помощью которого можно скрыть элементы страницы, но не все знают про атрибут hidden, который тоже может скрывать элементы.

Использовать можно так:

<p hidden>Здесь текст который будет скрыт<p/>
<p>Здесь текст который будет виден<p/>

Вот так просто.

Но стоит помнить, что hidden скрывает элемент не только от глаз пользователя, его не видят скринридеры и на него нельзя установить ссылку.

🌀turn в CSS

Если вы делаете анимации и запарились считать обороты элементов в градусах, то turn спешит на помощь)

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

➧ 1 turn равен одному полному обороту, или 360 градусам;
➧ 0.5 turn равен пол-оборота, или 180 градусам;
➧ 0.25 turn равен четверти оборота, или 90 градусам.

Реализация:

.element {
  transform: rotate(1turn); /* Полный оборот, эквивалентно 360 градусам */
}

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

Список-зебра 🦓

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

Проще всего это сделать с помощью псевдокласса :nth-of-type, выбираем четные и нечетные пункты списка.

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  <li>Пять</li>
</ul> 

li:nth-of-type(odd){ background: #f7d776}
li:nth-of-type(even){ background: #c9d5ea}

Получается примерно такая зебра, как в шапке поста.

Пока выходной, давайте отвлечемся и порешаем правильные алгоритмические задачки