Текст

При оформлении текста с помощью css чаще всего используют тег span. Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста. Однако, дополнительный смысл данному тегу добавляют с помощью классов.

Cвойство font-size задает размер шрифта. Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы M в данном шрифте.  Другие единицы измерения для задания размеров шрифта: Пиксели: 20px Пункты: 15pt Проценты: 80%.

Полужирность текста можно задавать с помощью свойства font-weight, которое имеет два основных значения: normal — обычное начертание; bold — полужирное начертание. На самом деле это свойство имеет много значений: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. Эти значения задают степень толщины шрифта, от самого тонкого, до самого толстого. Но большинство браузеров всё равно умеют отображать только два варианта толщины: обычный и полужирный. Поэтому и остальные значения свойства обычно не используют.

Начертание текста можно задавать с помощью свойства font-style. Его основные значения: normal — обычное начертание; italic — курсивное начертание. Это свойство имеет и другие значения, но их почти не используют.

Задать семейство шрифта можно с помощью свойства font-family. Можно задавать конкретное название шрифта: “Times New Roman“. А можно задавать желаемый тип шрифта, например: serif — шрифт с засечками; sans-serif — шрифт без засечек.

Цвет текста задаётся с помощью свойства color. Значение цвета можно задавать разными способами: Шестнадцатеричным кодом, например #FF9900. Ключевым словом: red. В RGB-формате: rgb(255, 255, 0).

Дополнительное оформление текста можно задать с помощью свойства text-decoration. Его значения: underline — подчеркивание; line-through — зачеркивание; overline — черта сверху; none — убирает вышеперечисленные эффекты. К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.

С помощью css можно управлять даже регистром символов: делать буквы строчными или прописными. Делается это с помощью свойства text-transform. Его значения: lowercase — все строчные; uppercase — все прописные; capitalize — каждое слово начинается с прописной; none — отменяет изменение регистра.

Браузер игнорирует множественные пробелы и переносы строк в HTML-коде. Изменить это поведение можно с помощью тега pre. Однако, с помощью CSS управлять пробелами и переносами можно более гибко. За это отвечает свойство white-space, значения которого: nowrap — отображает весь текст одной строкой без переносов; pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу pre; pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер; normal — режим по умолчанию.

Выравнивание текста по горизонтали задается с помощью свойства text-align. Значения свойства: left — выравнивание по левому краю; right — по правому краю; center — по центру; justify — по ширине.

Выравниванием текста по вертикали можно управлять с помощью свойства vertical-align. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера. У данного свойства много значений, но самые часто используемые: top — выравнивание по верхнему краю строки; middle — по середине; bottom — по нижнему краю; baseline — по базовой линии (значение по умолчанию).

Высотой строки или, правильнее, межстрочным интервалом можно управлять с помощью свойства line-height. Значение этого свойства можно задавать следующими способами: Множителем, например 1.5, 2. В процентах: 150%. С помощью любых других единиц измерения CSS: 12px, 2em. Ключевым словом normal, которое задает автоматический расчет высоты строки. Предпочтительнее задавать межстрочный интервал либо множителем, либо в относительных единицах измерения.

Примечание: Вы, наверное, уже много раз видели красивое пунктирное подчеркивание. Его используют для оформления ссылок и других динамических элементов. Технология следующая: Убираем обычное подчеркивание с помощью text-decoration. Задаем нужный цвет текста с помощью color. Добавляем декоративное подчеркивание с помощью свойства border-bottom. Также можно при наведении курсора скрывать такое подчеркивание с помощью псевдокласса :hover.
С помощью CSS можно имитировать теги sub и sup, которые применяются для создания нижних и верхних индексов. Делается это так: Используем свойство vertical-align со значением sub или super. Немного уменьшаем размер шрифта с помощью font-size.

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

Текст

В разметке HTML возможно написать любой символ Unicode, используя специальные ссылки-мнемоники: в виде слова, например, &название; или в числовом обозначении с использованием десятичного или шестнадцатиричного кода, например, à.

Примеры Unicode-символов:

©	©	©
α	α	α
¶	¶	¶

Есть специальный сервис, где можно найти и скопировать нужный символ.

Помимо букв шрифт может содержать и другие графические символы. Существуют инструменты, позволяющие собрать свой собственный шрифт из SVG-объектов. Их довольно много: fontcustom.com, icomoon.io/app, fontastic.me, glyphter.com и другие.

