Оформление текста css – как оформить его красиво

От автора: приветствуем вас на страницах блога webformyself. За оформление текста css отвечает в первую очередь, так как именно с помощью этого языка формируется внешний вид всех элементов. Давайте рассмотрим основные свойства, которые влияют на внешний вид текстового содержимого.

Цвет

Цвет является одним из самых главных параметров, которые влияют на восприятие текста, на его читабельность. Откройте несколько разных сайтов и вы практически гарантированно скажете, что впечатления от чтения информации на них у вас остались разные. Где-то вы можете видеть полностью черный текст на белом фоне, где-то – светлый на сером и т.д.

Для наилучшего восприятия рекомендуется использовать обычый белый фон (или немного темнее) и цвет шрифта, немного светлее черного. Дело в том, что абсолютный контраст – это тоже плохо, так как может резать глаза.

Цвет в css задается с помощью свойства color. Значения можно записывать в виде ключевых слов (white, brown, orange), шестнадцатеричных hex-кодов (#000, #fff, #ccc) и в режиме rgb (red, green, blue) где определяется насыщенность каждого из этих цветов в числовом значении от 0 до 255.

Сам шрифт

Не менее важным фактором при визуальном восприятии является и сам шрифт. Ни для кого ни секрет, что для основного текста лучше всего подбирать один из стандартных шрифтов без засечек.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Другое дело, это оформление заголовков и подзаголовков, а также названия сайта. Обычно, для этих текстовых фрагментов подбирается отдельный красивый шрифт. Например, удачно подобранный шрифт для текстового логотипа компании может сыграть большую роль, потому что такой заголовок будет запоминающимся и уникальным.

Задать шрифт можно с помощью свойства font-family, а значением выступает имя или семейство. Для надежности можно записать пару вариантов через запятую. Например, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут мы записали аж четыре варианта. Если браузер найдет шрифт Lato, то будет использовать именно его. Если же он не будет обнаружен, то следующим веб-обозреватель попытается использовать Georgia, а если и его не будет, то Arial. Этот шрифт есть на любых компьютерах с операционной системой Windows.

Если вы и записываете какой-то шрифт, то убедитесь, что он будет доступен, потому что при загрузке будет тратиться время на проверку его наличия, а если его уже нет, то это минус к скорости сайта.

Размер шрифта

Также помогает оформить текст css-свойство font-size. Оно, как понятно из названия, задает размер текста. Обычно его записывают в пикселях, хотя часто также используются относительные единицы em.

У некоторых html элементов размер текста определен изначально. Например, если вы заключите текст в теги h2, то он автоматически выведется большими жирными буквами. На самом деле вы легко можете изменить эту установку по умолчанию:

h2{ font-weight: normal; font-size: 50px; }

Например, убрать жирность и увеличить базовый размер. Например, название сайта иногда выводится очень большим шрифтом

Тень текста

Любому текстовому фрагменту можно задать тень с помощью правила text-shadow. Давайте разберем его синтаксис на примере:

span{ text-shadow: 2px 2px 5px red; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Все текстовые фрагменты, заключенные в теги span, получат такую тень. Выглядит она так:

Первое числовое значение задает смещение по горизонтали, второе – смещение по вертикали, третье – размытие тени, это позволяет снизить ее резкость и насыщенность. Последний параметр – цвет.

Если какое-то из значений вам не нужно, просто поставьте 0. Цвет записывать обязательно. Параметры тени зависят в первую очередь от размера шрифта – чем он больше, тем больше можно делать смещение.

Крайне не рекомендую вам использовать тень для оформления основного текстового содержимого, она нужна скорее для улучшения красоты заголовков, каких-то пунктов списка или ячеек в таблицах, но никак не основной информации на странице, которая должна быть подана в более скромном виде.

Множественная тень

Да-да, в css можно через запятую определить для текста несколько теней. Тут важно только запомнить следующее правило: тени, которые располагаются в коде первыми, будут перекрывать те, которые расположены дальше, поэтому всем следющим теням необходимо задавать смещение больше, чтобы увидеть их на странице.

span{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua; } div{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua, 0 0 30px blue, 0 0 35px purple; } p{ font-size: 40px; text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green; }

Количество добавляемых теней неограниченно, смещение можно задавать как только с одной стороны, так и с двух, а можно не задавать вообще. Также тень может подходить к тексту и улучшать его внешний вид, а может только портить, все зависит от сочетаний цветов.

Тени являются мощным css3-инструментом для оформления текста и уже сегодня активно используются, в основном в заголовках, которые нужно по-особенному выделить среди остального текста.

Другие свойства

На этом, конечно, арсенал css приемов для стилизации текста не заканчивается. В этой статье вы можете прочитать еще о некоторых параметрах, таких, как жирность, начертание, варианты написания букв и их трансформация (ссылка на статью “Как задать шрифт”). Там же описывается и letter-spacing – межбуквенный интервал, который можно добавлять к нужным текстовым фрагментам, если это будет необходимо.

Оформление при наведении

Также можно и подчас нужно оформить текст красиво в css при наведении на него курсора мышки. В чем может заключаться такая стилизация? Например, в появлении подчеркивания, изменения цвета текста, или фонового цвета, изменения размера шрифта и т.д.

Интересно, что в последнее время в сайтостроении популярно делать все изменения плавно. Для этого просто пропишите нужному элементу на странице:

#header{ transition: (задержка в секундах или миллисекундах) например 1s; }

Теперь если к шапке добавить стили с псевдоклассом hover (то есть добавить изменение внешнего вида при наведении), то изменение некоторых значений будет происходить плавно, что само по себе немного красивее, по сравнению с резким переходом.

Итог

В css огромный арсенал средств для изменения внешнего вида текста. Самый мощный из них – это возможность использовать любые шрифты, задавая их через font-family, а также добавившаяся в css3 возможность добавлять тень. На этом я заканчиваю эту статью, посвященную приемам изменения текста, а вам желаю успешно использовать эти знания при разработке веб-сайтов. Дополнительную информацию по теме вы можете найти в премиум курсе по css3

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Красивое оформление текста при CSS на сайт

И можно применять различные вариаций, что и постараемся сделать, пока на двух, но как понимаете их намного больше. Второй у нас будет идти как небольшая размытость, но когда клик наводим, то появляется полноценное описание в красках, если можно так выразиться. Но там уже будут другие стили, что узнаете ниже и для этого будет для вас продемонстрирована демонстрация, чтоб можно визуально все оценить.

Как всем известно, что Гугл предоставляет бесплатные шрифты, и один их них под названием Audiowide будет использоваться здесь. Не нужно забывать, что некоторые идут на кириллицу и может получиться так, как видите на первое изображение, это также нужно учитывать. А так очень креативность решение использовать эффект на сайте, это может быть как в название статьи или как уже говорилось, в прописывание домена или самого интернет ресурса.

1) Первый вариант Эффектная анимация с текстом плюс тени:

Вот здесь как раз будет h2 и можно поставить в название вашего блога или портала, если у вас шаблон темный, для этого и идут стили и в них уже в самом начале прописан шрифт, который вы можете сменить на свой или убрать.

Это ставим где вам нужно.

Код

<h2>ZORNET.Ru: Сайт про uCoz</h2>

И под них стили, которые при нажатие на КЛИК появятся и можете скопировать.

2) Второй вариант на размытый текст:

