Основная идея - создать блок, в котором расположены несколько заголовков пронизанных вертикальной линией так, что виден задний фон.
Такое проще показать, чем объяснить:
HTML:
Красивый рекламный блок, пронизанный линией
11.01.2021
Частая задача - красиво оформить поле для прикрепления файла.
Основной проблемой тут является то, что сам элемент input type="file" через CSS кастомизировать можно плохо, поэтому его просто скрывают и оформляют кнопку место его кнопку, ссылку, label...
Но и тут есть проблема, обычно, такие кнопки не отображают файл который был выбран пользователем и, иногда, посетители сайта не могут понять, прикрепился их файл или нет.
Красивое оформление отзывчивых html таблиц
21.10.2020
Извечная проблема - широкие HTML таблицы, которые и на десктопных мониторах выглядят не очень, а про мобильные устройства и говорить нечего.
Самое простое и распространенное решение, это добавлять горизонтальную прокрутку через css свойство overflow, но при этом не всегда посетителям сайта очевидно, что на экране телефона таблица, особенно если первая колонка занимает все пространство.
Красивый лэйбл о скидке на css
03.06.2020
Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:
Иногда, из-за содержимого страницы, на мобильных устройствах появляются пустоты справа в шапке и подвале сайта.
Несколько слов о meta viewport
01.04.2020
Мета тег viewport, предназначен для указания, как на мобильных устройствах должна отображаться "область просмотра". Далее будет несколько примеров.
Блок выстой с экран на CSS
31.03.2020
Иногда требуется верстка, где страницы поделены на горизонтальные секции, каждая из которых занимает ровно размер экрана. При этом независимо от устройства / разрешения экрана. Понятно, что это можно сделать при помощи JavaScript, но есть способ лучше.
Интересное css свойство object-fit
29.03.2020
Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.
Ниже несколько, для демонстрации вариантов отобрадения.
Думаю все мы уже привыкли видит на сайтах значок рубля, вместо приписки "руб.", но что делать если кодировка сайта не utf-8, а windows-1251?
Emmet
29.10.2019
Уже давно использовал, в разных редакторах, возможность генерации целых блоков html по шаблонам вида: div.class>ul+.
И вот решил выяснить про данный функционал подробнее.