Подключение своего шрифта и присвоение ему имени:

Межсимвольное расстояние задается свойством letter-spacing. Браузер по умолчанию устанавливает межсимвольное расстояние автоматически согласно определенному значению у каждого шрифта. Значение по умолчанию соответствует letter-spacing: 0.Увеличение или уменьшение значения letter-spacing изменит расстояние между символами на заданную величину. Значение задаётся в px, em, pt или других единицах длины CSS. Например:  letter-spacing:-3px;

Правила переноса, управляет поведением символов, когда они,не помещаются по ширине в контейнер, и задает будут ли они переноситься на новую строку. Этим управляет свойство word-wrap, которое может принимает значения: normal и break-word. В случае normal слова переносятся на новую строку по обычным правилам (то есть по пробелам). А при значении break-word перенос производится браузером в тех местах, где слова перестают помещаться в контейнер (в текущем черновике спецификации CSS3 переименовано в overflow-wrap. Название word-wrap сейчас обозначено как «альтернативное» именование.).

Свойство text-indent устанавливает отступ для первой строки блока текста. С помощью этого свойства удобно делать красную строку в абзацах. Значение свойства может принимать положительное или отрицательное значение, задаётся в px, em, pt или других единицах длины CSS. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока.

Многоколоночная разметка CSS — замечательная возможность, позволяющая разбить блок с текстом на несколько колонок. Обычно очень длинные строки сложно читать: если приходится слишком долго перемещать взгляд с конца одной строки на начало другой, можно легко потерять нужную строку. Чтобы сэкономить место на экране, но при этом сделать текст читабельным, можно разбить один сплошной блок текста на несколько колонок, как это делается в газетах. Уже сейчас во всех популярных современных браузерах можно использовать многоколоночную разметку CSS.

• Свойство column-count принимает в качестве параметра целое число и делит блок текста на заданное число колонок, равных друг другу по ширине.
• Свойство column-width задаёт минимальную желаемую ширину колонки. Если свойство column-count ещё не было задано, браузер автоматически поделит текст на такое количество колонок, чтобы они уместились во всю доступную ширину. Значение свойства положительное и задаётся в px, em, pt или других единицах длины CSS. Следует отметить, что если одиночная строка может включать от 45 до 75 символов, чтобы быть читабельной, то для колонок текста рекомендуется придерживаться ширины, включающей 40-50 символов.
• Промежуток между колонками задается свойством column-gap. Единицы измерения тоже px, em, pt и другие. Рекомендованная ширина промежутка по умолчанию равна 1em.

В CSS за направление текста отвечает свойство direction, принимающее значения ltr (направление слева направо) и rtl (направление справа налево). Однако помимо направления текста свойство direction также влияет на позицию полосы прокрутки в блоке. Если попробовать задать для кириллицы или латиницы обратное направление текста (справа налево) direction: rtl;, мы увидим, что текст в блоке выровнялся наоборот, и полоса прокрутки блока сменила своё положение на противоположное. Но при этом сам текст не стал менять своё направление. Это произошло потому, что браузер автоматически задал тексту корректное направление, проанализировав используемые символы Unicode. Чтобы повлиять на это решение браузера существует свойство unicode-bidi, принимающее значения:

• normal — браузер самостоятельно определяет, как ему следует отображать текст на основе используемых символов Unicode;
• embed — переопределяет направление текста, располагая его согласно свойству direction(применяется, когда в блоке текст на двух разнонаправленных языках);
• bidi-override — переопределяет порядок символов в тексте согласно значению direction.

Также свойство direction влияет на порядок колонок в таблице, меняя его на соответствующее значение.

Свойство text-overflow позволяет определить, как будет выглядеть текст, если не поместится в контейнер. Оно принимает разные значения, но универсальными и работающими во всех современных браузерах являются clip и ellipsis. Значение clip задано по умолчанию, и при нём текст просто обрезается по размеру контейнера, а при ellipsis — обрезается и к концу строки добавляется многоточие. К сожалению, у этого свойства есть ограничения, которые делают его менее полезным: оно применимо только к однострочным текстам, а также к блокам, значение свойства overflow которых установлено в auto, scroll или hidden.

