Home / Блоговедение / Как красиво оформить текст на странице?

Как красиво оформить текст на странице?

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

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

Способов красиво оформить текст на web-странице предостаточно, главное не переборщить с этим делом, иначе текст будет просто нечитаемый. Вы, наверное, не раз встречали сайты и блоги, которые пестрят всеми цветами радуги. Это не есть хорошо. Глядя на такие страницы, глазу не за что зацепиться, и вместо задачи блога – удержать пользователя, получается обратный эффект.

Такие страницы создают нагрузку на наше зрение, и мы подсознательно осознавая это, в спешке покидаем такие веб-страницы.

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

Красивое выделение текста с помощью HTML.

С помощью HTML можно заключить какой-то кусок теста в блок, задать ему фон и рамки определенного цвета.

Плюсы такого способа выделения текста – его простота. Минусом же является необходимость постоянного вставления необходимого кода в текст web-страницы.

Вот пример выделения текста таким способом:

Это красиво оформленный текст. Оформить текст таким образом можно при помощи HTML.
Ничего сложного в этом нет, справиться даже новичок 🙂

А вот сам код, при помощи которого я выделил текст таким образом:

<div style="height: 70px; width: 600px; margin: auto; background-color: #c7fcec; border-left: 4px solid #ff0026;" align="center">Это красиво оформленный текст. Оформить текст таким образом можно при помощи HTML. Ничего сложного в этом нет, справиться даже новичок )</div>

При желании можно отредактировать код под себя, вот вам подсказка как это сделать:

  • height:120px – высота блока;
  • width:500px – ширина блока;
  • background-color:#c7fcec – цвет фона;
  • border-left – местоположение рамки, в моем случае – слева;
  • 4px solid #ff0026 – ширина рамки и ее цвет;

Даже если вы незнакомы с HTML вы справитесь с этой задачей, просто поэкспериментируйте с цветами и размерами.

Красивое выделение текста с помощью CSS.

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

Это красиво оформленный текст. Оформить текст таким образом можно при помощи CSS. Ничего сложного в этом нет, справиться даже новичок 🙂

Вот еще один подобный вариант:

Это красиво оформленный текст. Оформить текст таким образом можно при помощи CSS. Ничего сложного в этом нет, справиться даже новичок 🙂

Чтобы выделить красиво текст таким образом, вам нужно:

Возможно вас заинтересует:  Как правильно и быстро перевести шаблон Wordpress

1) Найти подходящую картинку, желательно в формате png размером 40 X 40 пикселей и загрузить ее на хостинг. Я загрузил картинку в библиотеку изображений напрямую через браузер.

2) Скопировать вот этот CSS-код и вставить его себе в файл style.css

.info{
margin: 10px;
padding: 15px 17px 15px 80px;
border: 1px solid #026194;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 3px #bbb;
-moz-box-shadow: 2px 2px 3px #bbb;
-webkit-box-shadow: 2px 2px 3px #bbb;
background: #fff url(ссылка на изображение) 15px 50% no-repeat;
text-align:justify;
color: #000
}

стиль CSS

3) Отредактировать код под себя. Вот подсказка за что отвечает каждый кусок кода:

  • margin: 10px; — отступ рамки от внешних элементов;
  • padding: 15px 17px 15px 80px; — отступ вложенного текста от рамки;
  • border: 1px solid #1e8fce; — толщина, формат и цвет рамки;
  • border-radius: 10px; — радиус скругления углов рамки для IE9 и Opera;
  • -moz-border-radius: 10px; — радиус скругления углов рамки для Firefox;
  • -webkit-border-radius: 10px; — радиус скругления углов рамки для Safari и Chrome;
  • box-shadow: 2px 2px 3px #bbb; — смещение, толщина и цвет тени рамки для Opera;
  • -moz-box-shadow: 2px 2px 3px #bbb; — смещение, толщина и цвет тени рамки для Firefox;
  • -webkit-box-shadow: 2px 2px 3px #bbb; — смещение, толщина и цвет тени рамки для Safari и Chrome;
  • background: #fff url(http://nazyrov.ru/info.png) 15px 50% no-repeat; — цвет фона, ссылка на фоновое изображение и указание его местоположения;
  • text-align:justify; — выравнивание текста;
  • color: #000 — цвет текста;

4) Вставляем текст и проверяем. Перед и после текста вставляем теги

<div class="info"></div>

Вот пример:

