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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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(/info.png) 15px 50% no-repeat; — цвет фона, ссылка на фоновое изображение и указание его местоположения;
  • text-align:justify; — выравнивание текста;
  • color: #000 — цвет текста;

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

Вот пример:

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

Если вам потребуется несколько вариантов красивого выделения текста, создайте несколько стилей с разными картинками. Например, стили 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

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

Поделись информацией:
Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Подписка на рассылку

Комментарии
  1. Дмитрий

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

    • Андрей Назыров

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

      • Диана

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

      • Андрей Назыров

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

      • Диана

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

      • Андрей Назыров

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

      • Диана

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

  2. Татьяна

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

    • Андрей Назыров

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

  3. Юрий Ваценко

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

    • Андрей Назыров

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

  4. Татьяна

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

    • Андрей Назыров

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

  5. Pasagir

    Самый оптимальный вариант — 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. Aleksandra

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

    • Андрей Назыров

      Пожалуйста!

  17. Серж

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

    • Андрей Назыров

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

      • Серж

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

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

      • Андрей Назыров

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

  18. Серж

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

    • Андрей Назыров

      Пожалуйста!

  19. NI4KA

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

  20. Дмитрий

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

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

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

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

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

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

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

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

    • Андрей Назыров

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

  21. Александр

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

  22. eun

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

    • Андрей Назыров

      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. Of-crimea

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

    • Андрей Назыров

      Пожалуйста

  26. Ирина

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

    • Андрей Назыров

      Вставлять нужно в текстовый редактор. Похоже у вас не не подключаются почему-то стили.

      • Ирина

        Спасибо за ответ! Пробовала уже в текстовом, та же картина. Видимо это от шаблона зависит. А что можно еще сделать?

      • Андрей Назыров

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

  27. kinogrant

    Круто, спасибо, буду использовать у себя

  28. andrapp

    Подробно написали, круто! 🙂 Сделал себе, это реально красиво

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