Свойство word-spacing задаёт расстояние между отдельными словами и строчными элементами. Значение может быть положительное или отрицательное и задаётся в px, em, pt или других единицах измерения CSS. Свойство word-spacing также можно использовать для задания отступов между блочно-строчными элементами, а также изображений, ведь изображения тоже являются строчными.

Фон

Цвет фона можно задать с помощью CSS-свойства background-color. Более подробно о цветах можно прочитать на странице W3C HTML Colors или в переводной статье о теории цвета на Хабре.

Фоновое изображение можно задать с помощью CSS-свойства background-image.  selector { background-image: url("адрес-картинки"); }  Отличные иконки Дениса Сажина.

По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat. У свойства 4 значения: repeat — повторять во всех направлениях. Это значение по умолчанию. repeat-x — повторять только по горизонтали. repeat-y — повторять только по вертикали. no-repeat — не повторять. Кроме того, есть два специальных значения round, – повторяющиеся картинки по краям блока обрезаться не будут, а равномерно растянутся или сожмутся по всей ширине, чтобы занять оставшееся пространство и  space – также влияет на обрезание частей картинки при нем части картинки тоже не обрезаются, но повторяющиеся фоновые картинки не сжимаются или растягиваются, а для компенсации ширины блока между ними добавляется пустое пространство. Например:  background-repeat: repeat round;  – означает, что по горизонтали картинки будут повторяться, как обычно, а по вертикале – будут сжиматься таким образом, что бы поместиться без обрезания.

Свойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y. X задаёт расположение по горизонтали, а Y по вертикали. В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях. В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях. Когда фоновое изображение больше блока, то оно обрезается. Управлять тем, какую часть изображения будет видно, также можно с помощью свойства background-position.  Также расположение фона можно задавать относительно любого угла блока, а не только от левого верхнего. Чтобы указать от какой стороны отсчитывать расположение фона, нужно перед значением координат задать ключевые слова: top, right, bottom или left. Например:  background-position: right 30px bottom 60px; /* справа 30px, снизу 60px */

Обычно фоновое изображение прокручивается вместе с содержимым блока.  С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании. Значение свойства: scroll — фон прокручивается  месте с содержимым. Это значение по умолчанию. fixed — фон не прокручивается, зафиксирован на одном месте.

Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:

Если какой-то компонент не указан, то берется значение по умолчанию.

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

Другой вариант это использование CSS3 в котором свойству background задаеться множество картинок через запятую, например:  background: url("img1.png") no-repeat 0 0, url("img2.png") repeat-x 50% 50%, url("img3.png");, при этом выше будет то изображение, которое находится раньше в списке. Значения других свойств для множественных фоновых изображений тоже задаются через запятую. Порядок значений должен соответстовать порядку фоновых картинок. Например так:

Повторяющийся фон, тот у которого repeat, repeat-x или repeat-y, часто используется для создания интересных декоративных эффектов. Например: стежки; зазубренные края; градиенты и тени (хотя градиенты и тени можно делать с помощью CSS. Но иногда, когда тень или градиент достаточно сложные, проще использовать полупрозрачный PNG). Самое главное при создании таких эффектов — выбрать картинку с нужным периодом. Она может быть очень маленькой и даст существенную экономию веса страницы.