<div class="info">
Это красиво оформленный текст. Оформить текст таким образом можно при помощи CSS.
Ничего сложного в этом нет, справиться даже новичок
</div>

Если вам потребуется несколько вариантов красивого выделения текста, создайте несколько стилей с разными картинками. Например, стили info (для выделения информативного текста), attention (важная информация) и т. п.

Вот у меня 2 стиля CSS для выделения текста, где все идентично, кроме картинки.

Думаю, что объяснил просто и доступно, если же все-таки что-то непонятно по красивому выделению текста с помощью CSS, задавайте вопросы в комментариях.

Красивое выделение текста с помощью плагинов.

Этот способ красивого выделения текста на блоге WordPress тоже очень прост, что является его преимуществом. Но я бы не рекомендовал выделять текст при помощи плагина. Причина банальна – еще один плагин, который будет тормозить загрузку вашего блога.

Если же вы все-таки решили красиво выделять текст с помощью плагина, тогда вперед.

Возможно вас заинтересует:  Как изменить цвет ссылок вашего блога или сайта?

Плагин называется wp-note. Скачать его можно на официальном сайте WordPress. Скачав и установив его на движок WordPress, сразу можно приступать к выделению текста, так как настроек у этого плагина нет.

Вам нужно лишь заключить текст в соответствующие теги. Всего доступно пять вариантов, для каждого варианта свои теги.

Вот примеры выделения текста с помощью этого плагина:

выделение текста плагином

А вот эти теги нужно вставлять в текст:

[note]Это красиво оформленный текст. Так при помощи плагина можно выделить заметку.[/note]

[help]Это красиво оформленный текст. Так при помощи плагина можно выделить какое-либо пособие.[/help]

[tip]Это красиво оформленный текст. Так при помощи плагина можно выделить важную информацию.[/tip]

[warning]Это красиво оформленный текст. Так при помощи плагина можно выделить предупреждение.[/warning]

[important]Это красиво оформленный текст. Так при помощи плагина можно выделить текст, который необходимо запомнить.[/important]

При необходимости, можно изменить картинки, которые отображаются слева от выделяемого текста. Для этого замените картинки на свои, не меняя их названия. Они должны находиться в корне вашего блога.

Еще раз повторюсь, лучше выделяйте текст при помощи CSS. Именно CSS дает преимущество уникальности. Благодаря CSS можно сделать любой блок, которого вы не встретите ни на одном блоге.

Кроме этих способов, текст можно украсить красивым спойлером. О том, как сделать красивый спойлер для блога на WordPress я писал здесь.

Как создать тень текста при помощи CSS?

Как я уже неоднократно замечал, при помощи CSS можно творить что угодно с текстом. Очень эффектно смотрится тень, созданная при помощи стилей CSS.

Тень в CSS задается при помощи свойства text-shadow. Это замечательное свойство используется верстальщиками для создания вдавленного, выпуклого и 3D текста. Единственным минусом данного свойства является отсутствие его поддержки в IE.

Для свойства text-shadow задаются следующие параметры: смещение по горизонтали, смещение по вертикали, размытие и цвет.

Пример кода:

.naz {
 width: 500px;
 height: 140px;
 text-align: center;
 font: bold 72px Arial, sans-serif;
 color: #161616;
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* Свойство тени текста */
 background:#222;
 }

И его результат:

стиль текста

3D текст при помощи CSS

На основе свойства тени текста можно сделать 3D текст. Подобный пример демонстрирует сайт markdotto.com

Код 3D текста:

.naz1 {
 width: 500px;
 height: 140px;
 text-align: center;
 font: bold 72px Arial, sans-serif;
 color: #FFFFFF;
 text-shadow: 0 1px 0 #ccc, 
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #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);
 background:#0E8DBC;
 }

Результат 3D текста при помощи CSS:

3d текст CSS

А вы выделяете текст, и каким образом?

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

