Рассмотрим очень распространенный на сегодняшний день стек React/Redux. В проектах на данном стеке чаще всего можно встретить три типа миддваров — thunk, saga и redux-observable. При обучении чаще всего в уроках можно встретить лишь thunk, и это весьма оправдано — асинхронных экшенов достаточно, чтобы написать красивый выразительный код и реализовать без проблем любой функционал. Лишь за редким исключением какие-то встроенные сайд-эффекты в саги могут немного облегчить жизнь, в то же самое время не составит труда всё то же самое имплементировать написав пару дополнительных строк кода для создания вспомогательных оберток, использующих стандартные функции, например, библиотеки lodash.

Итак, рассмотрим главные плюсы и минусы, с которыми вы обязательно встретитесь в работе с данными миддлварами. Сначала рассмотрим саги и rx, а thunk оставим на последок, ведь он всех рвёт по моим оценкам.

Redux Saga

Два основных минуса — наложение следующих ограничений:

1. Все данные, с которыми работают саги — всё должно храниться в глобальном стейте. Всегда и никак иначе.

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

Из-за этих ограничений существует куча кейсов, когда саги только мешают — это те случаи, когда лучше и удобнее инкапсулировать состояние внутри компонента, а не выносить в глобальный стор. Пример — редактирование комментария. Где должен храниться статус сохранения комментария? Этот статус никому, кроме самого компонента комментария не нужен, я бы положил его внутри компонента в useState. Однако саги меня заставят вынести статус в глобальный стор. И чтобы понять в компоненте, что закончилось действие сохранения редактирования комментария, мне потребуется в каждом таком компоненте писать useEffect и слушать как изменился статус.

Таким образом, получится примерно такой код:

const getLikeStatusByCommentId = useSelector(getLikeStatus);
const likeStatus = getLikeStatusByCommentId(commentId);
const prevLikeStatus = useRef('');

useEffect(() => {
    if (prevLikeStatus.current !== likeStatus) {
        prevLikeStatus.current = likeStatus;
        if (likeStatus === 'done') {
            console.log('success');
        } else if (likeStatus === 'failed') {
            console.log('failed');
        }
    }
}, [likeStatus]);

const handleClick = () => {
    likeComment();
}

То есть дополнительно потребуется подтягивать данные из глобального стора о статусе запроса и сравнивать на каждый чих изменилось ли оно. Конечно же, можно сделать хук — useChangeStatus, однако сам факт, к тому же это все равно не позволит сделать то, что можно сделать на thunk.

Redux Observable

Все минусы саг, к которым следует добавить еще один очень важный — проблематичность переиспользования кода эпиков. Если в проекте сложные цепочки запросов, часть шагов которых повторяются в разных эпиках, то переиспользовать эти одинаковые шаги вряд ли получится. А правило DRY ведь никто не отменял — куда без этого.

К тому же если вы будете использовать TypeScript, и в каком-то эпике возникнет ошибка несоответствия типов, то VSCode подсветит не конкретный кусочек, а прям весь ваш двухстраничный код эпика, а rx он ещё как многословен в реальных проектах, а не в демках. Средств нормального дебага нет. Поэтому соваться новичкам крайне не рекомендую.

К тому же сам концепция реактивного программирования не очень проста для понимания новичкам. Если вам будут говорить, что на RX у вас получится простой лаконичный код, не верьте. Возвращаясь к написанному ранее коду, вы каждый раз будете долго вникать, что тут происходит, если конечно функционал у вас на проекте не ограничен одним запросом на один экшен.

Redux Thunk

Сразу скажу если бы я выбирал миддвару для нового проекта, то выбрал бы именно thunk. У него практически нет минусов. Вернее есть один, но только если вы пишите тесты, их будет чуть сложнее писать. Хотя может быть вы пишете только юнит-тесты, e2e-тесты, снапшот и скриншот-тесты, тогда вы, возможно, даже этого не заметите.

В остальном всё шикарно — вообще прям всё, все недостатки, которые были указаны выше, их попросту нет.

Например, на redux thunk код будет примерно следующим. Храним состояние в самом компоненте, обрабочик простой и выразительно описывает всю суть — сделать запрос, дождаться его окончания и сделать что-то после, а ошибку обработать отдельно.