Спрайт — это одно большое изображение, в котором содержится много маленьких, как бы карта изображений. Спрайты используются, чтобы снизить количество запросов на сервер. Каждая маленькая картинка — это отдельный запрос, а чем меньше запросов, тем лучше. Поэтому маленькие картинки «склеивают» в одну большую. Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть. (сайт для генерации спрайтов http://spritepad.wearekiss.com/)

Для изменения размера фона служит свойство background-size, которое принимает в качестве значения два аргумента: первый — это ширина фонового изображения, второй — его высота (аргумент необязательный). Если высота не указывается, то она определяется автоматически в зависимости от ширины и исходных пропорций. По умолчанию оба аргумента равны auto. Например:  background-size: 100px 200px; . Кроме того это свойство имеет два специальных значения: contain (при этом пропорции изображения сохраняются; изображению задаются максимально возможные размеры, при которых оно и по ширине, и по высоте полностью помещается в границы фона; изображение может не закрывать всю фоновую область блока, если пропорции изображения и блока разные)  и cover (при этом пропорции изображения сохраняются; изображению задаются минимально возможные размеры, при которых оно закроет всю фоновую область блока; если пропорции изображения и блока разные, то часть изображения обрезается).

Свойство background-origin задаёт расположение и размеры области отображения фонового изображения и принимает три значения: padding-box, border-box и content-box.

 

Значение по умолчанию — padding-box. При этом значении область отображения фонового изображения соответствует внутренней области блока, не включая рамки.

При content-box область отображения соответствует только области содержимого, не включая рамки и внутренние отступы.

При border-box область отображения соответствует полному размеру блока, включая и рамки. Фоновое изображение начинается от внешнего края блока и закрывается рамками, если они заданы.

Свойство background-clip управляет тем, как обрезается фон. Причём обрезаются не только фоновые изображения, но и фоновый цвет. У данного свойства есть следующие значения: border-box задано по умолчанию, при этом фоновое изображение совсем не обрезается; padding-box обрежет фон по внутреннему краю области рамки; content-box обрежет фон по краю области содержимого (аналогично к background-origin).

Рамка

Закруглять углы элементов можно с помощью свойства border-radius. Свойство задаёт радиус скругления углов в пикселях или процентах. Если у блока есть рамка, то скругляется и она. Свойство border-radius принимает от одного до четырёх аргументов.

Вы можете закруглять отдельные углы с помощью свойств: border-top-left-radius,border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

А ещё можно задавать разные горизонтальные и вертикальные радиусы скругления. Для этого нужно написать два значения через пробел в свойстве скругления угла. Первое значение задаёт радиус по горизонтали, второе — по вертикали:  border-top-right-radius: 30px 15px; – горизонтальный радиус 30px, вертикальный 15px.

Разные горизонтальные и вертикальные радиусы можно задавать и в свойстве border-radius. Для этого нужно использовать /, например:  border-radius: 10px / 5px; – горизонтальный радиус всех углов 10px, вертикальный 5px.

Семейство свойств border-image задаёт фоновое изображение для рамки блока. Свойство border-image-source задаёт путь к изображению рамки. По умолчанию картинкой заполнятся только углы рамки. При этом стоит отметить, что обычная рамка замещаеться рамкой взятой с картинки. Пример:  border-image-source: url("image.jpg");

Каждая рамка имеет 9 областей: 4 угла, 4 стороны и центральную область. Для заполнения этих областей браузер должен нарезать картинку для рамки на 9 частей. Когда браузер не знает, как это сделать, он просто размещает картинку по углам.

Свойство border-image-slice задаёт отступы от краёв картинки до четырёх линий, которые «разрезают» её на части, как на схеме справа. Если эти отступы небольшие, то получается «нарезка» из 9частей, которые затем размещаются в соответствующих областях рамки. Но если отступы слишком большие (больше половины картинки), то браузер не может получить 9 частей и располагает то, что отрезалось по углам.  Значение свойства можно задавать числом без единицы измерения (оно обычно обозначает пиксели) или в процентах (относительно размера самой картинки). Пример:  border-image-slice: 60;

С помощью border-image-slice можно задавать разные отступы линий разреза. Для этого нужно задавать значения через пробел в порядке: верх, право, низ, лево. Средняя часть картинки обычно не используется. Но если в значение свойства добавить ключевое слово fill, то средняя часть картинки будет отображаться в средней области рамки: она закроет собой фон блока, но не закроет содержимое. Пример: border-image-slice: 10 20 30 40 fill;

Свойство border-image-repeat задаёт способ заполнения фоном боковых сторон рамки (зелёные области на рисунке). У свойства четыре значения: stretch, repeat, space и round. Значение по умолчанию — stretch. При этом значении фоновые картинки растягиваются на всю длину боковых сторон. Если задано значение repeat, то фоновые картинки будут повторяться. При этом они могут обрезаться.  Значение round – устанавливает режим заполнения стороны рамки повторяющимися боковыми участками картинки. Но, в отличие от repeat, если в ширину стороны не вмещается целое число повторящихся кусочков, крайние части не обрезаются. Кусочки при этом равномерно растягиваются так, чтобы все они стали одного размера и заняли оставшееся место стороны рамки. Значении space имеет алгоритм похожий на round, только для компенсации оставшегося места кусочки картинки не растягиваются, а остаются прежней ширины, при этом между кусочками появляется дополнительное свободное пространство.

Можно устанавливать режим заполнения отдельно для горизонтальных и вертикальных сторон рамки. Например:  border-image-repeat: repeat stretch;

У блока должна существовать рамка определённой толщины border-width, тогда ему можно задать и фоновую картинку для рамки. Область, в которой будет отображаться эта картинка по умолчанию равна ширине рамки. Свойство border-image-width позволяет управлять шириной видимой области рамки-картинки, масштабировать её. Саму ширину рамки это свойство не меняет. Если значение этого свойства больше border-width, картинка рамки заползёт под содержимое, даже если не задано свойство fill. Ширина рамки-картинки задаётся в %, px, em или других единицах измерения. Также возможно значение auto, при котором ширина зависит от значения border-image-slice. Можно задавать разную ширину сторон. В этом случае значения перечисляются аналогично margin, padding в последовательности: верхнее, правое, нижнее, левое. Например:  border-image-width: 10px 20px 30px 40px;

Ещё одно свойство, относящееся к фоновому изображению рамки, border-image-outset -это свойство позволяет отодвинуть рамку за пределы элемента, но при этом одновременно немного масштабируя картинку (Отрицательные значения не поддерживаются!). Отступы рамок-изображений тоже можно задавать разные для каждой из сторон. Например:  border-image-outset: 10px 20px 30px 40px;

К сожалению, свойство border-radius не влияет на border-image, так что единственный способ сделать округлую рамку — использовать круглую картинку.

У рамок есть одна особенность: если рамка элемента широкая, а сам элемент имеет нулевую ширину и высоту, то стороны рамки становятся треугольными, вместо трапеций.

Типовой пример применения такой техники  — иконки сортировки в каталогах: треугольники, направленные вверх и вниз. Их выгодно делать с помощью рамок так как CSS-стрелкам можно легко менять пропорции, задавать разные цвета и размеры, обычно такие элементы для сортировки размечают с помощью ссылок.

 

Внешняя рамка

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

Синтаксис outline схож с border, но для внешней рамке нельзя задать параметры отдельных сторон. Пример: outline: 10px solid black;/* сплошная чёрная рамка толщиной 10px */ . Внешняя рамка всегда отображается снаружи элемента, не влияет на его размер и не занимает места, то есть отображается над другими элементами. С помощью свойства outline-offset можно изменять положение рамки (Положительное значение отодвигает рамку от внешнего края элемента, а отрицательное «втягивает» внутрь). У outline-style те же значения, что и у border-style. Кстати, есть интересные типы рамок ridge и groove, они создают объёмные рамки.

Тень

Тени создаются с помощью CSS-свойства box-shadow, данное свойство позволяет создавать сложные многокомпонентные тени. Свойство имеет следующий синтаксис:

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

Размытие не может быть отрицательным.

По умолчанию размер и форма тени такие же, как и у элемента, которому она принадлежит. Но размер тени можно изменить с помощью растяжения. При нулевом (или не указанном) растяжении размер тени такой же, как у элемента. При положительном растяжении размер тени становится больше размера элемента, а при отрицательном — меньше.

Пример:  box-shadow: 5px -10px 0 0 #34495e;  – задает тень смещенную вправо на 5 и вниз на 10.

Размытие и растяжение иногда используют друг с другом, это позволяет управлять насыщенностью тени. Внешний вид тени будет зависеть от соотношения величин размытия и растяжения:

• размытие есть, растяжение отрицательное — тень очень светлая;
• размытие есть, растяжения нет — тень обычная;
• размытие больше растяжения — тень темнее обычного;
• размытие меньше растяжения — тень очень темная.

Цвет тени задается с помощью любого цветового формата CSS. Если цвет тени не задан, то он берётся от цвета текста элемента с тенью.

Значение inset лучше размещать либо в самом начале свойства, либо в самом конце.

Если у тени ненулевой радиус размытия, то она автоматически становится полупрозрачой. Но иногда нужно сделать полупрозрачной тень без радиуса размытия, для этого можно использовать новый формат записи цветов в CSS — rgba.

Свойство box-shadow позволяет задавать одному элементу несколько теней. Для этого нужно перечислить значения теней через запятую. Тени, которые расположены в списке выше, будут перекрывать тени, которые расположены ниже. Например: box-shadow: 0 -5px 10px -3px #3498db, 0 5px 10px -3px #2ecc71

Ряд приемов визуализации при помощи тени:

Тень была видна только с одной стороны элемента, для этого нужно задать тени отрицательное растяжение и положительное размытие, а затем сместить тень в нужном направлении. Отрицательное растяжение сделает размытую тень меньше элемента, а смещение покажет край тени только с одной стороны. Подобный приём позволяет имитировать градиенты с помощью внутренних теней. Например:  box-shadow: inset 0 -30px 30px -30px #34495e;

С помощью множественных теней можно имитировать множественные рамки у элемента. Для этого нужно добавить элементу несколько теней с положительным растяжением и с нулевыми смещениями и размытием. Но настоящие рамки увеличивают размер элемента, а рамки-тени — нет. Поэтому надо следить, чтобы вокруг элемента было достаточно свободного пространства, иначе он может перекрыть соседние элементы. Например:  box-shadow: 0 0 0 5px #e74c3c, 0 0 0 10px #f1c40f, 0 0 0 15px #2ecc71;

Вот пример создания трех мерного кольца:

Текстовые тени

Тени для текста создаются с помощью CSS-свойства text-shadow. Оно очень похоже на box-shadow, рассмотренное выше, но имеет свои особенности:

• свойство text-shadow применяется к тексту;
• форма тени повторяет форму текстовых символов;
• можно управлять смещением тени, её цветом, а также размытием;
• нельзя управлять растяжением текстовой тени;
• можно создавать множественные тени.

Синтаксис задания свойства: text-shadow:30px 30px 1px #111111; , где первый параметр обязателен и задаёт смещение тени по горизонтали относительно текста (Положительное значение этого параметра сдвигает тень вправо, отрицательное — влево). Второй параметр тоже обязателен и задаёт смещение тени по вертикали (Положительное значение сдвигает тень вниз, отрицательное — вверх). Третий параметр необязателен и задаёт радиус размытия тени (Если этот параметр не задан, то по умолчанию устанавливается равным 0. Чем больше значение параметра, тем сильнее тень размывается и становится светлее. Отрицательные значения не допустимы). Последний параметр необязателен и задаёт цвет тени, если цвет тени не указан, то он совпадает с цветом текста.

Смещение задаётся в абсолютных и относительных единицах измерения: px, em, pt и других. Цвет задаётся в любом цветовом формате, может быть полупрозрачным.

У текста может быть задано сразу несколько теней. Для этого определения теней нужно перечислить через запятую. При этом тени распределяются по правилу: первая тень в списке — самая верхняя, последняя в списке — самая нижняя. С помощью множественных теней можно добиваться необычных результатов. Например, можно добавить тексту эффект «вдавленности» с помощью двух однотонных теней: более тёмная смещается немного вверх и влево, а более светлая — вниз и вправо.

Например:  text-shadow: -1px -1px 1px #1e181c, 2px 2px 1px #52424d;

Тени смещены в одну сторону. Нижняя тень смещена чуть сильнее и её цвет отличается от цвета фона, а верхняя тень смещена слабее и цвет её совпадает с цветом фона. Получается интересный эффект обводки. Такой эффект хорошо подходит для заголовков с винтажным стилем. Например:  text-shadow: 2px 2px 0 #e5d4c0, 4px 4px rgba(0, 0, 0, 0.2);

Линейные градиенты

Градиент цвета – это плавный переход от одного цвета к другому.  Градиенты описываются внутри CSS-свойства background-image. Простейший градиент можно описать таким образом: background-image: linear-gradient(yellow, green);

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

Направления градиента задаются с помощью ключевых слов: to top, to bottom, to left,  to right. Например:  background-image: linear-gradient(to right, yellow, green); Градиенты можно направлять по диагонали, из угла в угол. Для этого нужно комбинировать top, bottom и left, right. Например, градиент, идущий из левого нижнего в правый верхний угол:  background-image: linear-gradient(to right top, yellow, green);

Направление линейного градиента можно задавать и в виде произвольного угла, например, 245°. Направление в градусах задаётся с помощью единицы измерения deg. Можно задавать положительные и отрицательные углы. Углы градиента отсчитываются так: 0deg соответствует 12 часам, а отсчёт угла идет по часовой стрелке. В случае, если угол задан отрицательным значением, например, -90deg, то он отсчитывается против часовой стрелки.

Например:  background-image: linear-gradient(90deg, yellow, green);

Градиенты, заданные с помощью градусов, не зависят от формы контейнера, а диагональные градиенты зависят. Диагональные градиенты всегда остаются привязанными к своим углам.

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

Делается это с помощью так называемых колорстопов, которые записываются сразу после значений цветов, например, red 0%, yellow 100%. Колорстоп указывает положение цвета в градиенте, его можно задавать в процентах, пикселях и других единицах. Колорстоп задаёт то место, где будет располагаться центральная (самая насыщенная) часть цвета. Например:  background-image: linear-gradient(to bottom, #ffffff 25%, #1199ff 50%, #0039a6 75%, #d52b1e 100%);

Позиция цвета (или колорстоп) задаёт расположение центральной части цвета, ту точку, от которой начинается переход в другой цвет. А если задать для соседних цветов одну и ту же позицию, то в этом случае получится резкий переход цветов, так как они оба будут «вытекать» из одной точки в противоположных направлениях. Например:  yellow 50%, green 50% – со средины с резкой линии будут расходиться два цвета.

Цветовые переходы градиента можно также задавать в пикселях. Работают они по аналогии с процентными переходами. Отличие заключается в том, что процентные переходы зависят от размера элемента, а переходы в пикселях — нет.

В CSS вы можете задать любой цвет с полупрозрачностью или даже задать прозрачный цвет это делается с помощью rgba-значений цветов, в которых помимо трёх цветовых компонент присутствует прозрачность или задать с помощью ключевого слова transparent.

Помимо обычных градиентов существуют и повторяющиеся. Их синтаксис полностью совпадает с синтаксисом обычных, только вместо linear-gradient пишется repeating-linear-gradient. Повторяющийся градиент хорош для создания полосатых фонов или фонов-орнаментов средствами CSS.  Есть несколько тонкостей, которые нужно знать про повторяющиеся градиенты: Размер фрагмента определяется по последнему колорстопу. Чтобы повторение было видно, последний колорстоп должен быть меньше, чем размер элемента с градиентом. Если первый и последний цвета градиента различаются, то будут видны резкие границы между повторяющимися фрагментами. Чтобы от них избавиться, нужно задавать одинаковый первый и последний цвета. Колорстопы в повторяющихся градиентах обычно задают в пикселях, но можно использовать и проценты.

Кстати, вместо повторяющихся градиентов можно использовать обычные градиенты в сочетании со свойствами background-size и background-repeat. Но повторяющиеся градиенты удобнее и требуют меньше кода.

CSS-градиенты — это особые фоновые изображения, и на них действуют все свойства для управления фонами: background-position, background-size, background-repeat.

В отличие от обычных изображений градиенты не имеют «собственного» размера, и их размер равен размеру элемента, в фоне которого они расположены. Конечно, такое поведение не подходит для построения орнаментов. К счастью, мы можем задать размер для градиента с помощью свойства background-size. Задав размер для градиентов в фоне, мы получим фрагмент орнамента, повторением которого сможем управлять с помощью background-repeat.

Вернёмся к множественным фонам. Вы можете не только задавать несколько фоновых изображений, но и управлять размерами, расположением и повторением каждого из них по отдельности. Чтобы задавать разные значения свойств для множественных фонов, вам нужно просто перечислять эти значения через запятую в том же порядке, в каком вы записали изображения. Такая запись: background-size: 100px 200px; Задаст всем фоновым изображениям один и тот же размер. А такая запись: background-size: 100px 200px, 200px 300px, 300px 400px; Задаст всем фоновым изображениям разные размеры.

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

Стильные кнопки:

Радиальный градиент

Фрагмент орнамента, или одну чешуйку, создадим с помощью множественных радиальных градиентов. Первый градиент создаст чешуйки одного цвета:

radial-gradient(circle at 50% 100%, white 71%, transparent 71%, transparent)

Но это еще не полноценная чешуя, нужно добавить два чешуйки другого цвета. Для этого добавим два градиента выше первого:

radial-gradient(circle at 100% 150%, silver 40%, transparent 40%, transparent)

radial-gradient(circle at 0 150%, silver 40%, transparent 40%, transparent)

И ниже первого:

radial-gradient(circle at 100% 50%, silver 49%, transparent 50%, transparent)

radial-gradient(circle at 0 50%, silver 49%, transparent 50%, transparent)

После этого зададим размер 50px 25px фрагменту чешуи и размножим