58 комментариев

  1. Дмитрий:

    Отлично! Давненько хотел прочитать подобную статью) Теперь знаю как менять цвет текста в статье, добавлять раимки и т.д. Спасибо)

    Ответить
    • Андрей Назыров:

      Пожалуйста, Дим 🙂

      Ответить
      • Андрей, я вставила свою картинку, прописала путь, но картинка не высвечивается, и фон тоже не меняется, я код цвета поставила синий, а он так и остался белым(

      • Диана, странно, сейчас повторно проверил код, все работает.

      • Я код вставила в самом низу файла style.css, может его надо до какого-то тега вставлять? Не работает у меня, все красиво, даже фон уже в принципе не важен, белый самый оптимальный, но вот картинка почему не ставится не понимаю.(

      • Диана, возможно тебе придеться отредактировать немного файл style.css
        Можешь написать на почту какая у тебя тема оформления блога, я отредактирую код и вышлю на e-mail.

      • Ок, только у меня не бесплатный шаблон. А что там и как в этом стайле, не понимаю совсем.(
        Думала что-нибудь другое поищу, оформление имею ввиду, а ничего не нравится больше, этот вид оформления для меня самый аккуратненький.)

  2. Андрей, спасибо за обзор прям выбирай что хочешь, обязательно воспользуюсь твоей статьей. Плагин не буду устанавливать, а вот два других попробую обязательно. 🙂

    Ответить
    • Андрей Назыров:

      Пожалуйста. Татьяна, воспользуйся лучше CSS. Я сам только попробовал этот способ неделю назад, и понял, что без CSS красивый блог не сделать 🙂

      Ответить
  3. Андрей, я как-то боюсь лезть в коды, пользуюсь плагином wp-note. А так пост был очень полезный.

    Ответить
    • Андрей Назыров:

      Каждому свое 🙂 Просто wp-note это стандартный вариант, который есть на много блогах, а с помощью CSS можно сделать что-то свое уникальное.

      Ответить
  4. Ура, у меня получилось, спасибо еще раз. 🙂

    Ответить
    • Андрей Назыров:

      Всегда пожалуйста! 🙂

      Ответить
  5. Самый оптимальный вариант — CSS. Хорошая статья для эстетов 🙂

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

      Ответить
      • Андрей Назыров:

        Для новичка конечно удобнее плагин, но с помощью CSS можно делать такие вещи, что можно позавидовать.
        Я тоже только начинаю осваивать CSS 🙂
        К тому же я вроде все доступно описал. Вот у Татьяны сразу получилось, вчера зашел на ее блог, текст в рамке выглядет даже лучше чем у меня 🙂

  6. Андрей, ну прям расхвалил 🙂

    Ответить
    • Андрей Назыров:

      🙂

      Ответить
  7. Андрей:

    Действительно, спасибо за информацию. Хоть я и пользуюсь двумя плагинами для оформления текста, но мне понравилось через HTML , надо попробовать. 😉

    Ответить
  8. Андрей, вот как раз новичкам лезть в CSS не нужно, ну эт мое мнение.

    Ответить
    • Андрей Назыров:

      Юр, я же не советую изменять код. Просто код, который предоставляю я, нужно вставить в самый низ файла style.css Это никак не повлияет на работу блога. Я сам не очень лажу с CSS, но попробовав один раз, понял какие огромные возможности он дает 🙂

      Ответить
      • Лариса:

        Андрей, вставила код в самый низ файла, редактирую в теле статьи в HTML, но ничего не выходит, увы…

      • Лариса, я не понял, у вас не получается красиво оформить текст при помощи CSS или HTML?

  9. Классная штука, спасибо Андрей)

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

    Ответить
  11. Иногда хочется в тексте выделить что-нибудь важное или подчеркнуть текст. Я тоже раньше не знала, как можно это сделать. Потом нашла информацию о плагине WP-note. Выделяю им. А у вас, Андрей, много способов описано. Спасибо. Если будет надо что-то выделить по-другому, буду знать, где искать информацию.

    Ответить
    • Андрей Назыров:

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

      Ответить
  12. Да, но как в качестве фона записи или страницы использовать картинку, а не однотонный фон?

    Ответить
    • Женя, точно так же. В файле style.css в качестве фона нужно прописать ссылку на изображение.

      Ответить
      • Женя:

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

  13. Андрей:

    Андрей, вопрос. Вот у тебя в статье образец выделения плагина WP-Note это выделение ты делал плагином или нет. Если плагином, то где он.удален?

    Ответить
    • Да, делал плагином, заскриншотил и удалил его. Сейчас выделяю текст в CSS

      Ответить
      • Андрей:

        Понятно. Теперь попробую разобраться со стилями, может что то и получится. Хотя надежды маловато. Но попробовать стоит.

      • Там все просто 🙂

  14. И это я тоже люблю) Андрей, ты мастер прям)) Вроде все так и просто ведь) Я для себя выбрала вариант «Красивое выделение текста с помощью CSS.» Думаю, самое простое, без нагрузок и красиво, еще и картинку сама любую могу подставить))
    А можно создать 2 таких стиля, и просто потом выбирать тот или другой?)

    Ответить
  15. Андрей, просто выручил этой статьей. Совсем не представлял как делать рамки. Первый вариант мне очень подходит, Минималистично и очень красиво. Все сделал по инструкции но, когда равняю текст по левому краю он вплотную прилипает к рамке.

    Как текст отодвинуть от рамки правее? к примеру где пишешь подсказки у тебя нормально все..не прилипает..

    Ответить
    • В подсказках текст в блоке CSS. Этот способ намного лучше. Способ, описанный с использованием HTML не на каждом шаблоне WordPress подойдет. Могут краказябры повылазить 🙂
      Попробуй CSS, не пожалеешь!

      Ответить
  16. Спасибо большое за статью, очень давно искала подобную информацию. Статей пишу много, но вот их отформатировать все никак. И все они были какими-то не привлекательными, да из-за этого отказов просмотра много. Но вот в последнее время когда я наладила форматирование все пошло как по маслу. Еще раз спасибо!

    Ответить
  17. Приветствую!
    Попробовал у себя на сайте,рамка появилась, но фоновый рисунок не появился.
    Не подскажете,что у меня не так?

    Ответить
    • Серж, попробуйте поменять значение padding — 80px. Скорее всего изображение есть, просто смещено левее..

      Ответить
      • Я попробовал разные Padding
        Текст смещается туда и сюда…

        Однако фотка вообще не появляется)
        Я хотел бы, что бы картинка стала фоном цитаты, я про это забыл сказать)

      • Я код проверил еще раз, все работает. Может у вас конфликтует с чем-то.

  18. Серж:

    Да,вероятнее всего…
    Пускай так будет, тоже хлеб…
    Спасибо)

    Ответить
  19. Совет для тех, кто любит вставлять в текст цитаты. Естественно их надо выделять. С цитатами проблема в том, что они понижают уникальность текста. Чтобы этого не происходило, необходимо использовать отдельный код для цитат.

    Ответить
  20. Всем, у кого не получилось по этой методике! СМОТРИМ СЮДА

    1. В строке
    background: #fff url (http://nazyrov.ru/wp-content/uploads/2014/06/info.png) 15px 50% no-repeat;

    НЕ ДОЛЖНО БЫТЬ пробела после url, т.е. корректная строка должна выглядеть следующим образом:

    background: #fff url(http://nazyrov.ru/wp-content/uploads/2014/06/info.png) 15px 50% no-repeat;

    2. Когда мы в тексте записи вставляем . Нам нужно вставлять так:
    ваш текст

    т.е. ковычки другого типа.

    Из-за этих двух пунктов я промудо… промучился лишний час.

    Спасибо автору за пост, он реально полезен и исчерпывающий, но вот эти моменты нужно всё-таки поправить. Спасибо!

    Ответить
    • Дмитрий, спасибо за замечание. Я несколько разменял шаблон и плагин вывода кода на странице. В какой-то момент скорее всего случайно поставил пробел. Сейчас исправлю.

      Ответить
  21. Добрый вечер!
    Не могу понять где у меня ошибка?
    В CSS есть «родитель» — блок серого цвета. PARENT у него замечательно отработал.
    Далее — внедряю в него «Это красиво оформленный текст». И PARENT отрабатывает ТОЛЬКО снизу и по бокам. А сверху — тю-тю… Всю башку уже сломал — решил спросить.
    Скрин-шот страниц:

    Ответить
  22. У меня почему-то не работают указанные в статье css-скрипты.

    Ответить
  23. Алексей:

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

    этот вариант работает.
    А ваш или с любого другого сайта аналог никак. Очень интересен объемный текст. Но не работает. Не подключается заданные стили. Тема Нирвана. Есть ли решение?
    Это прописываю в стилях
    .naz1 {
    width: 500px;
    height: 140px;
    text-align: center;
    font: bold 72px Arial, sans-serif;
    color: #FFFFFF;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #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);
    background:#0E8DBC;
    }
    Это на странице, чтобы вызвать соответствующие стили

    Ответить
    • Алексей, а что прописываете на странице, чтобы вызвать стили? И можно ссылку на сам сайт?

      Ответить
  24. Отличная подборка, себе на сайт поставил, но немного пришлось переделать.

    Ответить
  25. Понравился стиль для абзацев .info{}, спасибо добавил себе на сайт и в коллекцию!)

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *