Как сделать с помощью CSS на контур текста
Опубликованно 27.10.2018 00:14
С появлением стандартов WEB 2.0 и CSS3 возможности web-технологий, значительно увеличились. Теперь, разработчик может создать все элементы на странице с помощью каскадных таблиц стилей. Нет необходимости в имитации заголовков, кнопок или баннеров в графическом редакторе. Работая только с CSS, контур текста, подчеркивание, эффекты свечения и размытия создаются с помощью одной строки кода. Два основных свойства текста
Если вы регулярно используете интернет, вы наверняка замечали, как привлекают внимание красочные баннеры, надписи, заголовки. Текст-это мощный инструмент, который позволяет задавать посетители сайта рекламу или важную информацию. Научившись правильно работать с шрифта, его размер и выбор, вы можете значительно увеличить конверсию сайта и привлечь новых читателей.
Один из самых простых способов выбрать любое слово с помощью CSS, сделать контур текста. Для этого вам нужно запомнить всего два свойства. Первое, что text-stroke, а второе-это text-shadow. Вы можете использовать один из них, или оба одновременно, создавая эффекты.
Использование свойства text-stroke
Text-stroke – это невероятно легко для украшения. Он позволяет подготовить заголовки и абзацы не хуже, чем графические редакторы Adobe. Чтобы добавить с помощью CSS контур текста, необходимо указать только два параметра: ширину и цвет. Ширина должна во всех условиях, с которыми вам приятно или работать. Это может быть пикселы, проценты или rem.
С цветом контура также очень просто. Вы можете задать тон, используя HEX, RGB или добавить альфа-канал и сделать контур прозрачный. Чтобы увидеть свойства в действии, создайте новый документ в текстовом редакторе и введите следующее:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Невероятно красивое название контур</title> <стиль> <!-- Общие свойства тега body с выравнивание по центру--> body{ background: rgb(247, 247,24); display: flex; justify-content: center; align-items: center; } h1{ color: #bbb; font: 4rem нормально, Helvetica, sans-serif; <!--Определяет границы ширина 4px и цвет #333 --> -webkit-text-stroke: 4px #333; text-stroke: 4px #333; } </style> </head> <body> <h1>Мы рады украсить страницы интернета, мы не волнуемся, не делать этого!</h1> </body> </html>
Сохраните документ в формате html и откройте его с помощью Google или Firefox.
Что может пойти не так
Если вы открываете предыдущий документ в Проводнике, вы будете очень разочарованы. Этот браузер является, чтобы все ваши усилия без внимания и отображается обычный текст, без намека на контур. Все это потому, что недвижимость все еще является экспериментальной и не включен в консорциум W3W в официальных стандартах.
Также обратите внимание на продажу префиксов:
-webkit-text-stroke: 2rem желтый; text-stroke: 2 rem yellow;
Отдельно префиксов Mozilla, Opera и Explorer 2018, не существует. Таким образом, использование CSS контуры желательно с особой осторожностью. Не назначайте text-stroke основные элементы страницы, в том числе, будет зависеть от направления сайта. Добавьте украшения вторичного контента и убедитесь, что крест-можете проверить свои страницы. Как добавить контур с помощью text-shadow
Первоначально, text-shadow был разработан, как свойство, чтобы добавить тень. Но если вы знаете, как добавить значения, text-shadow, начинает хорошо имитировать поведение text-stroke. Если вы обратите внимание на CSS-генераторы контур текста, вы увидите, что они работают только с text-shadow.
Собственности принимает четыре значения: вертикальное смещение по оси X; второе-это координата Y, прожили в в горизонтальное смещение; третье значение-это значение радиуса размытия и чем он меньше, тем больше становится тень и наоборот; последнее значение определяет цвет.
В документе HTML, стили записываются следующим образом:
.h1{ text-shadow: 0px 2px 2px rgba(15, 86, 61,.2); }
Первые два значения, ответственных за перемещение на оси координат, положительные и отрицательные значения. Например, писать ниже, создает тень, серая на шесть пикселей ниже и пять пикселей слева от текста.
h1{ text-shadow: 6px 5px 0px rgba(0,0,0,.2); }
Для достижения визуального соответствия обводка текста CSS-свойство text-shadow можно добавлять несколько значений, создавать тень, и несколько. А сайт купил элементы с 3D-эффекты, свет или понедельника текст. Откройте следующий код в вашем браузере, чтобы увидеть все, что написано на практике:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Невероятно красивое название контур</title> <стиль> body{ background: rgba(0, 105, 255, 1); display: flex; justify-content: center; align-items: center; } h1{ color: #FFF; font: bold 4rem Arial, helvetica, sans-serif; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 0 5px #aaa 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } </style> </head> <body> <h1>TEXT WITH 3D</h1> </body> </html>
Дизайнеры для работы в типографии используют это свойство, как любимую игрушку. Возможности, созданные эффекты ограничены лишь фантазией мастера. Приятный бонус, что text-shadow, включенных в спецификации, не требует продать префиксов и поддержка во всех браузерах, в том числе знаменитого Explorer. Автор: Уверен, Что Ася 18 Сентября 2018 года
Категория: Строительство