const [likeStatus, setLikeStatus] = useState('initial');

const handleClick = async () => {
    setLikeStatus('pending');
    try {
        await likeComment();
        setLikeStatus('done');
        console.log('success');
    } catch(error) {
        setLikeStatus('failed');
        console.log('failed');
    }
}

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

А в дополнении мы может баблить ошибку компоненту-родителю. Просто делаем в родителе обертку для экшена и прокидываем в наш компонент эту обертку, а catch достаточно бросить ошибку с нужными нам данными. Таким образом, мы может обработать ошибку на любом уровне — такого не достичь ни в сагах, ни в observable.

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

Ячейка

.table td:hover {
    background: #b2bec3;
}

Строка

.table tr:hover td {
    background-color: #eee;
}

А вот с ячейками, относящимися к столбцу, сложнее уже. Нет возможности их просто выбрать с помощью hover. Решение в лоб — на javascript искать по индексу в каждой строке нужную ячейку и добавлять класс, меняющий фон.

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

.table td:hover::after {
    background-color: #eee;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

Получить высоту столбца мы не можем, а ячейки могут быть произвольных, плавающих размеров, поэтому растягиваем after с запасом, наример, возьмем 10 тыс px. Не забываем выставить z-index: -1, чтобы расположить пседвоэлемент под таблицу. Также из-за того, что вспомогательный элемент after больше размеров таблицы, у таблицы нужно добавить overflow: hidden, тогда за границами таблицы отображаться он не будет.

По аналогии можем сделать выделение строки через пседвоэлемент before.

.table td:hover::before {
    background-color: #eee;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}

Если для вашего сайта куплен обычный хостинг, а не сервер (виртуальный или физический), то задачу перевода сайта с http на https можно решить достаточно просто. Большинство хостеров уже давно внедрили в свои панели администрирования опцию включения SSL-сертификата. В подавляющем большинстве случаев такие сертификаты предоставляются организацией Let’s Encrypt и являются бесплатными. Рассмотрим как перевести сайт с http на https на примере хостинга Infobox.

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

Далее переходим в левом меню в раздел «Хостинг» — «Список сайтов».

Выбрав нужный сайт, нажимаем кнопку «Редактировать».

Попав на страницу редактирования сайта, ищем поле «Бесплатный SSL-сертификат» и ставим галку. Нажимаем кнопку «Сохранить настройки».

После подключения сертификата, сайт станет доступен по второму адресу https://название_сайта.

Однако возможен вариант, что сайт и стал доступен по https, но браузер не считает подключение защищенным.

Это связано с тем, что на сайте присутствует смешанный контент, т.е. на страницу подгружается контент по протоколу http. Увидеть это можно в браузере в режиме разработчика (в Chrome открыть его можно нажав клавишу F12) . Если страница открывается по протоколу https, но на ней есть ссылки на контент (скрипты, картинки, стили и прочее),
подгружаемый по протоколу http, то появится данное предупреждение. Самым лучшим решением будет перевести весь контент и запросы на https.

Также считается, что доступность сайта по нескольким урлам не очень хорошо с точки зрения SEO, поэтому желательно настроить редирект с http на https. Описание, как это сделать, представлено в справочном разделе Инфобокса. Для ускорения переезда сайта в поисковых системах можно сообщить об этом в соответствующих сервисах, например, Яндекс Вебмастер. Для этого нужно в одноименном разделе выбрать галочку «Добавить HTTPS».

Чтобы показывать реальный процент скаченных данных нужно знать общий объём и текущий скаченный объём: event.loaded / event.total. Количество скаченных байт можно получить прочитав свойство loaded объекта события ProgressEvent, а общий объём — свойство total. Однако при gzip-сжатии в заголовках ответа отсутствует поле lengthComputable, поскольку сжатие производится в режиме реального времени, т.е. данные начинают отдаваться до окончания полного сжатия файла.

Поэтому для организации прогрессбара требуется до старта загрузки с помощью ajax иметь информацию о размере скачиваемого файла, причём как в обычном виде, так и в gzip-е. Потому что, как оказалось, хотя данные и скачиваются в сжатом виде поле loaded даёт информацию о количестве скаченных байт в разархивированном виде. Так себя ведут почти все браузеры: Chrome, Opera, Edge. Лишь только Firefox показывает размер в сжатом виде. А если браузер и вовсе не поддерживает gzip, о чём сервер узнаёт по свойству Accept-Encoding заголовка запроса, то можно использовать свойство lengthComputable события ProgressEvent.

Для определения браузера можно использовать, например, библиотеку bowser.

function onProgress(event) {
	var total;
	if (event.lengthComputable) {
		// Размер файла берём из заголовка.
		total = event.total;
	} else {
		// Иначе размер файла берем из мета-данных в зависимости от типа сжатия.
		// Все браузеры кроме FF отдают в поле `loaded` количество байт до сжатия,
		// FF отдаёт количество байт, реально переданных по сети.
		if (event.target.getResponseHeader('Content-Encoding') === 'gzip' && bowser.firefox) {
			total = size_gzip;
		} else {
			total = size;
		}
	}
	if (!total || !event.loaded) return;
	console.log(event.loaded / total);
};

var size = 18874368;
var size_gzip = 4718592;
var request = new XMLHttpRequest();
request.upload.addEventListener("progress", onProgress, false);

Как мы знаем из курса физики, тень — это проекционная копия объекта, которая получается на освещаемой поверхности путем прерывания лучей некоторого источника света этим объектом.  В веб-разработке стилевая тень может быть односложной и многосложной (множественной), которая задается несколькими тенями.

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

[содержание]

1. Описание свойства text-shadow

Рассмотрим схематически составные части (параметры), с помощью с которых работает данное правило:

• X — это число, отвечающее за сдвиг по воображаемой горизонтальной оси прямоугольной системы координат;
• Y — это число, отвечающее за сдвиг по воображаемой вертикальной оси прямоугольной системы координат;
• коэффициент размытия — это параметр, отвечающий за то, какое число пикселей теневой области подвергнется блюрированию (размыванию) .

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

Пример кода

.b-txt
{
	text-shadow: 2px 2px 2px #4e7b0e;
}

Пример отображения

Рекламный слоган

2. Множественная тень

Рассматриваемое правило предоставляет возможность указать несколько теневых эффектов к тексту (задаются они через запятую). Это дает возможность создавать разные визуальные спецэффекты при оформлении текстовых блоков в html-верстке. Приведем «живые» примеры ccs-тени текста , которая делается с использованием описываемого стилевого правила:

.b-txt
{
	text-shadow: 4px 3px 0px #fcf8e3, 9px 8px 0px rgba(0,0,0,0.15);
}

Мой мир

В данном случае сначала задается тень под цвет фона, а вторая тень rgba-кодом с альфа-каналом.

Со спецэффектом трехмерности:

.b-txt
{
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.09), 0 0 5px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.29), 0 3px 5px rgba(0,0,0,0.19), 0 5px 10px rgba(0,0,0,0.26), 0 10px 10px rgba(0,0,0,0.21), 0 20px 20px rgba(0,0,0,0.16);
}

Табурет

.b-txt
{
	text-shadow: 0px 0px 4px #fff, 0px 0px 9px #fff, 0px 0px 14px #fff, 0px 0px 19px #ff2d95, 0px 0px 29px #ff2d95, 0px 0px 39px #ff2d95, 0px 0px 49px #ff2d95, 0px 0px 74px #ff2d95;
}

Вывеска

3. Анимация теней

Для анимирования необходимо воспользоваться специальным цсс-свойством animation, в котором необходимо проименовать саму функцию, задать время анимации и указать ее продолжительность animation: fire 1s infinite; , а затем описать состояния, которые будет принимать тень на разных промежутках времени:

.b-txt
{
	animation: fire 1s infinite;
}

@keyframes fire {
0%
  {
	...
  }
5% {
	...
  }
..........
100% {
	...
  }
}

В рассмотренном примере временной шаг составляет 5%. Следует отметить, что чем больше состояний на разных временных отрезках Вы пропишите, тем плавнее будет происходит анимирование объекта.

Визуализация разных элементов (хтмл-объектов) при вёрстке psd-макетов представляет собой очень важный пласт в освоении стилей, понимании возможности безкартиночно перенести эффект из макета на верстаемую страницу, затрачивая при этом гораздо меньше ресурсов. Ведь известно, что тень, сверстанная картинкой может занимать значительно больше места на жестком диске компьютера, чем реализация только через css-код. Кроме того, использование изображении вместо текста, зачастую, создает множество проблем, так как заказчик во множестве случаем требует, чтобы все текстовые данные были редактируемыми без необходимости каждый раз перерезать картинки из макета.

Какие возможности дает данная сетка:

• возможность управлять колончатой структурой основного каркаса html-вёрстки;
• управлять ориентацией расположения html-тэгов подобно табличной верстке;
• управлять порядком расположения;
• и многие другие.

Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:

[содержание]

Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:

ИЕ: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Хром: 29.0, 21.0 -webkit-
Сафари: 6.1 -webkit-
Опера: 12.1 -webkit-
Сафари (под Мак): 7.0 -webkit-
Опера-Мини: 8
Анройд-Браузер: 4.4, 4.1 -webkit-
Хром (под Андройд): 44

1.1. Свойство display: flex

CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:

• display: flex; — для блокового отображения;
• display: inline-flex; — для инлайнового отображения.

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

1.2. Выравниваем горизонтально justify-content

Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.

Формат записи

.b-podlogka
{
	height: 120px;
	background-color: #ddd;
	margin: 0px;
	padding: 10px;
		
	display: flex;
	display: -webkit-flex;
	
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}

.b-podlogka
{	
	justify-content: flex-end;
}

.b-podlogka
{	
	justify-content: center;
}

.b-podlogka
{	
	justify-content: space-between;
}

.b-podlogka
{	
	justify-content: space-around;
}

1.3. Вертикальное выравнивание align-items

Свойство используется для того, чтобы выровнять вертикально дочерние объекты внутри родительского flexbox-контейнера. Следует отметить, что под это выравнивание также подпадают и анонимные флекс-итемы. Данное правило не наследуется. Выравниваются только блоки первой строки.

Формат записи

.b-podlogka
{
	align-items: stretch;
	-webkit-align-items: stretch;
}

Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto;.

.b-podlogka
{	
	align-items: flex-start;
}

.b-podlogka
{
	align-items: flex-end;
}

.b-podlogka
{	
	align-items: center;
}

.b-podlogka
{
	align-items: baseline;
}

1.4. Ориентация основной оси flex-direction

Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту ?) и по горизонтали (в строку, по дефолту ?).

Формат записи

.b-podlogka
{
	flex-direction: row;
	-webkit-flex-direction: row;
}

.b-podlogka
{
	flex-direction: row-reverse;
}

.b-podlogka
{
	flex-direction: column;
}

.b-podlogka
{
	flex-direction: column-reverse;
}

1.5. Размещение в несколько строк flex-wrap

Отвечает за размещение дочерних flex-блоков в одну или несколько строк.

Формат записи

