Оформление текста text-decoration средствами CSS .
Продолжаем работу с текстом. Давайте рассмотрим еще одно свойство — text-decoration: ;. Для чего оно нужно? Бывают моменты, когда нужно сделать текст подчеркнутым или сделать линию над текстом или вовсе его зачеркнуть. Так вот, используя данное свойство, и меняя только его значения можно удовлетворить все выше заявленные требования.
- text-decoration: underline ;— Устанавливает подчеркнутый текст
- text-decoration: overline ; — Линия проходит над текстом
- text-decoration: line-through ; — Создает перечеркнутый текст
- text-decoration: none ; — Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию
Свойство text-decoration: ; очень часто используется при работе с ссылками. Так у браузера есть свой встроенный стиль, который изначально выделяет все ссылки подчёркиванием. Очень много сайтов страниц, где по дизайну идут ссылки без подчеркивания и нам нужно удалять такие подчеркивания. И делается это как раз с помощью свойства
Но давайте все по порядку и для начала научимся подчеркивать текст.
Подчеркнуть текст CSS
Возьмем пример из прошлого урока, и в четвертом и пятом абзаце подчеркнем жирную область. Там уже использовался класс, когда задавалось свойство жирного и курсивного шрифта, а теперь к нему еще и добавим свойство для подчеркивания. Для подчеркивания используется значение underline
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Первый абзац Первый абзац Первый абзац Первый абзац
Второй абзац Второй абзац Второй абзац Второй абзац
Третий абзац Третий абзац Третий абзац Третий абзац
Четвертый абзац Четвертый абзац Четвертый абзац
Пятый абзац Пятый абзац Пятый абзац Пятый абзац
</body>
</html>
И для класса .bold зададим еще одно свойство подчеркивания.
CSS
.bold{
font-weight: bold;
text-decoration: underline;
}
Теперь жирный текст стал еще и подчеркнутым.
Надчеркутый текст CSS
Теперь давайте расположим линию над текстом для этого в свойстве text-decoration: ; меняем значение на overline и линия появятся над текстом.
CSS
.bold{
font-weight: bold;
text-decoration: overline;
}
Зачеркнутый текст CSS
Для того чтобы перечеркнуть текст то вновь нужно изменить значение в свойстве text-decoration: ; на line-through после чего у нас появится перечеркнутый текст.
CSS
.bold{
font-weight: bold;
text-decoration: line-through;
}
Такое свойство также частенько используется, когда нужно отобразить какое-то отрицание
Удаление лини подчеркивания
И снова мы возвращаемся к ссылке, у которой нужно удалить линию подчеркивания. Используется все тоже свойство, только значение устанавливается в none. И предположи, что Вы у всех ссылок на странице хотите убрать подчеркивание. Для этого используется такая структура кода.
CSS
a{
text-decoration: none;
}
Теперь создано общее правило для всех ссылок, которые теперь все будут отображается без подчеркивающей линии.
В Демо можно просмотреть пример работы данного свойства с каждым из значений в отдельности. На этом с оформлением текста все, а мы движемся дальше.
Быстро запоминаем свойства CSS оформления текста
Время чтения: < 1 мин. 
Очередная шпаргалка свойств CSS оформление текста. Сегодня я объединил 5 свойств CSS, которые отвечают за оформление текста: подчеркивание/зачеркивание, выравнивание текста, отступ у абзаца, регистр букв и символов, а также высота строки. Все свойства используются достаточно часто. Когда под рукой будет такая шпаргалка — легко вспомнить нужное значение.
Шпаргалка по шрифтам CSS здесь:
Свойства CSS оформления текста в компактном виде
Цветовую гамму и стиль шпаргалки я оставил как в прошлой со шрифтами. Всего 5 свойств и у каждого есть определенный набор значений. Рядом с каждым значением результат, который Вы увидите, если примените его.
Ниже Вы можете скачать эту картинку в большом разрешении в формате JPG, а также в формате PDF:
СмотретьСкачать
Вывод
Скачивайте себе и сохраняйте вместе с прошлой шпаргалкой.
Успехов!
С Уважением, Юрий Немец
Урок 4. Оформление и декор текста в CSS
В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами — создавать, изменять, убирать определённые свойства, придающие внешний вид.В качестве первого примера работы CSS свойств используем текст и попробуем его изменить: цвет, размер, положение, шрифт и тд. Практически на каждом сайте текст определённым образом декорируется для того, чтобы он был читабельным и не вызывал у пользователя раздражения, а наоборот, ощущение лёгкости. Заголовки, например, сделать другим цветом, ключевые фразу выделять жирным шрифтом и так далее.
font-size
font-size — это свойство, которое определяет размер текста, относительной указанной единицы измерения. Самое используемое свойство для работы с текстом.
Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.
| В качестве сравнения: 12pt=16px=1em=100% |
Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать em, px, %.
Код CSS
#fs1em {
font-size: 1em;
}text-decoration
text-decoration — это свойство предназначено для декорация текста и имеет четыре значения.
1. none — декорация отсутствует.
2. blink — делает мигающий текст (раз в секунду исчезает и появляется на прежнем месте). Устаревшая установка, по эстетическим соображениям используется всё реже и реже.
3. line-through — перечёркивает текст.
4. overline — создаёт линию над текстом.
5. underline — подчёркивает текст. Как правило, используется для обозначения ссылок.
Чаще всего используется underline. Как правило, для обозначения ссылок — элементов <a>. В примере ниже у всех ссылок в документе убирается заданное им по умолчанию нижнее подчёркивание, но при наведении на них оно заново появляется.
Код СCS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}font-weight
font-weight — это свойство, которое отвечает за насыщенность текста, жирность его начертания. В качестве значений имеются величины от 100 до 900 с интервалом в 100, то есть 100, 200, 300 … 900. Где 900 — жирное начертание, 100 — соответственно светлое начертание.
| Внимание! Для многих новых шрифтов будут доступны не все значения. Для многих современных делают начертания, например, 300-400-700. Поэтому, если у вас не сработала установка с каким-либо шрифтом, то не переживайте, попробуйте другие интервалы. |
Список установленных значений
bold — полужирное начертание.
bolder — жирное начертание (со многими шрифтами либо не работает, либо отображает аналогично bold)
lighter — светлое начертание
normal — стандартное, обычное начертание.
Помимо установленных значений, как уже говорилось, можно использовать числовые единицы:
Код СCS
#bold {
font-weight: bold;
}…либо…
#bold {
font-weight: 900;
}font-style
font-style — это свойство, определяющее тип написания текста: стандартное, наклонное или курсивное.
normal — обычное начертание текста.
italic — курсивное начертание.
oblique — наклонное начертание.
| Курсивное и наклонное начертание похожи друг на друга, но тем не менее отличаются. Курсив задумывался как начертание, имитирующее рукописный текст, а наклонный текст образуется путём наклона обычных знаков вправо. |
Код СCS
#italic {
font-style: italic;
}Спасибо за внимание!
Три метода оформления текста с использованием Lettering.js
Так как использование плоского дизайна начало набирать все большую популярность, на замену подхода в стиле скевоморфизма приходит наименее тяжелое оформление текстов. Сегодня мы покажем, как оживить ваш веб-сайт с плоским дизайном, применив забавные методы оформления текстов, используя Lettering.js — очень полезный инструмент, который возвращает контроль над оформлением текстов.Перед тем, как начать, убедитесь, что вы включили jQuery и последнюю версию Lettering.jsв файлы HTML.
1. Эффект сложенной бумаги
Демонстрация работы – Скачать исходный код
HTML:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h2>Fun Typography Techniques</h2>
</div>
</body>CSS:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
}
h2 {
margin-top: 155px;
}
h2 [class*="word"]{
margin-right: 10px;
}
h2 [class*="word"]:last-child;{
margin-right: 0;
}
.demo1 [class*="char"]{
font-family: 'Amatic SC', helvetica;
background: #ffb500;
padding: 10px;
font-size: 60px;
color: #fff;
display: inline-block;
}
.demo1 [class*="char"]:nth-child(odd){
moz-transform: skewY(-10deg);
-webkit-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.demo1 [class*="char"]:nth-child(even){
background: #f15b14;
color: #fff;
moz-transform: skewY(10deg);
-webkit-transform: skewY(10deg);
-o-transform: skewY(10deg);
-ms-transform: skewY(10deg);
transform: skewY(10deg);
}
JS:
$(window).load(function(){
$(".demo1").lettering("words").children('span').lettering();
});
В основном эта техника используется, чтобы создать эффект сложенной бумаги. С помощью CSS стилей Lettering.js и nth-child мы легко можем воссоздать этот эффект, просто определив два стиля: для левой и для правой стороны бумаги, чтобы создать эффект тени, который придаст немного глубины оформлению текста заголовка. Мы не хотим придавать слишком много глубины с помощью теней и границ, так это не будет уместно в плоском дизайне, который у Вас есть.
2. Эффект праздничного освещения
HTML:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h2>Fun Typography</h2>
</div>
</body>
The CSS:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #9fd9e6;
text-align: center;
}
h2 {
margin-top: 235px;
}
h2 [class*="word"]{
margin-right: 10px;
}
h2 [class*="word"]:last-child;{
margin-right: 0;
}
.demo2 [class*="char"]{
margin-right: 5px;
line-height: 100%;
font-family: helvetica;
color: white;
font-weight: bold;
border-radius: 50px;
text-align: center;
display: inline-block;
padding: 10px 15px;
text-transform: uppercase;
}
.demo2 [class*="char"]:nth-child(3n+1) {
background: #ed4a02;
}
.demo2 [class*="char"]:nth-child(3n+2) {
background: #93ca31;
}
.demo2 [class*="char"]:nth-child(3n+3) {
background: #feb300;
}
.demo2:hover [class*="char"]:nth-child(3n+1){
-webkit-animation: color-1 1s infinite;
-moz-animation: color-1 1s infinite;
-o-animation: color-1 1s infinite;
animation: color-1 1s infinite;
}
.demo2:hover [class*="char"]:nth-child(3n+2){
-webkit-animation: color-2 1s infinite;
-moz-animation: color-2 1s infinite;
-o-animation: color-2 1s infinite;
animation: color-2 1s infinite;
}
.demo2:hover [class*="char"]:nth-child(3n+3){
-webkit-animation: color-3 1s infinite;
-moz-animation: color-3 1s infinite;
-o-animation: color-3 1s infinite;
animation: color-3 1s infinite;
}
@-webkit-keyframes color-1 {
0% { background: #ed4a02; }
33% { background: #93ca31; }
66% { background: #feb300; }
100% { background: #ed4a02;}
}
@-moz-keyframes color-1 {
0% { background: #ed4a02; }
33% { background: #93ca31; }
66% { background: #feb300; }
100% { background: #ed4a02;}
}
@-webkit-keyframes color-2 {
0% { background: #93ca31; }
33% { background: #feb300; }
66% { background: #ed4a02;}
100% { background: #93ca31;}
}
@-moz-keyframes color-2 {
0% { background: #93ca31; }
33% { background: #feb300; }
66% { background: #ed4a02;}
100% { background: #93ca31;}
}
@-webkit-keyframes color-3 {
0% { background: #feb300; }
33% { background: #ed4a02; }
66% { background: #93ca31;}
100% { background: #feb300;}
}
@-moz-keyframes color-3 {
0% { background: #feb300; }
33% { background: #ed4a02; }
66% { background: #93ca31;}
100% { background: #feb300;}
}
The JS:
$(window).load(function(){
$(".demo2").lettering("words").children('span').lettering();
});
Эта техника добавит забавный пестрый вид оформлению текста заголовка. Цвета будут мигать, когда вы наведете указатель мыши на текст. И снова используя мощный стиль CSS nth-child, мы определили повторяющийся шаблон изменения цветов, состоящий из оранжевого, зеленого и желтого соответственно. Концепция стиля nth-child проста. Вот объяснение, почему мы использовали nth-child(3n+1), nth-child(3n+2), и nth-child(3n+3).
Для nth-child(3n+1):
- (3×0) + 1 = 1 = Первая буква
- (3×1) + 1 = 4 = Четвертая буква
- (3×2) + 1 = 7 = Седьмая буква
- · (3×3) + 1 = 10 = Десятая буква и так далее.
Тоже самое для nth-child(3n+2):
- (3×0) + 2 = 2 = Вторая буква
- (3×1) + 2 = 5 = Пятая буква
- (3×2) + 2 = 8 = Восьмая буква
- · (3×3) + 2 = 11 = Одиннадцатая буква и так далее.
И для nth-child(3n+3):
- (3×0) + 3 = 3 = Третья буква
- (3×1) + 3 = 6 = Шестая буква
- (3×2) + 3 = 9 = Девятая буква
- (3×3) + 3 = 12 = Двенадцатая буква и так далее.
Так что в основном оранжевый цвет будет применяться к первой из каждой тройки букв, т. е., к первой, четвертой, седьмой и так далее буквам, зеленый и желтый будут применяться ко второй и третьей буквам из каждой тройки букв соответственно. Теперь у Вас есть разноцветное оформление текста без необходимости присваивать цвет для каждой буквы.
Мы также добавили анимацию, когда пользователь наводит указатель мыши на заголовок, чтобы создать эффект мигающего праздничного освещения.
3. Красивое оформление текста, как на афише
HTML:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h2>
This tutorial<br>
is Awesome<br>
than other<br>
= Tutorial =<br>
Am I Right?<br>
And this<br>
can go on<br>
forever<br>
= & =<br>
ever<br>
The End
</h2>
</div>
</body>
CSS:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #00bccb;
text-align: center;
padding: 50px;
}
h2 {
margin-bottom: 35px;
}
h2 [class*="word"]{
margin-right: 10px;
}
h2 [class*="word"]:last-child;{
margin-right: 0;
}
.demo3 {
width: 350px;
margin: 10px auto;
}
.demo3 [class*="line"]{
line-height: 100%;
font-family: "open sans";
color: #fff;
line-height: 180%;
display: block;
}
.demo3 [class*="line"]:nth-child(5n+1){
font-weight: bold;
text-transform: uppercase;
letter-spacing: -2px;
line-height: 140%;
font-size: 49px;
}
.demo3 [class*="line"]:nth-child(5n+2){
font-size: 23px;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 12px;
word-spacing: 30px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.demo3 [class*="line"]:nth-child(5n+3){
line-height: 100%;
font-size: 70px;
font-style: italic;
font-family: serif;
font-weight: 400;
margin-bottom: 7px;
}
.demo3 [class*="line"]:nth-child(5n+4){
line-height: 100%;
margin-bottom: 15px;
font-weight: bold;
font-size: 68px;
letter-spacing: -3px;
}
.demo3 [class*="line"]:nth-child(5n+5){
font-size: 23px;
font-weight: 100;
line-height: 190%;
text-transform: uppercase;
letter-spacing: 6px;
word-spacing: 10px;
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0 2px 0 #00bccb, 0 4px 0 #fff, 0 -2px 0 #00bccb, 0 -4px 0 #fff;
}
.demo3 [class*="line"]:last-child{
margin: 25px 0;
letter-spacing: 0px;
border: none;
box-shadow: none;
border-radius: 70px;
background: #FFF;
color: #00bccb;
display: inline-block;
padding: 45px 17px;
font-size: 19px;
}
$(window).load(function(){
$(".demo3").lettering("lines");
});Последний метод, о котором мы расскажем, — это метод создания красивого динамического оформления текста, как на афише, для Вашего веб-сайта, который вы сможете применять, не редактируя стили каждый раз, когда вы добавляете новый текст.
С помощью nth-child у каждой строки будет свой собственный стиль, который достаточно отличается, чтобы создать разделение между строками. Вне зависимости от того, сколько строк вы добавите, стили будут непрерывно применяться к каждой строке по шаблону, так что Вам совсем не нужно волноваться о стилях, когда вы добавляете новый текст.
Демонстрация работы – Скачать исходный код
Заключение
Как вы видите, плоский дизайн интерфейсов занял устойчивую позицию, и с ним приходит возможность для разработчиков и дизайнеров поиграть и поэкспериментировать с оформлением текстов в интернете. Надеемся, что Вам понравились эти методы.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также: