Оформляем текст с использованием CSS3
Красивая типографика всегда интересна, поэтому хочется найти способы применения веб-технологий для улучшения оформления текста. В этом уроке мы покажем, как использовать свойства CSS3, чтобы разнообразить оформление текстов или создать эффекты способами, которые кажутся невозможными. Заметьте: эффекты будут работать только в браузерах Webkit, но мы добавили дополнительные свойства, чтобы они работали и в других браузерах.
Демонстрация работы – Скачать исходный код
Градиент на тексте
Это работает так же, как и создание градиента фона с помощью CSS3, но мы ограничиваем фон формой текста. Вот пример кода:
CSS:
h2#gradient { color: #FF0052; /* Запасной цвет */ text-transform: uppercase; font-weight: bold; font-family: helvetica; text-align:center; font-size: 70px; letter-spacing: -4px; } @media screen and (-webkit-min-device-pixel-ratio:0) { h2#gradient { background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } }
HTML:
<h2>CSS3 Rocks!</h2>
К сожалению, этот способ работает только в браузерах Webkit. В браузере FireFox нет свойства, которое позволило бы свойству background-clip работать с текстом, поэтому в других браузерах он будет отображаться нормальным цветом. Мы также добавили свойству условие @media screen and (-webkit-min-device-pixel-ratio:0), чтобы у фона не было градиента в браузерах, не поддерживающих это свойство.
Эффект частичной тени
Нам хотелось добавить еще что-нибудь, кроме градиента, так что мы решили добавить глубину, применив эффект частичной тени. Это хорошо известный способ, который показывает четкое разделение между буквой и ее тенью, как будто буква парит. Этого эффекта можно достичь применением двух значений свойства text-shadow. Первый цвет тени должен совпадать с цветом фона, чтобы создать промежуток между буквой и второй тенью. Вот пример кода, созданного на основе предыдущего примера:
CSS:
body { background: #441369; } h2#gradient { text-align:center; } h2#gradient span { position:relative; display: inline-block; color: #FF0052; /* Запасной цвет */ text-transform: uppercase; font-weight: bold; font-family: helvetica; text-align:center; font-size: 70px; letter-spacing: -4px; text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); /* Запасная тень */ } @media screen and (-webkit-min-device-pixel-ratio:0) { h2#gradient span{ background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow:none !important; } h2#gradient span:after { background: none; content: attr(data-text); left: 0; position: absolute; text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); // эффект частичной тени top: 0; z-index: -1; } }
HTML:
<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>
Это сложная часть. Мы столкнулись с проблемой, свойство text-shadow и градиент не работали хорошо вместе. Тень по каким-то причинам накрывала градиент, так что мы создали обходной путь. Мы добавили селектор CSS :after, чтобы применить каждый эффект по отдельности, и присвоили тени значение z-index -1, так что тень больше не накрывала текст.
Мы быстро поняли, что этот обходной путь не сработает, если используется свойство text-align: center. Эффект в селекторе :after будет неправильно выровнен и, чтобы избавиться от этого, нам пришлось положить текст в еще один элемент span со свойствами position: relative и display: inline-block, чтобы селектор :after был выровнен.
Так как мы выводим селектор :after отдельно, нам нужен способ описать в таблице стилей порядок вывода. Мы добавили свойство HTML data-text, содержащее фразу «CSS3 Rocks!», элементу span, и свойство CSS content: attr(data-text) селектору :after. И теперь у нас есть великолепное оформление текстов с эффектом частичной тени, работающим вместе с градиентом.
Эффект текстурной тени
Мы подумали, что было бы интересно добавить еще один эффект, чтобы улучшить результат. Текстурная тень — это приятный для глаз эффект, который может придать вашему веб-сайту уникальный вид. Вот пример кода, созданного на основе предыдущих примеров:
CSS:
body { background: #441369; } h2#gradient { text-align:center; } h2#gradient span { position:relative; display: inline-block; color: #FF0052; /* Запасной цвет */ text-transform: uppercase; font-weight: bold; font-family: helvetica; text-align:center; font-size: 70px; letter-spacing: -4px; text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); /* Запасная тень */ } @media screen and (-webkit-min-device-pixel-ratio:0) { h2#gradient span{ background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow:none !important; } h2#gradient span:after { content: attr(data-text); left: 8px; position: absolute; background: url(http://i.imgur.com/RkDRMcJ.png); /* источник изображения для Вашей текстуры */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1); top: 8px; z-index: -1; width: 100%; } }
HTML:
<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>
Добавив расположение свойства text-shadow и изображение для текстуры, мы можем получить великолепный эффект оформления текста для нашего сайта, даже не запуская программу Photoshop.
Демонстрация работы – Скачать исходный код
Заключение
Эффекты оформления текста CSS3 часто использовались веб-дизайнерами, но немногие использовали их настолько широко. С помощью подходящих шрифтов, цветов и расположения Вы можете создать шикарно выглядящий плакат, используя только CSS и HTML.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также:
Как оформить текст в CSS
Время чтения: 2 мин.
Здравствуй, уважаемый читатель.
Это пятый урок изучения CSS. В этом уроке мы рассмотрим семейство шрифтов, как задать размер текста, стиль текста, а также как сделать его жирным.
Перед изучением CSS пройдите предыдущие уроки:
Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Теория и практика
Чтобы красиво оформить текст на странице, придать ему привлекательный вид, необходимо знать некоторые CSS свойства которые помогут сделать это.
font-family
Начнем с семейств шрифтов. Всего существует огромное количество видов шрифтов, но не все одинаково отображаются в разных браузерах и системах. Это зависит от того присутствует ли данный файл со шрифтами в системе(установлен ли он).
Рассмотрим CSS код:
1 2 3 | p { font-family: comic sans ms, times new roman, verdana; } |
Лучше всего название шрифта писать в нижнем регистре. Тогда браузеры их лучше понимают. У вас наверное появился вопрос почему мы указали сразу несколько шрифтов. Это делается для того, чтобы если первый шрифт «comic sans ms» не установлен у пользователя на компьютере, тогда текст будет показан в «times new roman». Если и он не установлен, тогда он будет показан со шрифтом «verdana».
font-size
После того как мы выбрали шрифт, нам необходимо задать его размер. В CSS это делается с помощью свойства font-size. Размер в CSS может задаваться с помощью нескольких величин: пиксели(px), проценты(%), пункты(em) и ключевые слова(small, large, medium). Я рекомендую вам использовать пиксели, и т.к. бразуеры их хорошо масштабируют.
Рассмотрим CSS код:
1 2 3 4 | p{ font-family: comic sans ms, times new roman, verdana; font-size:16px; } |
font-style
Также в CSS текст можно делать курсивный и наклонный. Это делается с помощью свойства font-style. У данного свойства есть несколько значений:
font-style: normal | italic | oblique | inherit
normal — обычный текст.
italic — курсивный текст.
oblique — наклонный текст. Он отличается от курсивного тем, что курсивный это текст написанный «от руки», а наколонный — это просто наклон букв вправо.
inherit — наследуется значение родителя(например: <div><p>Text</p></div>. Мы задали для div один стиль текста и хотим чтобы этот стиль наследовался тегу <p>, который находится внутри <div>. Тогда необходимо применять данное значение).
Вот пример курсивного и наклонного текста(разница есть, но она не очень заметная).

font-weight
Еще одним из необходимых свойств при работе с текстом это — выделение текста жирным. За это отвечает свойство font-weight.
font-weight: bold | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Пример CSS кода:
1 2 3 4 5 6 | p{ font-family: comic sans ms, times new roman, verdana; font-size:16px; font-style:italic; font-weight:bold; } |
Ниже можете посмотреть пример и скачать его:
Посмотреть примерСкачать
Сегодня мы рассмотрели как задать оформление тексту. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.
Больше практикуйтесь!
Красивое оформление текста при CSS на сайт
Безусловно вы видели на ресурсах, что красиво оформленный текст к примеру название сайте. И здесь разберем 2 способа как можно сделать красиво шрифт. Все будет создано при помощи CSS3, где первый способ как раз подойдет под название сайта, так как обвернут будет в h2 и там будут переменятся тени. Это стало популярно так делать, все очень просто, это красиво и оригинально смотрится, если еще настроить стили как вам нужно. И не нужно забывать, что сейчас основном все браузеры отображают эти эффекты, что думаю не мало важно.И можно применять различные вариаций, что и постараемся сделать, пока на двух, но как понимаете их намного больше. Второй у нас будет идти как небольшая размытость, но когда клик наводим, то появляется полноценное описание в красках, если можно так выразиться. Но там уже будут другие стили, что узнаете ниже и для этого будет для вас продемонстрирована демонстрация, чтоб можно визуально все оценить.
Как всем известно, что Гугл предоставляет бесплатные шрифты, и один их них под названием Audiowide будет использоваться здесь. Не нужно забывать, что некоторые идут на кириллицу и может получиться так, как видите на первое изображение, это также нужно учитывать. А так очень креативность решение использовать эффект на сайте, это может быть как в название статьи или как уже говорилось, в прописывание домена или самого интернет ресурса.
1) Первый вариант Эффектная анимация с текстом плюс тени:
Вот здесь как раз будет h2 и можно поставить в название вашего блога или портала, если у вас шаблон темный, для этого и идут стили и в них уже в самом начале прописан шрифт, который вы можете сменить на свой или убрать.
Это ставим где вам нужно.
Код
<h2>ZORNET.Ru: Сайт про uCoz</h2>
И под них стили, которые при нажатие на КЛИК появятся и можете скопировать.
2) Второй вариант на размытый текст:
Также разместим код где хотите видеть, здесь прописан центр, что можно убрать, так как нам нужен только класс blur, который и отвечает за все.
Код
<p>ZORNET.Ru</p>
Но и небольшие стили КЛИК и копируем в CSS сайта, также их можно заключить в style ниже. И здесь также как и на первом прикреплен шрифт.
PS — вы можете менять как гаму цвета или добавлять градиенты, также если брать первый пример, то задать движение теней как вы видите.
Источник: Dbmast.ru
Как красиво оформить текст | Несколько CSS-примеров
Часто я применяю одно и то же оформление текста с помощью разных методов. В основном это код CSS. Чтобы окончательно закрепить эти приемчики, я для себя и для вас приведу несколько примеров, которые можно схожу брать на вооружение.
Как написать текст нижним или верхним индексом
Чтобы получить такую надпись, посмотрите ее код:
Как написать текст нижним или верхним индексом
Как сделать горизонтальную черту определенного цвета
Для этого нужно в файле style.css прописать оформление горизонтальной черты, которая будет, например, красного цвета:
hr {color:red;background-color:red;height:1px;border-width:0px;}
После этого у вас в блоге все сплошные горизонтальные линии, которые ставятся через разметку hr, будут красные.
Как подчеркивать слово красной волнистой линией
Например, вы пишите об орфрграфических ошибках, и хотите привести пример такой ошибки, выделенный привычным всем способом —как в Ворде, красной волнистой линией. Сделать это можно, описав такую линию в style.css, предварительно расположив в блоге картинку красной волнистой линии:
.redline {background: url(redline.gif) repeat-x 100% 100%; padding-bottom: 2px; text-decoration: none; white-space: nowrap;}
После этого пишен наше слово с ошибкой с подчеркиванием:
ашипка
Как сделать отступ первой строки абзаца (как в книгах)
Легко:
Ваш текст
20 — это количество точек отступа. Можно применять и отрицательное значение — тогда первая строчка быдет выделяться из обзаца. Отступ/выступ действует только на первую строчку.
Пример:
Лорем ипсум.
Второй лорем ипсум.
Код примера:
Лорем ипсум.
Второй лорем ипсум.
Пять постов для перелинковки:
- Хотите сами установить порядок страниц в блоге? Как отсортировать страницы.
- Страницы отсортировали, а теперь очередь за ссылками? Как отсортировать ссылки.
- Надоело записывать на листочках? Заведите записную книжку прямо в блоге! Как сделать в блоге список дел.
- Нужно красивое облако тегов? Как красиво вывести облако тегов.
- Хотите сойти за умного, вставив мудрые высказывания? Как вывести цитаты.