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

Адаптивное видео (шириной 100%)
Изменение фона выделенного текста
Запрет выделения текста
Разделение текста на несколько колонок
Удаление пробелов между блочно-строчными элементами
Подключение нужного стиля в зависимости от разрешения экрана
Показ адреса ссылки при печати
Запрет события мыши
Прокрутка фонового изображения вверх
Деление блока на равные колонки
Тень для изображений на прозрачном фоне
Якоря для ссылок при фиксированном хедере
Регулярные выражения

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

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

.video {
	position: relative;
	padding-bottom: 56.25%; /* Для формата 16:9, а для формата 4:3 ставим 75% */
	padding-top: 25px;
	height: 0;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video {

position: relative;

padding-bottom: 56.25%; /* Для формата 16:9, а для формата 4:3 ставим 75% */

padding-top: 25px;

height: 0;

}

.video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

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

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

::selection {
	background: #BFE2FF;
}
::-moz-selection {
	background: #BFE2FF;
}

::selection {

background: #BFE2FF;

}

::-moz-selection {

background: #BFE2FF;

}

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

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

.noselect {
	-webkit-user-select: none; 
	-moz-user-select: none;   
	-ms-user-select: none;
	user-select: none;
}

.noselect {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

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

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

.column {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
}

.column {

-moz-column-count: 3;

-webkit-column-count: 3;

column-count: 3;

}

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

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

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

ul {
	font-size: 0;
}
li {
	display: inline-block;
	font-size: 16px;
}

ul {

font-size: 0;

}

li {

display: inline-block;

font-size: 16px;

}

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

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

<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:991px)" href="style.css" />

1	<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:991px)" href="style.css" />

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

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

@media print {
	a:after {
		content: " [" attr(href) "] ";
	}
}

@media print {

a:after {

content: " [" attr(href) "] ";

}

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

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

pointer-events: none;

1	pointer-events: none;

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

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

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

<div class="image-bg">
      <span style="background-image: url('/image.jpg');" class="image-scroll"></span>
</div>

</div>

.image-bg {
  height: 300px;
  position: relative;
}
.image-bg .image-scroll {
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 5s ease-out 0s;
}
.image-bg:hover .image-scroll {
  background-position: center 100%;
}

.image-bg {

height: 300px;

position: relative;

}

.image-bg .image-scroll {

background-position: center 0;

background-repeat: no-repeat;

background-size: cover;

height: 300px;

margin: 0 auto;

position: absolute;

left: 0;

right: 0;

width: 100%;

transition: all 5s ease-out 0s;

}

.image-bg:hover .image-scroll {

background-position: center 100%;

}

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

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

.container {
  display: flex;
}
.container .block {
  flex: 1;
}

.container {

display: flex;

}

.container .block {

flex: 1;

}

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

Текст

Текст, текст, текст, текст

Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст

Текст

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

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

img {
	filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5));
}

img {

filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5));

}

box-shadow

filter: drop-shadow

12. Якоря для ссылок при фиксированном хедере

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

<div id="yakor" class="yakor"></div>

1	<div id="yakor" class="yakor"></div>

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

.yakor {
	position:relative;
	top:-100px;
}

.yakor {

position:relative;

top:-100px;

}

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

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