.b-podlogka
{
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.b-podlogka
{
	flex-wrap: wrap-reverse;
}

1.6. Направленность и многострочность одним правилом flex-flow

Данное правило используется, как более компактная запись двух предыдущих правил с целью оптимизации кода.

Формат записи

.b-podlogka
{
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
}

1.7. Выравниваем вертикально во всех строках align-content

Это цсс-правило используется для того, чтобы выровнять вертикально внутриконтейнейрные дочерние флекс-блоки. Для срабатывания этого правила необходимо, чтобы были у родительского контейнера заданы: height и flex-flow. Является не наследуемым.

Пример кода

.b-podlogka
{
	height: 120px;	
	flex-flow: row wrap;
	align-content: stretch;
}

.b-podlogka
{
	align-content: flex-start;
}

.b-podlogka
{
	align-content: flex-end;
}

.b-podlogka
{
	align-content: center;
}

.b-podlogka
{
	align-content: space-between;
}

.b-podlogka
{
	align-content: space-around;
}

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

2.1. Упорядочивание блоков order

ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.

Формат записи

.b-div1
{
	-webkit-order: 1;
	order: 1;
} 

.b-div5
{
	-webkit-order: -1;
	order: -1;
} 

2.2. Базис флекс-блока flex-basis

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

Пример кода

.b-div3
{
	flex-basis: 70px;
	-webkit-flex-basis: 70px;
} 

Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.

2.3. Пропорциональное увеличение ширины блока flex-grow

Свойство предназначено для задания цифрового показателя, который позволяет увеличить флекс-блок пропорционально его ширине. Чем больше значение, тему шире блок. Для срабатывания  необходимо, чтобы была задана ширина элемента или задан базис (выше пункт 2.2). Является не наследуемым правилом.

Формат записи

.b-div3
{
	-webkit-flex-grow: 1; 
	flex-grow: 1;
} 

Пример отображения

2.4. Пропорциональное уменьшение ширины блока flex-shrink

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

Формат записи

.b-div3
{
	-webkit-flex-shrink: 0; 
	flex-shrink: 0;
} 

Пример отображения

В данном примере всем блокам задали сжатие в одну единицу, а третьему установили ноль (то есть не сжиматься).

2.5. Запись трех предыдущих одной строкой flex

Свойство представляет собой объединение трех выше описанных свойств (в пунктах 2.2, 2.3 и 2.4), то есть по сути является их сокращенной формой их записи. Используется с целью оптимизации css-кода.

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

Формат записи

.b-podlogka
{	
	display: flex;
	display: -webkit-flex;
}

.b-div3
{		
	-webkit-flex: 2 2 88px; 
	-ms-flex: 2 2 88px; 
	flex: 2 2 88px;
}

Пример отображения

2.6. Выравнивание дочерних блоков align-self

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

Пример кода

.b-podlogka
{	
	align-items: stretch;
}

.b-div1
{		
	align-self: flex-start;
}

.b-div1
{		
	align-self: flex-end;
}

.b-div1
{		
	align-self: center;
}

.b-podlogka
{	
	align-items: center;
}
.b-div1
{		
	align-self: baseline;
}

.b-div1
{		
	align-self: stretch;
}

Приведем пример шаблона верстки каркаса страницы на flexbox:

За создание тени некоторого тэга в стилях отвечает правило  box-shadow, которое кроме внешней, также позволяет создавать и тень внутри объекта. Рассматриваемое свойство по сути визуально создает впуклость или выпуклость объекта.

[содержание]

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

ИЕ: 9.0
Эдж: 12.0
Firefox: 4.0, 3.5 -moz-
Хром: 10.0, 4.0 -webkit-
Сафари: 5.1, 3.1 -webkit-
Опера: 11.5
Андройд Браузер: 4.0, 2.1 -webkit-

1. Описание свойства box-shadow

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

Формат записи

.b-square-1
{	
	box-shadow: 5px 6px 7px 5px rgba(0, 0, 0, 0.5);
}

Пример отображения

Без размытия и искажения:

.b-btn
{	
	box-shadow: 3px 3px #4e7b0e;
}

2. Внутренняя тень

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

Формат записи

.b-btn
{	
	box-shadow: inset 3px 3px #4e7b0e;
}

Можно также сделать css тень при наведении:

.b-square:hover
{
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

3. Несколько теней

Чтобы их задать, необходимо перечислить описания теней через запятую:

.b-btn
{	
	box-shadow: inset 3px 3px #4e7b0e, 5px 6px 7px 5px rgba(0, 0, 0, 0.5);
}

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

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

В CSS существует две разновидности трансформирования: двухмерное (2D) и трехмерное (3D). Двухмерное происходит в пространстве, состоящем из двух плоскостей. Как известно из курса математики, оно называется декартовой или прямоугольной системой координат. Трехмерное происходит в пространстве, в которое входит три плоскости (X, Y и Z). В этом материале подробно коснемся 2D CSS3 transform.

Следует отметить, что в соответствии с принятым стандартом трансформации применимы только к тэга, у которых правило display равно:

Среди браузеров, в которых срабатывает рассматриваемое свойство как с доп префиксом, так и напрямую:

ИЕ: 10.0, 9.0 -ms-
ЭДж: 12.0
Firefox: 16.0, 3.5 -moz-
Хром: 36.0, 4.0 -webkit-
Сафари: 9.0, 3.1 -webkit-
Опера: 23.0, 15.0 -webkit- (-о-)
Маковский сафари: 9, 7.1 -webkit-
Андройд Браузер: 53, 2.1 -webkit-
Хром (под андройдом): -webkit-

[содержание]

1. Функции двухмерной трансформации transform

Свойство представляет собой набор опций, среди которых доступны разные функции трансформирования. Является не наследуемым. Разберем его подробнее:

Формат записи

.b-square-2
{
	transform: matrix(1.4,0,0.7,1.3,33,0);
}

.b-square-2
{
	transform: translate(-15px, 15px);
}

.b-square-2
{
	transform: translateX(-15px);
}

.b-square-2
{
	transform: translateY(-15px);
}

.b-square-2
{
	transform: scale(0.3, 1.5);
}

.b-square-2
{
	transform: scaleX(0.3);
}

.b-square-2
{
	transform: scaleY(-1.5);
}

.b-square-2
{
	transform: rotate(30deg);
}

.b-square-2
{
	transform: skew(-45deg, 55deg);
}

.b-square-2
{
	transform: skewX(-45deg);
}

.b-square-2
{
	transform: skewY(55deg);
}

2. Координаты центра трансформации transform-origin

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

Формат записи

.b-square-2
{
	-webkit-transform-origin: left top; 
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.b-square-2
{
	-webkit-transform-origin: 200% 220%;
	-ms-transform-origin: 200% 220%;
	transform-origin: 200% 220%;
}

.b-square-2
{
	-webkit-transform-origin: 33px 22px;
	-ms-transform-origin: 33px 22px;
	transform-origin: 33px 22px;
}

3. Множественные трансформации

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

.b-square
{
	transform: translateX(20px) rotate(-45deg);
	-ms-transform: translateX(20px) rotate(-45deg);
	-webkit-transform: translateX(20px) rotate(-45deg);

	background-color: #84cd1b;
	width: 30px;
	height: 30px;

	left: 20px;
	top: 20px;
	position: relative;
}

4. Примеры css transform

Для большей наглядности применения описанных выше трансформаций приведем следующий код и пример реальной верстки наклонной бирки «Новинка» над картинкой:

css:

.b-ramka
{
	width: 300px;
	height: 220px;
	border: 1px solid #1E824C;
	margin: 0px;
	padding: 0px;
}

.b-pic
{
	width: 240px;
	height: 160px;
	margin: 0px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	top: 50%;
	margin-top: -90px;
	left: 50%;
	margin-left: -115px;
}

.b-pic img
{
	position: relative;
	right: 10px;
	top: 10px;
}

.b-pic:before, .b-pic:after
{
	content: '';
	position: absolute;
	background-color: #ac2126;
}

.b-pic:before
{
	width: 40px;
	height: 10px;
	right: 92px;
	border-radius: 9px 9px 0px 0px;
}

.b-pic:after
{
	width: 10px;
	height: 40px;
	right: 0px;
	top: 92px;
	
	border-radius: 0px 9px 9px 0px;
}

.b-birka
{
	border: 1px dashed #fff;
	background-color: #e1373e;
	text-align: center;
	z-index: 3;
	
	
	width: 200px;
	height: 35px;
	
	color: #fff;
	font-family: Arial;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 34px;
	
	position: absolute;
	top: 30px;
	right: -50px;

	margin: 0px;
	padding: 0px;
	
	box-shadow: 0 0 0 3px #e1373e, 0px 20px 4px -16px rgba(0,0,0,0.7);
	
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

html:

<div class="b-ramka">
	<div class="b-pic">
		<img src="http://paratapok.ru/examples/5041/css3-transform-4.jpg" width="240" />
		<div class="b-birka">Новинка</div>
	</div>
</div>

И на закуску приведем пример вёрстки заглушки с использованием разных функций трансформирования: http://paratapok.ru/frontend/4626_shablon-prostoj-html-zaglushki-dlya-sajta-s-naklonnymi-blokami/.

Прочитав, написанное в материале, Вы познакомились с одним из важнейших разделов ЦСС и убедились в том, насколько широки и удобны возможности влияния на визуальную форму отображения тэгов при разметке документа. Хотелось бы акцентировать внимание на том, что следует не забывать при верстке в файле стилей прописывать для отдельных версий обозревателей рассматриваемое правило с помощью спецпрефикосов: -o-, -ms-, -webkit- и так далее.

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

[содержание]

1. Цвет фона background-color

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

Пример

div
{
	background-color: #84cd1b;
}

2. Фоновая картинка background-image

Этим правилом в роли бэкгранда задается картинка или цветовой градиент (используя встроенные функции):

Является не наследуемым.

Пример

div
{
	background-image: url(http://paratapok.ru/examples/4926/css-fon-8.jpg);
}

div
{
	background-image: linear-gradient(to top, #6cff9c, #1E824C);
}

3. Повторение фоновых картинок background-repeat

Свойство предназначено для управления повторением фоновой картинки. Является не наследуемым.

Формат записи

div
{
	background-repeat: repeat;
}

div
{
	background-repeat: no-repeat;
}

div
{
	background-repeat: repeat-x;
}

div
{
	background-repeat: repeat-y;
}

4. Позиционирование фоновых изображений background-position

Свойство используется для позиционирования фона внутри хтмл-тэга. Также, как и предыдущее, является не наследуемым. В соответствии с принятым стандартом имеет вот такое дефолтное состояние: background-position: left top .

Примеры возможных вариантов положений:

Формат записи

div
{
	background-position: right top;
}

div
{
	background-position: 33px 11px;
}

5. Фиксирование расположения фоновой картинки background-attachment

Рассматриваемое правило по своей функциональности позволяет установить взаимосвязь ползунка скролл-бара браузера и положения фоновой фотографии. Также является не наследуемым.

Формат записи

div
{
	background-attachment: fixed;
}

Попробуйте поскроллить скролл-бар в этом блоке:

Как видно, картинка прилипла к верху блока и скорллится при прокрутке.

6. Координаты фонового цвета background-clip

Свойство предназначено для определения местоположения координат фонового цвета относительно внутренней области html-элемента. Является не наследуемым.

Формат записи

div
{
	background-clip: padding-box;
}

div
{
	background-clip: border-box;
}

div
{
	background-clip: content-box;
}

7. Координаты фоновой картинки background-origin

Свойство предназначено для определения местоположения координат фонового фото относительно внутреннего пространства хтмл-контейнера. Следует отметить, что, если при задании этого правила будет установлено правило background-attachment в состояние fixed, то рассматриваемое правило не сработает.

Формат записи

div
{
	background-origin: padding-box;
}

div
{
	background-origin: border-box;
}

div
{
	background-origin: content-box;
}

8. Величина бэкграунда background-size

Рассматриваемое цсс-правило дает возможность пропорцианально или не пропорционально  (горизонтально, вертикально или одновременно в обоих направлениях)  растянуть фоновую фотографию внутри html-элемента, к которому оно прописывается через стили. Оно также дает возможность задания размеров фона относительно области блока. Не может быть унаследовано.

Формат записи

div
{
	background-size: 255px 99px;
}

div
{
	background-size: 66% 33%;
}

div
{
	background-size: cover;
}

div
{
	background-size: contain;
}

9. Запись фона одной строкой background

Все описанные выше правила (в порядке их описания) объединяются в пределах одного свойства background, которое позволяет значительно оптимизировать описание фона с помощью стилей. Если какое-то из описанных выше правил при такой форме записи будет не указано, то ему автоматически будет присвоено браузером дефолтное значение (см.  таблицы). При использовании в одностроковом формате написания правил background-size и background-position их необходимо писать через слэш  («/»).

Формат записи

div
{
	background: #6cff9c url(http://paratapok.ru/examples/4926/10/kabel-rg-lf.png) no-repeat center fixed;
}

Вот так расшифровка этой строчки выглядит в инструментах разработчика в Хроме:

10. Как сделать мултифон?

В каскадных стилях существует возможность в качестве фона некоторого хтмл-тэга указать несколько подряд идущих картинок, формируя при этом мультифон. При этом картинки подкладываются одна под другую в порядке перечисления. Приведем пример наложения двух фонов друг на друга:

div
{
	background-image: url(http://paratapok.ru/examples/4926/10/kabel-rg-lf.png), url(http://paratapok.ru/examples/4926/10/kabel-rg-rt.png);
	background-repeat: no-repeat;
	background-position: top left, top right;
}

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

Согласно стилевому оформлению бордер характеризуется тремя величинами: толщиной, стилем и цветностью.

[содержание]

1. Стиль рамки border-style

Данное правило отвечает за стиль визуального отображения бордера некоторого html-элемента. Следует отметить, что, если не задать рассматриваемое правило, то граница не будет видна, поскольку в дефолтном состоянии оно равно none (переводится, как «нет»). Может быть задано для разных частей границы. Является не наследуемым правилом.

Формат записи

p
{
	border-style: double;
}

Для установки нужного стилистического определения у частей границ, расположенных сверху, справа, снизу или слева, нужно прописать css-правила border-top-style, border-right-style, border-bottom-style, border-left-style (соответственно):

p
{
	border-left-style: solid;
}

Если для каждой из четырех частей бордера нужно присвоить каждой свой стиль, то следует прописать css-код так:

div
{
	border-style: solid double dotted dashed;
}

2. Цвет рамки border-color

Это цсс-правило дает возможность присвоить границе некоторого html-тэга нужный цвет c каждой из 4-х сторон: сверху, справа, снизу и слева. Есть возможность присвоить цвет какой-то конкретной части бордера — для этого применяются специальные подправила. Если данный параметр не установлен, то цветность границы будет равна цветности текста самого тэга. Является не наследуемым правилом.

Формат записи

div
{
	border-color: #84cd1b;
}

При необходимости управлять какой-то конкретной частью рамки хтмл-тэга (верхней, правой, нижней или левой), то для этого есть возможность указать правила (соответственно): border-top-color, border-right-color, border-bottom-color, border-left-color:

div
{
	border-top-color: #84cd1b;
}

Если возникла необходимость задать свой цвет для каждой из частей бордера, то нужно записать css-правило следующим образом (соблюдая очередность границ: сверху, справа, снизу и слева):

div
{
	border-color: #84cd1b #1E824C #ff8073 #f1c40f;
}

3. Ширина рамки border-width

Рассматриваемое правило позволяет задать толщину границы хтмл-тэга. Необходимо отметить, что если стиль границы не будет задан, то она отображаться не будет.

Формат записи

p
{
	border-width: 6px;
}

Для установки нужной толщины у частей границы, расположенных сверху, справа, снизу или слева, нужно прописать css-правила: border-top-width, border-right-width, border-bottom-width, border-left-width:

p
{
	border-top-width: 6px;
}

Если нужно для каждой части границы задать свою толщину, то можно записать вот так:

p
{
	border-width: 6px 2px 1px 3px;
}

4. Рамка одной строкой

Помимо записи отдельных частей стилей бордера существует также возможность их записи в одну строчку, что позволит оптимизировать css-код. Однако, такое задание применяется сразу ко всем четырем сторонам границы. Также следует помнить про очередность записи: толщина (ширина), стиль границы и ее цвет.

div
{
	border: 3px solid #84cd1b;
}

Если один из параметров границы присвоен не будет, то он принимает дефолтное значение (смотрите таблицы значений выше).

По аналогии с записью стиля для конкретных частей границы их также можно описать одной строкой:

a
{
	border-bottom: 3px solid #84cd1b;
}

5. Внешний контур outline

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

Чаще всего применяется для обозначения активности или выделения фокуса на hml-блоке: ссылке (<a>), кнопке формы (<button>, <input>). Следует отметить, что на аутлайн не оказывает влияния свойство скругления углов border-radius, то есть она в любом случае будет иметь девяностоградусные углы.

Как и бордер, характеризуется тремя величинами: стилем, цветом и толщиной.

5.1. Стиль внешнего контура outline-style

Аналогично пункту 1 (выше) задает оформление внешнего аутлайна некоторого блокового или инлайнового элемента. Также, как и бордер, является не наследуемым.

Формат записи

p
{
	outline-style: double;
}

5.2. Цвет внешнего контура outline-color

Данное правило упрвляет цветностью внешней рамки. Работает вкупе с предыдущим правилом.  Является не наследуемым.

Формат записи

p
{
	outline-color: #84cd1b;
}

5.3. Толщина внешнего контура outline-width

Позволяет задать толщину контура в разных единицах измерения. Также является не наследуемым правилом.

Формат записи

p
{
	outline-width: 4px;
}

Аналогично бордеру есть возможность задания данного правила одной строчкой. Формат написания будет точно таким же, за исключением названия самого свойства.

По результатом изучения этого материала станет более полное представление о возможностях линий границы и какое влияние они оказывают на позиционирование блока элемента относительно других на странице документа. Данная глава является очень важным «кусочком пазла» в общей «мозаике» фронтенд-разработки (верстки) сайтов.