Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow
является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow
, так что в этом браузере мы никаких красивостей не увидим.
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
Текст
Контурный текст
Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура
HTML5
CSS3
IE 9
IE 10+
Cr
Op
Sa
Fx
Текст
Контурный текст
Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.
Пример 3. Тень для добавления трёхмерности
HTML5
CSS3
IE 9
IE 10+
Cr
Op
Sa
Fx
Текст
Выделить всё… Затем выделить часть
Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.
Во-первых, надо использовать , чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки. Это позволит CSS узнать о клике по HTML-элементу.
Теперь немного CSS.
Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство , а затем, когда фокус переместится на этот элемент, переключиться на «обычный» , чтобы текст можно было выбирать по частям. Выбор времени переключения — дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от не будет никакого эффекта, т.к. оно успеет сменить значение на . Поможет решить проблему .
CSS-свойство можно анимировать. Оно дискретно анимированное, это означает, что нет постепенной интерполированной анимации, по истечении указанного времени происходит немедленный переход от одного состояния к другому. Поэтому, можно использовать , чтобы отложить изменение поведения выделения текста до 100 миллисекунд после передачи фокуса HTML-элементу.
See this code Select All… Then Select Some on x.xhtml.ru.
Форматы задания цветов в CSS
Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:
- 1. При помощи кодового значения цвета хтмл.
Например:
color: black;
где black – это черный цвет html.
Примеры конкретных значений цветов HTML и CSS смотрите ниже.
- 2. Задание цвета в шестнадцатеричном коде:
Например:
color: #000000;
Где #000000; — это код черного цвета.
Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.
Например:
#ffffff – это код белого цвета
Его можно записать так: #fff
- 1. Задание цвета в формате rgb
Данный формат представляет собой набор трёх числовых значений от 0 до 255.
Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки
R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего
В CSS это выглядит так:
сolor: rgb (0, 155, 0);
Где 0, 155, 0 – это код зелёного цвета.
Таблица, в которой представлены основные цвета ргб, приведена ниже
- 4. Задание цвета при помощи формата rgba
Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность
Например:
color: rgba (89, 107, 108, 0.5);
Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.
Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный
В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка
border-color
Цвет рамки можно задавать несколькими способами:
- словом – названием предустановленного цвета на английском языке – red, green, pink и т.д.;
- с помощью шестнадцатеричного числа, например #ff0099;
- с помощью RGB-модели – rgb (интенсивность каждого из цветов выражается числом от 0 до 255 или в процентах; значения разделяются запятыми).
- Посредством RGBA-модели, при которой четвертый параметр цвета – степень его прозрачности.
Цвет по умолчанию – black (черный). Установка значения transparent (border-color: transparent) означает полностью прозрачную рамку.
Примеры записи цвета:
Глупые вопросы, чтобы заставить вас задуматься
-Почему птицы качают головой при ходьбе?
-Если никто не купит билеты в кино, будут ли его показывать?
-Когда в море ударяет молния, почему не умирают все рыбы?
-Можно ли надуть воздушный шар под водой?
-Почему они взимают с нас дополнительную плату, если мы хотим, чтобы в еде, которую мы заказывали, был какой-то дополнительный ингредиент, но если мы что-то забираем, цена не снижается?
-Почему в воде морщатся только кончики пальцев и ступни, а никакая другая часть — нет?
-Как вы помещаете воздух в пузырчатую пленку?
-Когда человеку дается право владеть участком земли, владеет ли он этим участком земли на всей его глубине до центра земли?
-Если кто-то исчезает без следа или доказательств, как вы узнаете, что он пропал?
-Почему, если пиццы круглые, они приходят в квадратной коробке?
-Если скорая помощь идет, чтобы спасти кого-то и наезжает на другого человека, останавливается ли она, чтобы помочь человеку, который ее ранил?
-Почему в инструкции к лекарствам сказано, что «взрослые» — это возраст от 12 лет и старше, а на самом деле взрослый возраст — 18 лет?
-Почему клей не сохнет внутри бутылки?
-Почему мы называем апельсины апельсинами, если на самом деле многие из них желтые?
-Почему солнце осветляет тон наших волос, но затемняет кожу?
-Если употребление десерта перед едой разрушает ваш аппетит к еде, разве это не значит, что употребление еды в первую очередь испортит ваш аппетит к десерту?
-Почему гинеколог и уролог выходят из комнаты, пока мы раздеваемся, если они все равно видят нас голыми?
-Почему, когда мы напеваем и закрываем нос, звук прекращается? Люди издают этот звук носом или ртом?
-Если все страны мира в долгах, куда делись все эти деньги?
-Почему, когда мальчика называют в честь его отца, они говорят «младший», а девочку, названную в честь его матери, называют просто его именем?
-Почему мы употребляем выражение «вы едите как птица», если каждый день птицы съедают еду на свой вес?
-Если практика ведет к совершенству, но никто не совершенен, тогда зачем практиковаться?
-Почему час с самым медленным движением называется «часом пик»?
-Если вы родились 29 февраля, значит ли это, что ваш день рождения в четыре раза медленнее других?
-Насколько важным должен быть человек, чтобы его смерть считалась покушением, а не убийством?
-Почему люди используют выражение «Я спал как младенец», когда на самом деле младенцы просыпаются каждые два часа?
-Люди, которые заикаются, тоже заикаются в уме, когда думают?
-Почему в холодильнике свет, а в морозилке нет?
-Кто закрывает дверь автобуса, когда выходит водитель?
-Почему мы до сих пор называем партии отправлениями, если мы делаем их самолетом или сушей?
-В чем смысл жизни?
-Почему большинство спидометров показывают скорость не менее 210 километров в час или более, если движение с такой скоростью запрещено?
-Если на упаковке жевательной резинки указано 10 калорий в штуке, это от того, что вы ее проглотили или жевали?
Новый инструмент для решения поставленной задачи
Среди свойств стилевых таблиц css3 появилось новое, имя которому -webkit-text-stroke. Названное свойство работает только в браузерах, созданных на движке Webkit. А значит, к сожалению, оно не будет отображаться в Firefox и Internet Explorer.
Хочу вас сразу предупредить, что текущий инструмент находится в так называемой экспериментальной стадии. Его вы не найдете даже в спецификациях W3C. Хотя ранее он был описан под наименованием text-outline, а после удален из документации.
Работать с -webkit-text-stroke достаточно просто, так как он функционирует как и border. Для установки определенного цвета к указанному выше названию добавляется -color, а для определения толщины – -width. Однако, как и в border, можно использовать сокращенный вид описания стилей. Т.е. указать вначале толщину обводки, а после – ее цвет. Для лучшего понимания материала давайте разберем пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Пример реализации яркого контура </title>
<meta charset="utf-8">
<style>
body {
background: #7FFFD4;
}
h1{
text-align: center;
font-size: 46px;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #000080;
font-family: Arial;
color:#fff;
}
</style>
</head>
<body>
<h1>Мега-супер-пупер заголовок</h1>
</body>
</html>
|
Как вы видите, в этом случае обводка выглядит аккуратно и создается намного проще.
Благодаря данному свойству можно создавать не только привычную нам обводку, а и делать ее полупрозрачной.
Однако не забывайте, что при использовании text-stroke стоит позаботиться о корректном отображении текстового контента и в других браузерах.
Основы использования теней
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета
Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок
Немного особенностей
Есть еще одна декларация , которая должна ограничивать выделение текста внутри элемента, как это работает с . Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение не поддерживают все современные браузеры.
Тем не менее, все редактируемые элементы (такие как ) обрабатываются, как если бы они имели . Псевдоэлементы и нельзя выбрать, как если бы у них было установлено . Изменить такое поведение не получится.
Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.
Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.
Основы
Наиболее часто используемая запись для свойства примерно следующая:
border: 1px solid #000;
Эта запись придаст элементу рамку толщиной в 1px, сплошную, и залитую черным цветом (#000).
Также эту строку можно записать и в более расширенном варианте, когда мы укажем каждое значение свойства border отдельно:
div {
border-width: 1px;
border-style: solid;
border-color: #000;
}
Поскольку блочный элемент веб-страницы можно представить в виде прямоугольника, естественным будет предположение, что разработчики CSS позаботились о всех его четырех сторонах. Верно! С этой задачей и справляются отдельные значения для каждой из стороны блока-прямоугольника.
Например, если мы возьмем значение border-width, то его можно «разложить» на несколько записей: border-top-width, border-left-width, border-bottom-width, border-right-width.
Или же, немного расширить его короткую запись (border-width: 1px;):
border-width: 1px 1px 1px 1px;
То есть мы получаем полный контроль над каждой стороной элемента!
P.S. Значение в стилях читаются по часовой стрелке: верх, право, низ, лево.
Закругление рамки-границы (border-radius)
С появлением CSS3, это новое свойство сразу обрело популярность, и его поддерживают практически все современные браузеры. С помощью этого свойства можно творить чудеса на холсте веб-страницы!
Также, как и предыдущие свойства, свойство border-radius можно записать в сокращенном варианте, например:
border-radius: 7px;
а можно и более подробно:
border-radius: 7px 7px 7px 7px;
или еще более подробно:
border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px;
В качестве примера возможностей свойства, нарисуем лимон только при помощи CSS:
.limon {
width: 225px;
height: 215px;
border: 3px solid #ff0;
border-radius: 10px 155px 30px 145px;
}
Свойство изображения (стиль) для рамки
Существует несколько общих правил для придания границе стиля. Это: (пунктир), (штриховка), (сплошная линия), (двойная линия), (линия с выемкой), (линия с коньком), (внутренний скос), и (внешний скос).
Но мы также можем вместо этих стилей рамки использовать, например, какую-то картинку.
Для этих целей служит свойство .
В качестве значения свойства может выступать ссылка на нужную картинку:
div {
border-image-source: url('kartinka.png');
}
Или же градиент:
div {
border-image-source: linear-gradient(20deg, #2582e1 20%, #ff9933 80%);
}
В браузере получится нечто подобное:
После того как вы используете изображение в качестве свойств границы, применение его делается с помощью свойства (задается в числах или процентах, без указания единиц измерения, т.е. не нужно писать дополнительно px).
Например:
div {
/* значения для: top right bottom left */
border-image-slice: 10 8 15 7;
}
Также желательно указывать свойство , т.е. ширину изображения для рамки (например, в пикселях, или в процентах от размера изображения).
Короткая запись всех рассмотренных выше свойств изображения в качестве рамки выглядит примерно так:
div {
/* border-image-source, border-image-slice, /border-image-width/, border-image-outset, border-image-repeat */
border-image: linear-gradient(20deg, #2582e1 20%, #ff9933 80%) 5 / 25px / 0 round;
}
Немного практики
Рисуем лимон средствами CSS.
Вот код такого блока:
Margin: 0 auto; /* Размещаем блок по центру */
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;
Мы уже рисовали фигуру:
Теперь оставим от неё треугольник:
Код треугольника такой:
Margin: 0 auto; /* Размещаем блок по центру */
padding: 0px;
width: 0px; height: 0;
border: 30px solid white;
border-bottom-color: red;
3.5
из 5
Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.
Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали!
Простые геометрические фигуры
Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:
HTML
CSS
Trapezoid,.polygon { display: -moz-inline-block; }
Polygon,.trapezoid { margin:0; padding: 0; background: none; }
Polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }.trapezoid { display: inline-block; width: 1px; height: 0; margin: 0 auto; border-left: 5em solid transparent; border-right: 5em solid transparent;}
Polygon .aa { border-bottom: 10em solid; border-top: none; }
Polygon.r2 { height: 0em; }
Polygon.r3 { height: 8.66em; }.polygon.r3 .trapezoid { border-width: 8.66em 5em; }
div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }div.eg .polygon { display: block; margin: 0 auto; }
R3 { color: red; font-size: 0.5em; }
Звезда
HTML
Звезда
CSS
#star span,#star{ display: block;}
#top{ width: 0; height: 0; margin: auto; border-right: 4.64em solid transparent; border-left: 4.64em solid transparent; border-bottom: 14.27em solid;}
#center{ width: 5.7em; border-right: 4.65em solid transparent; border-left: 4.65em solid transparent; border-top: 3.36em solid; height: 0; position: absolute; top: 5.46em; left: 0; z-index: 100; text-align: center;}
#bottom{ position: absolute; bottom: 0; left: 2.852em; border-right: 4.635em solid transparent; border-left: 4.635em solid transparent; border-bottom: 3.4em solid #fff; width: 0; height: 0;}
#center span{ margin-top: -2em; color: #000; font-weight: bold;}
a#star:hover #center span{ color: #fff; background-color: transparent;}
a#star{ color: #f90; background-color: transparent;}a#star:hover{ color: #fc3; background-color: transparent;}
Еще немного примеров
- Елка и необычная верстка от Эрика Мейера;
- Плитка и менюшка от главного технолога Технократи;
Приветствую вас, дорогие читатели. Сегодня я вам расскажу и покажу, как можно сделать в css обводку текста. Все манипуляции мы будем проводить исключительно со свойством text-shadow .
С этим читают
Каскадность стилей
Последнее обновление: 21.04.2016
Когда к определенному элементу применяется один стиль, то все относительно просто. Однако если же к одному и тому же элементу применяется сразу несколько различных стилей,
то возникает вопрос, какой же из этих стилей будет в реальности применяться?
В CSS действует механизм каскадности, которую можно определить как набор правил, определяющих последовательность применения множества стилей к одному и тому же элементу.
К примеру, у нас определена следующая веб-страница:
В CSS определено три стиля и все они применяются к ссылке.
Если к элементу веб-страницы применяется несколько стилей, которые не конфликтуют между собой, то браузер объединяет их в один стиль.
Так, в данном случае, все три стиля не конфликтуют между собой, поэтому все эти стили будут применяться к ссылке:
Для определения стиля к элементу могут применяться различные селекторы, и важность каждого селектора оценивается в баллах. Чем больше у селектора
пунктов, тем он важнее, и тем больший приоритет его стили имеют над стилями других селекторов
Селекторы тегов имеют важность, оцениваемую в 1 балл
Селекторы классов, атрибутов и псевдоклассов оцениваются в 10 баллов
Селекторы идентификаторов оцениваются в 100 баллов
Встроенные inline-стили (задаваемые через атрибут ) оцениваются в 1000 баллов
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Каскадность стилей в CSS3</title>
<style>
#index {color: navy;} /* темно-синий цет текста */
.redLink {color: red; font-size: 20px;} /* красный цет текста и высота шрифта 20 пикселей */
a {color: black; font-weight: bold;} /* черный цет текста и выделение жирным */
</style>
</head>
<body>
<a id="index" class="redLink" href="index.php">Основы CSS 3</a>
</body>
</html>
Здесь к ссылке применяется сразу три стиля. Эти стили содержат два не конфликтующих правила:
font-size: 20px; font-weight: bold;
которые устанавливают высоту шрифта 20 пикселей и выделение ссылки жирным. Так как каждое из эти правил определено только в одном стиле, то в итоге они будут суммироваться
и применяться к ссылке без проблем.
Кроме того, все три стиля содержат определение цвета текста, но каждый стиль определяет свой цвет текста. Так как селекторы идентификаторов имеют больший удельный вес,
то в конечном счете будет применяться темно-синий цвет, задаваемый селектором:
#index {color: navy;}
Если селектор является составным, то происходит сложение баллов всех входящих в селектор подселекторов. Так, рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Каскадность стилей в CSS3</title>
<style>
a {font-size: 18px;}
.nav li a {color: red;} /* красный цет текста */
#menu a {color: navy;} /* темно-синий цет текста */
.nav .menuItem {color: green;} /* зеленый цет текста */
a.menuItem:not(.newsLink) {color: orange;} /* оранжевый цет текста */
div ul li a {color: gray; } /* серый цет текста */
</style>
</head>
<body>
<div id="menu">
<ul class="nav">
<li><a class="menuItem">Главная</a></li>
<li><a class="menuItem">Форум</a></li>
<li><a class="menuItem">Блог</a></li>
<li><a class="menuItem">О сайте</a></li>
</ul>
</div>
</body>
</html>
В CSS определено аж пять различных селекторов, которые устанавливают цвет ссылок. В итоге браузер выберет селектор и окрасит ссылки
в темно-синий цвет. Но почему, на каком основании браузер выберет этот селектор?
Рассмотрим, как у нас будут суммироваться баллы по каждому из пяти селекторов:
|
Селектор |
Идентификаторы |
Классы |
Теги |
Сумма |
|
.nav li a |
1 |
2 |
12 |
|
|
#menu a |
1 |
1 |
101 |
|
|
.nav .menuItem |
2 |
20 |
||
|
a.menuItem:not(.newsLink) |
2 |
1 |
21 |
|
|
div ul li a |
4 |
4 |
Итак, мы видим, что для селектора в колонке сумма оказалось больше всего баллов — 101. То есть в нем 1 идентификатор (100 баллов)
и один тег(1 балл), которые в сумме дают 101 балл.
К примеру, в селекторе два селектора класса, каждый из которых дает 10 баллов, то есть в сумме 20 баллов.
При этом псевдокласс в отличие от других псевдокдассов не учитывается, однако учитывается тот селектор, который передается в псевдокласс not.
Правило !important
CSS предоставляет возможность полностью отменить значимость стилей. Для этого в конце стиля указывается значение !important:
a {font-size: 18px; color: red !important;}
#menu a {color: navy;}
В этом случае вне зависимости от наличия других селекторов с большим количеством баллов к ссылкам будет применяться красный цвет, определяемый первым стилем.
НазадВперед
Как обвести текст
Мы имеем три слоя – фон, изображение, текст.
Рис.1
Сначала сделаем обводку текста. Вызываем окно стилей одним из способов:
- Двойным щелчком по слою в палитре;
- Нажать на слой в палитре правой кнопкой мыши и в появившемся списке выбрать Параметры наложения.
Рис. 2
3. Нажатием на иконку стилей fx внизу палитры, и в появившемся списке можно выбрать «Параметры наложения», но удобнее сразу выбрать стиль
Рис. 3
В этот момент активным должен быть тот слой, с которым мы работаем.
Откроется окно. Здесь активируем параметр Обводка, нажав на него мышкой, чтобы выделился синим цветом.
Рис. 4
Стиль сразу же применился к буквам – по контуру появилась черная линия. Если этого не видно в рабочем окне – поставьте галочку функции Просмотр (рис. 5). Теперь значения параметров можно изменить на свое усмотрение.
Рис. 5
- В строке Размер меняется толщина линии. Перетягиваем ползунок или вводим числовое значение в пикселях.
- Строка Положение открывает список расположения линии. Там три варианта:
Рис. 6
Для наглядности мы заменили цвет обводки на зеленый и обозначили контур букв белой полосой.
Функцию Режим наложения рассматривать в уроках для начинающих нет смысла. Ее не часто используют даже продвинутые мастера фотошопа. Это взаимодействие с нижним слоем. Оставим без изменений режим Нормальный.
Строка Непрозрачность, соответственно, отвечает за прозрачность обводки. Меняется передвижением ползунка либо введением числового значения в процентах.
Как видно на рисунке 6, положения «Внутри» и «Из центра» перекрывают часть контура букв. Если сделать обводку полностью прозрачной
, то эта часть контура тоже станет прозрачной.
Выворотка
Выворотка это инверсия цветов текста и фона. К примеру, чёрный текст на белом фоне в выворотке будет выглядеть как белый текст на чёрном фоне. Для создания выворотки применяется стилевое свойство background, задающее цвет фона и color, определяющее цвет текста, как показано в примере 3.
Пример 3. Цвет фона и текста
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Выворотка</title>
<style>
.invert {
background: #000; /* Чёрный цвет фона */
color: #fff; /* Белый цвет текста */
padding: 2px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<p>Обычный текст</p>
<p><span class=»invert»>Выворотка</span></p>
</body>
</html>
Стиль для выворотки лучше применять не к блочным элементам, а к строчным, вроде <span>, тогда фон будет совпадать с размером самого текста.
Морфинг изображений
Применение операции к изображениям дает предсказуемые результаты:
- Размер картинки уменьшается () или увеличивается ().
- В обоих случаях изображение выглядит «нарисованным» большой кистью, уменьшается количество мелких деталей.
Простейший код фильтра выглядит так:
Здесь мы сжимаем картинку на 3 пикселя
Обратите внимание изображение справа (результат) немного меньше левого (исходник):. Результат (справа) применения эффекта размывания к изображению слева
Результат (справа) применения эффекта размывания к изображению слева
Теперь заменим оператор на . Полученный эффект немного похож на предыдущий, но в то же время существенно отличается:
Результат (справа) применения операции dilate к изображению слева
Изображение в любом случае выглядит как нарисованная абстракция, а его размер изменяется по мере расширения или сжатия пикселей.
Кроме того, изменяются цвета. Операция создает изображение с большим количеством темных пикселей, , наоборот, осветляет картинку.
- (значение по умолчанию) устанавливает для каждого канала пикселя (R, G, B, A) самое темное или самое прозрачное из значений его соседей;
- же выбирает самое яркое или наименее прозрачное значение.
See the Pen
feMorphology on an image by Sara Soueidan (@SaraSoueidan)
on CodePen.
Если применять к одноцветным элементам (например, к тексту), то никаких заметных изменений цвета, конечно, не произойдет. В этом случае имеет значение именно эффект сжатия/расширения.
Обводка слоя в «Фотошопе»
Под обводкой в «Фотошопе», прежде всего, понимается эффект слоя. Этим слоем может быть либо изображение, либо его фрагмент, либо буквы, написанные инструментом «Текст».
Для того чтобы применить этот эффект обводки слоя, нужно сделать следующее.
- Выбрать слой.
- В пункте меню вкладки «Редактирование» выбрать «Выполнить обводку».
Откроется диалоговое окно, где нужно будет настроить параметры обводки и подтвердить команду нажатием кнопки «Да». Обводка в «Фотошопе» будет создана, соответствующий слой — обведен, его границы станут видны.
Параметры обводки легко регулируются, и возможностей здесь довольно много. Это и корректировка толщины линии, и выбор цвета, и настройка того, где должна проходить линия:
- по границе слоя снаружи;
- так, чтобы граница была ее центром;
- по границе внутри.
Также можно настроить режим — как у любой заливки (цвет, узор либо градиент). Путем сочетания этих и других инструментов программы легко добиться самых разных эффектов.
Прекрасной возможностью такого способа обводки является то, что в дальнейшем ее параметры все также можно регулировать, поэтому к такому эффекту слоя можно возвращаться по мере того, как изменяется изображение в целом. Допустим, если цвет фона вы решили осветлить, и обводка перестала гармонировать с ним, ее можно откорректировать и донастроить.
Второй его плюс в том, что этот эффект можно копировать и применять к другим слоям или другим изображениям либо на его основе создавать новые.
Финальные штрихи
Шаг 1
В этом разделе мы добавим финальные штрихи. Переходим Layer – NewAdjustmentLayer – PhotoFilter (Слой – Новый корректирующий слой – Фото-фильтр), чтобы создать новый корректирующий слой Фото-фильтр, который мы называем «Оттенок».
Дважды кликаем по миниатюре корректирующего слоя, чтобы настроить его:
Шаг 3
Теперь добавим контрастность. Жмем клавишу D, чтобы сбросить цвета на стандартные, и переходим Layer – NewAdjustmentLayer – GradientMap (Слой – Новый корректирующий слой – Карта градиента), чтобы добавить корректирующий слой Карта градиента, который мы называем «Контрастность».
Меняем режим смешивания корректирующего слоя на SoftLight (Мягкий свет) и уменьшаем непрозрачность до 18%.
Шаг 5
Теперь мы настроим насыщенность. Переходим Layer – NewAdjustmentLayer – Vibrance (Слой – Новый корректирующий слой – Вибрация), чтобы создать новый корректирующий слой, который мы называем «Насыщенность».
Дважды кликаем по миниатюре корректирующего слоя и настраиваем его:
Шаг 7
Теперь мы подкорректируем яркость. Переходим Layer – NewAdjustmentLayer – Levels (Слой – Новый корректирующий слой – Уровни), чтобы создать новый корректирующий слой, который мы называем «Яркость».
Дважды кликаем по миниатюре корректирующего слоя и настраиваем его:
Шаг 9
Далее добавим резкость. Жмем сочетание клавиш Ctrl+Alt+Shift+E, чтобы объединить все видимые слои на отдельном новом слое. Затем переходим Filter – Other – HighPass (Фильтр – Другое – Цветовой контраст) и настраиваем фильтр:
