Способ 2: использование градиентов
Мы можем использовать несколько фоновых изображений и расположить их соответствующим образом, чтобы создать эффект пунктирной границы. Это также может быть сделано с помощью , но не так много улучшений из-за использования повторяющегося градиента, поскольку нам нужно, чтобы каждый градиент повторялся только в одном направлении.
Плюсы:
- Масштабируется и может адаптироваться, даже если размеры контейнера являются динамическими.
- Не использует никаких дополнительных псевдоэлементов, что означает, что они могут быть сохранены для любого другого потенциального использования.
Минусы:
- сравнительно ниже, и это не нужно, если вы хотите поддерживать IE 9-. Даже библиотеки, такие как CSS3 PIE, не поддерживают создание шаблонов градиента в IE8-.
- Не может использоваться, когда задействован , потому что фон не изгибается на основе . Вместо этого они обрезаются.
Второй способ
Второй способ заключается в использовании свойства CSS3 border-image. Свойство CSS3 border-image позволяет нам заполнить рамку изображением, а также градиентом CSS3. Большинство браузеров поддерживают border-image: Chrome, Internet Explorer 11, Firefox, Safari и Opera нормально выводят border-image.
Однако следует отметить, что border-image будет работать только для прямоугольных фигур или блоков. Это означает, что добавление border-radius будет отменять вывод border-image.
Ниже приведена спецификация свойства border-image:
border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;
<source> это путь, который задает изображение, используемое в рамке. При этом мы заполним его с помощью CSS3 Gradient. Для достижения такого же вида, что и в предыдущих примерах, мы применяем CSS3 Gradient в пределах border-image следующим образом:
.box{
width: 250px;
height: 250px;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottombottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
border-image не выведет ничего, если мы не зададим ширину рамки. Так что, как вы можете видеть выше, мы добавляем ширину рамки 20 пикселей с прозрачным цветом. Затем мы устанавливаем значение для border-image и linear-gradient вместе с вендорными префиксами для ранних версий Webkit и Firefox.
Добавление border-image-slice устанавливает внутреннее смещение содержимого image-border. Это свойство необходимо для отображения градиента полностью по всему блоку. Смотрите приведенный ниже пример:
Результат
HTML:
<div class="box"></div>
CSS:
.box{
width: 250px;
height: 250px;
margin: auto;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
Этот метод обеспечивает большую гибкость, чтобы настроить градиент в каждом из возможных направлений: слева направо, сверху вниз, по диагонали или под углом. Ниже приведены некоторые примеры:
Слева направо
Результат
HTML:
<div class="box"></div>
CSS:
.box{
width: 250px;
height: 250px;
margin: auto;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
Диагональный градиент
Результат
HTML:
<div class="box"></div>
CSS:
.box{
width: 250px;
height: 250px;
margin: auto;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
Вадим Дворниковавтор-переводчик статьи «How To Create CSS Gradient Border Colors»
Создание полупрозрачного фона в CSS
Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.
Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.
Пример создания полупрозрачного блока:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
body {
background: url("https://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
background-size: 10% auto;
}
div {
opacity: 0.7;
background: #717ceb; /* Цвет фона */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Так выглядит полупрозрачный блок.</div>
</body>
</html>
Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.
В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.
Пример задания прозрачного фона:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rgba</title>
<style>
body {
background: url("https://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
background-size: 20% auto;
}
div {
background: rgba(60, 150, 250, 0.7); /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Прозрачный фон блока и непрозрачный текст.</div>
</body>
</html>
Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!
РМРимма Михайловаавтор
Свойство CSS background-clip
Это свойство указывает, насколько фон выступает за пределы области контента. Это свойство похоже по своей функции на , но в отличие от него не изменяет размер фона, а обрезает его края. Кроме того, свойство влияет не только на фоновое изображение (), но и на заливку ().
В качестве значений используются следующие ключевые слова:
- (значение по умолчанию) — фон выступает до внешнего края границы (border) элемента.
- — фон выступает до внешнего края поля отступа (padding) элемента.
- — фон не выступает за пределы области контента элемента.
Сравните свойства CSS background-clip и background-origin на примерах.
Смягчение градиентов
При построении градиентов иногда возникает проблема слишком резких и заметных переходов, а ведь вся суть градиента в плавности. Такие градиенты надо смягчать, по-английски это называется Easing Gradients.
Особенно хорошо это заметно на градиентах от чёрного к прозрачному, которые добавляют поверх изображения для улучшения читаемости надписи.
Изображение: rocknwool / Unsplash / Александр Кароза
Решить проблему жёстких переходов можно, добавив промежуточные точки в градиент, а также сместив точки градиента в более подходящее место.
Изображение: Skillbox Media
Однако этот метод очень неудобный и долгий. К счастью, в Figma есть плагин Easing Gradients, который позволяет смягчать градиенты автоматически. После его установки нужно выделить фигуру и запустить плагин. В появившемся окне выберите Curve и Easy In Out, после чего нажмите Apply. Если вариант Easy In Out не устраивает, то в окне плагина можно менять настройки.
Изображение: Skillbox Media
Если же необходимо смягчить градиент быстро, то существует второй плагин с похожим названием Easing Gradient, только без s на конце. После установки выделите фигуру и запустите плагин. Поскольку он не открывает окно, то получается быстрее, однако этот быстрый метод работает на градиентах только с двумя цветами.
Также для смягчения градиентов с дальнейшим экспортом в CSS используют веб-ресурс Easing Gradients, где в простом редакторе можно смягчить двухцветный градиент.
Свойство CSS background-color
Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:
HEX или HEX с альфа-каналом
НЕХ (hexadecimal) — обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два — зеленую, а два последних — синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв — это шестнадцатеричное число.
Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 — полностью прозрачный, ff — полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.
RGB или RGBa
Цвет можно задать при помощи функций CSS и . Синтаксис предельно простой — значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции указывается четвертый параметр — прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).
HSL или HSLa
HSL — расшифровывается как Hue — тон, Saturation — насыщенность и Lightness — светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате — и . В качестве аргументов обеих по порядку указываются:
- hue — расположение тона на цветовом колесе (от 0 до 360)
- saturation — насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% — серый, а 100% — полный цвет.
- lightness — светлота или яркость, где 0% — максимально темный (черный), 50% — нормальный, 100% — максимально светлый (белый)
- alpha (только для ) — прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 — полностью прозрачный, 100% или 1 — полностью непрозрачный).
HTML-цвета
Цвет фона элемента можно задать при помощи его названия на английском языке. Всего 147 вариаций от банальных и до экзотических, типа или . Названия указываются в одно слово без пробелов. Регистр не учитывается.
Ключевые слова
Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:
- — устанавливает в качестве цвета фона дефолтное значение, т.е. transparent
- — задает цвет фона как у родительского элемента
- — делает фон элемента прозрачным
- — переменная, значение которой соответствует значению свойства текущего элемента, а если оно не задано, используется родительского элемента.
Шаг 2 — Создайте CSS — для этого примера требуется 4 основных шага
-
Определите источник изображения границы:
-
Необязательный — Определите ширину границы изображения:
Значение по умолчанию — 1. Его также можно установить с помощью значения пикселя, процентного значения или другого кратного числа (1x, 2x, 3x и т. Д.). Это отменяет любые набор.
-
Определите срез изображения границы:
В этом примере толщина верхней, правой, нижней и левой границ изображений составляет 2 пикселя, и за их пределами нет зазора, поэтому значение нашего среза равно 2:
Срезы выглядят следующим образом: 2 пикселя сверху, справа, снизу и слева:
-
Определите border-image-repeat:
В этом примере мы хотим, чтобы шаблон равномерно повторялся вокруг нашего div. Итак, выбираем:
Написание стенографии
Вышеуказанные свойства могут быть установлены индивидуально или сокращенно с помощью border-image:
Метод 3: Box Shadows
Мы можем создать небольшую полосу (в форме тире), используя псевдоэлементы, а затем создать несколько ее версий , чтобы создать рамку, как в следующем фрагменте.
Если черта имеет квадратную форму, то одного псевдоэлемента будет достаточно, но если это прямоугольник, нам понадобится один псевдоэлемент для верхних + нижних границ и другой для левых + правых границ. Это связано с тем, что высота и ширина черты на верхней границе будут отличаться от левой.
Плюсы:
- Размеры черточки можно контролировать, изменяя размеры псевдоэлемента. Интервал можно контролировать, изменяя расстояние между каждой тенью.
- Очень уникальный эффект может быть получен путем добавления разного цвета для каждой тени блока.
Минусы:
- Поскольку мы должны вручную устанавливать размеры черты и интервал, этот подход не годится, когда размеры родительского блока являются динамическими.
- IE8 и ниже не . Однако это можно преодолеть с помощью таких библиотек, как CSS3 PIE.
- Может использоваться с , но их расположение было бы очень сложно найти точки на окружности (и, возможно, даже ).
Резюме
Добавление фона и градиентов на наши страницы позволяет нам раскрасить фасад дизайна. Эти функции также помогают определить, как сгруппирован контент и улучшить макет наших страниц в целом.
Кратко, в этом уроке мы рассмотрели следующее:
- как добавить цвет фона и фоновое изображение к элементам;
- линейные и радиальные градиенты и их настройка;
- как задать несколько фоновых изображений для одного элемента;
- новые свойства CSS3, которые позволяют менять размер, площадь поверхности и область позиционирования фоновых изображений
Добавление цвета фона, градиентов и изображений приносит немало возможностей для улучшения общего дизайна наших веб-сайтов. Вскоре мы обсудим, как семантически добавлять изображения (отдельно от фоновых изображений) для наших страниц. Но перед этим давайте взглянем на то, как семантически создавать списки.
CSS радиальные градиенты
Радиальный градиент определяется его центром.
Для создания радиального градиента необходимо также определить по крайней мере два цветовых ограничителя.
Синтаксис
background: radial-gradient(shape size at position, start-color, …, last-color);
По умолчанию форма имеет эллипс, размер — самый дальний угол, а положение — центр.
Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)
В следующем примере показан радиальный градиент с равномерно раскрытием цветовых остановок:
#grad { background: radial-gradient(red, yellow, green);}
Радиальный градиент-по-разному пробелом останавливается цвет
В следующем примере показан радиальный градиент с разными интервалами цвета:
Линейный градиент
Для примера рассмотрим такой блок:
XHTML
<div class=»border-gradient1 «>
Пример
</div>
|
1 |
<div class=»border-gradient1 «> Пример </div> |
Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:
CSS
.border-gradient1 {
width:80px; /**ширина блока**/
padding:20px 40px; /**внутренние отступы**/
text-align:center; /**выравнивание по центру**/
color:#000; /**цвет текста**/
}
|
1 |
.border-gradient1 { width80px;/**ширина блока**/ padding20px40px;/**внутренние отступы**/ text-aligncenter;/**выравнивание по центру**/ color#000;/**цвет текста**/ } |
Теперь нам нужно задать толщину рамки и её тип:
border: 10px solid transparent;
Для задания градиента допишем свойство border-image в css файле:
border-image: linear-gradient(#0B0E7F , #0B95DD);
Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:
-moz-border-image: -moz-linear-gradient(#0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(#0B0E7F , #0B95DD);
И последнее зададим CSS свойство:
border-image-slice: 1;
Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:
CSS
.border-gradient1 {
border: 10px solid transparent;
border-image: linear-gradient(#0B0E7F , #0B95DD);
-moz-border-image: -moz-linear-gradient(#0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(#0B0E7F , #0B95DD);
border-image-slice: 1;
}
|
1 |
.border-gradient1 { border10pxsolidtransparent; border-imagelinear-gradient(#0B0E7F,#0B95DD); -moz-border-image-moz-linear-gradient(#0B0E7F,#0B95DD); -webkit-border-image-webkit-linear-gradient(#0B0E7F,#0B95DD); border-image-slice1; } |
Вот результат работы кода:
Пример
Свойство CSS background-size
Свойство определяет размер (масштаб) фонового изображения или градиента. В качестве значений можно использовать либо ключевые слова ((дефолтное значение), , ), либо относительные (%) или абсолютные (px) величины.
Если используются ключевые слова:
- означает, что фоновая картинка должна покрывать всю площадь элемента, даже если для этого ее нужно растянуть или обрезать по одному краю.
- означает, что фоновая картинка должна полностью поместиться в размеры элемента, даже если часть его площади будет не покрыта ей.
- означает, что размер изображения будет рассчитан браузером в зависимости от его размера и соотношения сторон.
Отступы в CSS — cинтаксис CSS-свойств padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin:
margin: 50px;
Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
margin: 10px 20px 50px 100px;
Где:
- 10px — отступ сверху CSS;
- 20px — отступ справа CSS;
- 30px — отступ снизу CSS;
- 40px — отступ слева CSS.
Также можно установить отступ слева CSS и другие направления отдельно:
margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
Примечание: Можно использовать для определения отступа px, pts, cm и т.д.
Свойство CSS background-attachment
При помощи в CSS описывается положение фонового изображения относительно вьюпорта (видимой области экрана). В качестве значения этого свойства используются следующие ключевые слова:
-
— значение по умолчанию, картинка зафиксирована в пределах элемента, который движется во время скролла вьюпорта (надеюсь, эврисинг понятно
- — картинка зафиксирована в пределах вьюпорта, даже не смотря на то, что элемент, в котором она находится, движется при скролле
- — картинка скроллится внутри элемента.
Осознаю, что сказанное выше похоже на кашу из слов, но я старался как мог. Проще всего проиллюстрировать свойство на примерах.
Метод 2: Использование градиентов
Мы можем использовать несколько фоновые изображения и расположите их соответствующим образом, чтобы создать эффект пунктирной границы. Это также можно сделать с помощью но особого улучшения нет из-за использования повторяющегося градиента, поскольку нам нужно, чтобы каждый градиент повторялся только в одном направлении.
Плюсы:
- Масштабируемость и возможность адаптации, даже если размеры контейнера динамические.
- Не использует никаких дополнительных псевдоэлементов, что означает, что они могут быть отложены для любого другого потенциального использования.
Минусы:
- Браузер поддерживает линейные градиенты сравнительно меньше, и это не проблема, если вы хотите поддерживать IE 9-. Даже библиотеки, такие как CSS3 PIE, не поддерживают создание шаблонов градиента в IE8-.
- Не может использоваться, когда участвует, потому что фон не изгибается в зависимости от . Вместо этого они обрезаются.
Направление градиента border gradient
Чтобы наш градиент для рамки шел не сверху вниз, а например, слева направо или по диагонали мы можем задать для него направление при помощи дополнительных параметров.
При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.
-moz-border-image: -moz-linear-gradient(left, #0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(left, #0B0E7F , #0B95DD);
В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
Пример для border gradient слева направо:
CSS
.border-gradient1 {
border: 10px solid transparent;
border-image: linear-gradient(to right, #0B0E7F , #0B95DD);
-moz-border-image: -moz-linear-gradient(left, #0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(left, #0B0E7F , #0B95DD);
border-image-slice: 1;
}
|
1 |
.border-gradient1 { border10pxsolidtransparent; border-imagelinear-gradient(toright,#0B0E7F,#0B95DD); -moz-border-image-moz-linear-gradient(left,#0B0E7F,#0B95DD); -webkit-border-image-webkit-linear-gradient(left,#0B0E7F,#0B95DD); border-image-slice1; } |
Пример
Чтобы задать градиент для рамки по диагонали используем следующий код:
CSS
.border-gradient1 {
border: 10px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #DC2903 , #F4F955, #0625F9);
-webkit-border-image: -webkit-linear-gradient(top left, #DC2903 , #F4F955, #0625F9);
border-image: linear-gradient(to bottom right, #DC2903 , #F4F955, #0625F9);
border-image-slice: 1;
}
|
1 |
.border-gradient1 { border10pxsolidtransparent; -moz-border-image-moz-linear-gradient(topleft,#DC2903,#F4F955,#0625F9); -webkit-border-image-webkit-linear-gradient(topleft,#DC2903,#F4F955,#0625F9); border-imagelinear-gradient(tobottomright,#DC2903,#F4F955,#0625F9); border-image-slice1; } |
Пример
Так же направление градиента можно задавать в градусах:
border-image: linear-gradient(30deg, #0E9ADF, #F4F955 , #0625F9 );
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
- — фоновый рисунок прилеплен к левой стороне элемента;
- — фоновый рисунок расположен в центре оси x;
- — фоновый рисунок прилеплен к правой стороне элемента.
div {
background-position-x: left;
}
Ключевые слова для вертикального позиционирования
- — фоновый рисунок прилеплен к верхней стороне элемента;
- — фоновый рисунок расположен в центре оси y;
- — фоновый рисунок прилеплен к нижней стороне элемента.
div {
background-position-y: bottom;
}
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */
Значения можно менять местами — они будут работать так же.
Примеры выравнивания фона с помощью background-position
Если вы установили повтор фона с помощью свойства , то будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
div {
background-position: 10px 25px;
}
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
div {
background-position: right 15px bottom 40px;
}
Здесь ключевые слова и говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, — это расстояние между фоном и правой стороной элемента, а — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Свойство margin или внешние отступы в CSS
Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:
margin-top | margin-right | margin-bottom | margin-left: <значение>|auto|inherit
Как уже упоминалось выше внешним отступом является расстояние от границы текущего элемента до границы соседнего элемента, либо, если соседних элементов нет, до внутренней границы родительского контейнера.
Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:
p {
margin-left: 20px;
}
h1{
margin-right:15%;
}
Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера. Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.
В качестве значений внешних отступов допустимо применять отрицательные величины:
p{
margin-left:-20px;
}
Если при положительных значениях отступов соседние элементы отодвигаются, то при отрицательном значении соседний блок наедет на элемент для которого мы задали такой отрицательных отступ.
Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента web-страницы:
margin: <отступ 1> ]]
Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.
Альтернативные методы
Word-break
Определяет, как происходит разрыв строки, когда текст достигает ее конца и переполняет родительский контейнер.
- normal: значение по умолчанию (перенос строки возможен только при явном его указании, например при помощи тега <br>;
- break-all: во избежание переполнения родителя последнее слово разбивается с переносом на новую строку (не применимо к текстам на китайском, японском и корейском языках);
- keep-all: действует как normal, но для китайского, японского и корейского языков слова не переносятся;
- break-word: во избежание переполнения блока остающиеся целыми слова разбиваются произвольно при отсутствии более подходящего места для переноса строки.
В отличие от text-orientation, свойство word-break поддерживается всеми браузерами, включая все версии Internet Explorer.
Создание вертикального текста с помощью свойства word-break
Для этого потребуется уменьшить ширину контейнера до 0 пикселей. Это приведет к тому, что все слова будут разбиты на буквы и выстроятся вертикально. В этом случае следует также установить свойство white-space для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.
<div class="block"> <p>Образец текста</p> </div>
.block {
margin: auto;
color: #fff;
background: #000;
width: 0;
padding: 0 10px;
word-break: break-all;
}
Word-wrap/overflow-wrap
Позволяет разбивать длинные слова и переносить их на следующую строку и имеет полную поддержку браузерами. В отличие от word-wrap, альтернативное свойство overflow-wrap пока только частично воспринимается IE.
- normal: перенос строк осуществляется при явном указании, например с помощью тега <br>;
- break-word: позволяет автоматически разрывать слова для переноса в произвольной точке;
- initial: устанавливает значение по умолчанию;
- inherit: передает значение свойства от родительского элемента дочернему.
Создание вертикального текста свойством word-wrap
Этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break. Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Это позволит нормально различать слова.
Тег br
Самый примитивный метод достижения вертикальной ориентации текста — использование тегов <br>. Однако этот метод не очень практичен, и его не следует использовать, если строка текста слишком длинная.
Обертывание в тег span
Еще один популярный метод — обернуть каждую букву текста в тег span и с помощью CSS назначить им display: block. Как и использование тега <br>, этот способ не очень удобен для больших текстовых строк.
Использование JavaScript
Вместо двух предыдущих методов лучше использовать JavaScript для динамического добавления оболочки из тегов вокруг каждой буквы вместо того, чтобы делать это вручную. В этом случае текст разбивается на массив, и каждый его элемент оборачивается тегом span.
