Свежие приёмы и методы CSS3

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

ВНИМАНИЕ: некоторые методы, описанные в этой заметке, пока ещё считаются экспериментальными и требуют проверки на совместимость в разных браузерах перед использованием в рабочих проектах.

Используйте SVG для иконок

SVG поддерживается всеми современными браузерами и масштабируются для всех известных разрешений дисплеев, так что сегодня нет никаких резонов использовать .jpg или .gif для изображений иконок. Заметьте, что для фона есть свойство background-size, которое используется для масштабирования изображения по размеру контейнера.

.logo {
	display: block;
	text-indent: -9999px;
	width: 100px;
	height: 82px;
	background: url(kiwi.svg);
	background-size: 100px 82px;
}

 
Источник: CSS Tricks

Фиксированные слои таблиц

Полностью поддерживаемое, но на удивление малоизвестное, свойство, которое изменяет способ отображения таблиц и даёт более надёжный и предсказуемый при адаптации макет таблиц.

table {
	table-layout: fixed;
}

 
Источник: CSS Tricks

Фигурное обтекание текстом плавающих изображений

CSS свойство shape-outside позволяет задавать набор геометрических примитивов криволинейной зоны расположения текста при обтекании изображения.

.shape {
	width: 300px;
	float: left;
	shape-outside: circle(50%);
}

 
Здесь результат применения класса .shape для изображения:

Источник: WebDesigner Depot

Внутренние пропорции бокса

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

.container {
	height: 0;
	padding-bottom: 20%;
	position: relative;
}

.container div {
	border: 2px dashed #ddd;  
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

Источник: AllThingsSmitty

Плавное изменение цвета при наведении указателя

Очень простой способ сделать ваши ссылки (или другие элементы) удивительно привлекательными.

a {
	color: #000;
	-webkit-transition: color 1s ease-in; /*safari and chrome */
	-moz-transition: color 1s ease-in; /* firefox */
	-o-transition: color 1s ease-in; /* opera */
}

a:hover { 
	color: #c00;
}

Источник: Matt Lambert

Стиль повреждённых изображений

Повреждённые изображения выглядят не слишком привлекательно, но это может произойти в любой момент, если что то произойдет на вашем сервере. Использование некоторых дополнительных свойств CSS позволит определить стиль повреждённых изображений и сообщить об этом читателю сайта.

img {  
	min-height: 50px;
}

img:before {  
	content: " ";
	display: block;

	position: absolute;
	top: -10px;
	left: 0;
	height: calc(100% + 10px);
	width: 100%;
	background-color: rgb(230, 230, 230);
	border: 2px dotted rgb(200, 200, 200);
	border-radius: 5px;
}

img:after {  
	content: "\f127" " Broken Image of " attr(alt);
	display: block;
	font-size: 16px;
	font-style: normal;
	font-family: FontAwesome;
	color: rgb(100, 100, 100);

	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	text-align: center;
}

Посмотрите, чего можно добиться, используя эту технику, лучше, чем это делает браузер по умолчанию?
Источник: Bitsofco.de

Пустые и заполненные атрибуты селекторов

CSS3 позволяет создавать различные стили элементов в зависимости от заполнения атрибута data-*, пуст он или нет. Посмотрите на следующий HTML-код:

И теперь наш CSS определяет стиль для всех элементов div в зависимости от заполненности атрибута data-attr:

div {
	border: 1px solid gray;
	height: 100px;
	margin: 10px;
	width: 100px;
}

/* Пустой атрибут селектора */
div[data-attr=''] {
	background: red;
}

/* НЕ пустой атрибут селектора */
div:not([data-attr='']) {
	background: green;
}

Источник: Vacheslav Starikov

Разделённые запятыми списки

Небольшая вставка для отображения неупорядоченного списка с запятой в качестве разделителя. Обратите внимание на :not(:last-child), которое запрещает отображение запятой после последнего элемента списка.

ul > li:not(:last-child)::after {
  content: ",";
}

Источник: AllThingsSmitty