Также разместим код где хотите видеть, здесь прописан центр, что можно убрать, так как нам нужен только класс blur, который и отвечает за все.

Код

<p>ZORNET.Ru</p>

Но и небольшие стили КЛИК и копируем в CSS сайта, также их можно заключить в style ниже. И здесь также как и на первом прикреплен шрифт.

PS — вы можете менять как гаму цвета или добавлять градиенты, также если брать первый пример, то задать движение теней как вы видите.

Источник: Dbmast.ru

Оформление текста с помощью CSS3 на практике

CSS3 дарит просто удивительные возможности оформления текста. Теперь в арсенале веб-мастера (или веб-дизайнера) появляются такие типографские приемы и уровень контроля о которых раньше можно было только мечтать. Все это как нельзя лучше демонстрирует руководство с блога EchoEnduring перевод которого я вам и предлагаю. В итоге получается просто нереально интересное оформление текста и даже не верится, что все это сделано посредством CSS стилей, воистину сейчас интернет технологии CSS3 и HTML5 выводят верстку на новый уровень. Мануал ниже будет отличным дополнением других примеров красивой типографики сайтов.

Перед стартом

Давайте определим стартовую точку. Мы начнем с создания небольшой веб-страницы для которой используем вот этот код:

<h2>Web Typography <span>A Demo For Beautiful Typography on the Web</span></h2>
<div>An <span>Article</span> by <span>Matt Ward</span></div>
<div>It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully. Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo - which is entirely driven by CSS - is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.Created: May 13, 2010</div>

<h2>Web Typography <span>A Demo For Beautiful Typography on the Web</span></h2> <div>An <span>Article</span> by <span>Matt Ward</span></div> <div>It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully. Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo — which is entirely driven by CSS — is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.Created: May 13, 2010</div>

Результат вы можете видеть на скриншоте:

На картине обычный себе текст как и должен быть для заданного HTML, он почти не стилизован, хоть и выглядит вполне прилично. Но то ли еще будет!

