Полезные решения на CSS

Данная заметка дополняемая

1. Адаптивное видео (шириной 100%)

Данный способ подходит для вставки видео через фрейм, как например, с ВК или Youtube.

2. Изменение фона выделенного текста

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

3. Запрет выделения текста

Данным способом можно не только мешать посетителю выделять текст, но и помогать выделять только нужное

4. Разделение текста на несколько колонок

Чтобы разделить текст или список элементов на несколько колонок, используется свойство column-count

5. Удаление пробелов между блочно-строчными элементами

Между блочно-строчными элементами в браузере появляются пробелы, если HTML-код форматируется как обычно. Как вариант, можно написать код в одну строку, но многие CMS сами отформатируют код, сделая переносы.

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

6. Подключение нужного стиля в зависимости от разрешения экрана

Для удобства работы со стилями, можно для каждого устройства подключать свои

7. Показ адреса ссылки при печати

Для того, чтобы видеть адреса ссылок в распечатанном документе, нужно добавить стиль:

8. Запрет события мыши

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

Например, чтобы не цеплялись и не перетаскивались картинки.

9. Прокрутка фонового изображения вверх

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

10. Деление блока на равные колонки

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

Нужное кол-во блоков с классом block помещаем в контейнер container и получим:

Текст
Текст, текст, текст, текст
Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
Текст
11. Тень для изображений на прозрачном фоне

Чтобы добавить правильную тень к изображению на прозрачном фоне используем фильтр drop-shadow вместо box-shadow:

box-shadow
filter: drop-shadow
12. Якоря для ссылок при фиксированном хедере

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

и стиль для него:

13. Регулярные выражения

Если нужно задать стиль ко всем элементам с классами, которые содержат определенный набор символов, то используется регулярное выражение вида: [class*=atuin] {}, при котором стили будут применены ко всем классам с именами, которые содержат atuin

и стиль для него:

Операторы:

*= — определенное значение где-то в атрибуте.

^= — определенное значение в начале атрибута

$= — определенное значение в конце атрибута

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Владимир:

    За тему с якорем респект.Прям — головняк. 13 пункт тяжело заходит…

    Ответить
  • Алексей:

    Просмотрев ваш сайт целиком не обнаружил статью как сделать вывод на печать карточки товара для интернет-магазина. Где будет отображаться информация товара (картинка, стоимость или цена по акции, характеристики товара и т.д.).
    Статья была бы как раз кстати.

    Ответить