Шаг 1

Начнем с заголовка. Определим шрифт, размер, цвет, добавим тень, изменили интервал между символами:

h2{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px

Как красиво оформить текст с помощью CSS ~ Страницы Интернета

Давно хотел написать статью, как можно красиво оформить текст с помощью CSS. Сделать это достаточно просто и быстро. Для этой цели можно воспользоваться плагином, например, Special Text Box, а можно сделать самому, с помощью CSS стилей.

Чтобы сделать красивое оформление текста, придется добавить CSS код в файл стилей style.css, а потом при написании статей добавлять HTML код в нужном месте текста. На скриншоте ниже, Вы можете посмотреть, как выглядит фрагмент текста в красивом блоке

С помощью CSS, Вы можете сделать красивый блок для текста под шаблон Вашего сайта. Можно изменять размер и цвет текста, да и весь блок в целом тоже можно изменить. А вот уже готовое оформление под мой шаблон.

Заголовок блока

Здесь пишем текст, который хотим выделить от основного. Такие блоки для текста легко делать с помощью CSS. Измените цвет фона и текста, если нужно. В принципе, надо подобрать все цвета блока, чтобы он подходил для Вашего сайта.

Следующий CSS код нужно скопировать, и вставить в самом конце файла style.css, который находится в шаблоне.

1. /* оформление рамки блока */

2. .bloginfo {

3.     background: #FFD963;

4.    border: 1px solid #000000;

5.    padding: 3px 5px 3px 30px;

6.     margin: 11px;

7.     text-align: justify;

8.  -webkit-border-radius: 5px;

9.  -moz-border-radius: 5px;

10.  -o-border-radius: 5px;

11.  -khtml-border-radius: 5px;

12.  border-radius: 5px;

13. -webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */

14. -ms-filter: «progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)»;/*Internet   Explorer */

15.   box-shadow: 5px 5px 5px #847B6C;/*Opera и Firefox*/

16. }

17. /* оформление заголовка блока */

18. .bloginfo-head {

19.     font-size:1.4e

Как с помощью CSS красиво оформить текст в блоке

Давно хотел написать статью, как можно красиво оформить текст с помощью CSS. Сделать это достаточно просто и быстро. Для этой цели можно воспользоваться плагином, например, Special Text Box, а можно сделать самому, с помощью CSS стилей.

Возможно, многие посчитают, что лучше установить плагин за пару минут, чем самому лезь в коды. Не надо пугаться, все это легко осуществить и без плагина, тем более, Вы можете посмотреть видео, где я показываю, как это легко сделать. Разве Вам не хотелось бы свои статьи немного преобразить? Можете еще почитать как изменить шрифт в шаблоне WordPress.

При написании статей, бывает нужно выделить определенный фрагмент текста, чтобы привлечь внимание читателя. В этом случае можно изменить цвет текста или фона, а можно сделать текст наклонным, жирным, или подчеркнутым, но все это выглядит скучно.

Чтобы сделать красивое оформление текста, придется добавить CSS код в файл стилей style.css, а потом при написании статей добавлять HTML код в нужном месте текста. На скриншоте ниже, Вы можете посмотреть, как выглядит фрагмент текста в красивом блоке

С помощью CSS, Вы можете сделать красивый блок для текста под шаблон Вашего сайта. Можно изменять размер и цвет текста, да и весь блок в целом тоже можно изменить. А вот уже готовое оформление под мой шаблон.

Заголовок блока

Здесь пишем текст, который хотим выделить от основного. Такие блоки для текста легко делать с помощью CSS. Измените цвет фона и текста, если нужно. В принципе, надо подобрать все цвета блока, чтобы он подходил для Вашего сайта.

Следующий CSS код нужно скопировать, и вставить в самом конце файла style.css, который находится в шаблоне.

/* оформление рамки блока */ .bloginfo { background: #FFD963; border: 1px solid #000000; padding: 3px 5px 3px 30px; margin: 11px; text-align: justify; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */ -ms-filter: «progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)»;/*Internet Explorer */ box-shadow: 5px 5px 5px #847B6C;/*Opera и Firefox*/ } /* оформление заголовка блока */ .bloginfo-head { font-size:1.4em; font-weight: bold; color:#783E2B; margin: 0 0 5px 0; } /* оформление текста блока */ .bloginfo-txt { line-height: 1.3em; color:#4A00F; font-size:14px; }

Теперь при написании нового поста, надо в нужном месте вставить специальный код, в который надо добавить заголовок и текст. Скопировать код, можно по этой ссылке.

Посмотрите виде,

Как красиво оформить текст | Несколько CSS-примеров

Часто я применяю одно и то же оформление текста с помощью разных методов. В основном это код CSS. Чтобы окончательно закрепить эти приемчики, я для себя и для вас приведу несколько примеров, которые можно схожу брать на вооружение.

Как написать текст _нижним или ^{верхним} индексом

Чтобы получить такую надпись, посмотрите ее код:

Как написать текст <sub>нижним</sub> или <sup>верхним</sup> индексом

Как сделать горизонтальную черту определенного цвета

Для этого нужно в файле 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;}

После этого пишен наше слово с ошибкой с подчеркиванием:

 <span>ашипка</span> 

Как сделать отступ первой строки абзаца (как в книгах)

Легко:

<p>Ваш текст</p>

20 — это количество точек отступа. Можно применять и отрицательное значение — тогда первая строчка быдет выделяться из обзаца. Отступ/выступ действует только на первую строчку.

Пример:

Лорем ипсум.
Второй лорем ипсум.

Код примера:

<p>Лорем ипсум.<br><em>Второй лорем ипсум.</em></p>

Пять постов для перелинковки:

1. Хотите сами установить порядок страниц в блоге? Как отсортировать страницы.
2. Страницы отсортировали, а теперь очередь за ссылками? Как отсортировать ссылки.
3. Надоело записывать на листочках? Заведите записную книжку прямо в блоге! Как сделать в блоге список дел.
4. Нужно красивое облако тегов? Как красиво вывести облако тегов.
5. Хотите сойти за умного, вставив мудрые высказывания? Как вывести цитаты.

Урок 4. Оформление и декор текста в CSS

В качестве первого примера работы CSS свойств используем текст и попробуем его изменить: цвет, размер, положение, шрифт и тд. Практически на каждом сайте текст определённым образом декорируется для того, чтобы он был читабельным и не вызывал у пользователя раздражения, а наоборот, ощущение лёгкости. Заголовки, например, сделать другим цветом, ключевые фразу выделять жирным шрифтом и так далее.

font-size

Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.

Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать em, px, %.

Код CSS

#fs1em {

  font-size: 1em;

}

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

Список установленных значений

bold — полужирное начертание.

bolder — жирное начертание (со многими шрифтами либо не работает, либо отображает аналогично bold)

lighter — светлое начертание

normal — стандартное, обычное начертание.

Помимо установленных значений, как уже говорилось, можно использовать числовые единицы:

Код СCS

#bold {

  font-weight: bold;

}

#bold {

  font-weight: 900;

}

font-style

normal — обычное начертание текста.

italic — курсивное начертание.

oblique — наклонное начертание.

Код СCS

#italic {

  font-style: italic;

}

Спасибо за внимание!

текст-украшение | htmlbook.ru

• 
  Основное
• 
  HTML
• 
  CSS
• 
  Сайт

• Статьи
• Блог
• Практикум
• Форум

• Самоучитель HTML
• Справочник по HTML
• XHTML
• HTML5

• Самоучитель CSS
• Справочник по CSS
• Рецепты CSS
• CSS3

• Вёрстка веб-страниц
• Макеты
• Веб-сервер

Справочник CSS

• Как пользоваться справочником
• ! Важно
• -moz-border-bottom-colors
• -moz-border-left-colors
• -moz-граница-правая-цвета
• -moz-border-top-colors
• -moz-linear-gradient
• -моз-ориент
• -моз-радиальный-градиент
• -moz-выбор пользователя
• -ms-режим интерполяции
• -ms-радиальный градиент
• -o-линейный градиент
• -о-объект-подходит
• -о-радиальный градиент
• -webkit-linear-gradient
• -webkit-radial-gradient
• -webkit-user-select
• :: — moz-заполнитель
• :: — moz-selection
• :: — ms-браузер
• :: — ms-check
• :: — ms-clear
• :: — ms-expand
• :: — ms-fill
• :: — ms-раскрыть
• :: — значение ms
• :: — заполнитель-ввод-webkit
• :: после
• :: до
• :: первая буква
• :: первая линия
• :: выбор
• : активный
• : после
• : до
• : проверено
• : по умолчанию
• : отключено
• : пусто
• : включен
• : первенец
• : первая буква
• : первая линия
• : первый в своем классе
• : фокус
• : парение
• : неопределенный
• : неверный
• : язык
• : последний ребенок
• : последний тип
• : ссылка
• : не
• : nth-ребенок
• : энный-последний-ребенок
• : n-ый-последний-тип
• : nth-of-type
• : единственный ребенок
• : только тип
• : опционально
• : только для чтения
• : чтение-запись
• : требуется
• : корень
• : цель
• : действует
• : посетил
• @charset
• @ font-face
• @import
• @media
• @ стр.
• задержка анимации