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

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

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

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

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

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

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

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

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

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

Посмотрите видео, как красиво оформить текст с помощью CSS

Похожие посты

11 комментариев к “Как красиво оформить текст с помощью CSS”

  1. Сергей

    Дак тут главное с умом подойти к этому вопросу

  2. Юрий

    Приветствую Вас, Ольга! Обычно приходят оповещения на почту, когда я отвечаю на комментарии. Возможно письмо попало в спам, поэтому Вы и не увидели его. А в блоге я пока ничего нового не написал, но тем хватает. К видео я добавил ссылку на статью, спасибо Вам. Как-то в ходе экспериментов, я одним махом удалил все описания ко всем роликам.

    хотелось бы пообщаться плотнее. За помощь буду благодарна не только спасибами

    Добавляйтесь в скайп — пообщаемся 🙂
    Skype: Yuriy_Zmushko

  3. Ольга

    Здравствуйте Юрий! Огромнейшее спасибо за ответ. Почему-то я получила его поздно, а вернее не получила, — просто пришла снова на Ваш сайт «подзарядиться» интересностями;) Ведь прямых ответов никто не дает, надо самой нарывать…
    А сегодня посмотрела на своем закрытом-тестовом сайте, что вследствие моих манипуляций исчезла табличка (по этой статье), а код я не сохранила. Вот и увидела Ваш ответ. Кстати, теперь на ютюбе нет адреса вашего блога под видео. надо поправить, потому что кто-то может захочет прийти и ознакомиться с Вашими статьями…
    Насчет своего сайта. НЕ ПОВЕРИТЕ, — я работаю оформителем на 18 сайтах, и заполняю ИМ товарами, но выпустить свой «на свободу» не решаюсь, никак с темой не определюсь. Или пинка не хватает
    ❓
    Желаю Вам провести нормально праздничные весенние дни…для меня, к сожалению, их не существует)

    P.S хотелось бы пообщаться плотнее. За помощь буду благодарна не только спасибами

  4. Юрий

    Здравствуйте, Ольга! Ну наконец-то я настроил комментарии. Просто я не знал, что пропала сама форма, пока не прочитал Ваше сообщение на Ютуб. Кстати, спасибо, что подсказали о проблемах с комментариями. Сам бы я не догадался.
    А вот создать свой сайт, или блог обязательно нужно! Ведь так Вы сможете свои услуги предлагать прямо на своем ресурсе. Я тоже долго думал, нужен ли мне блог.
    А то, что у Вас работа есть в интернете — уже круто! Работу многие ищут удаленно, но мало кто находит.

  5. Ольга

    Здравствуйте Юрий! Теперь все нормально. Пишу сообщить, что теперь можно комментировать.
    Большое Вам спасибо за уроки. Вчера работала по заказам, а сегодня снова буду изучать Ваши статьи. Вопросов куча, но понимаю, что не каждый автор с охотой отвечает на слишком уж «заковыристые» из них.
    Лично я добываю ответы по крупице….поэтому и не запустила еще ни одного сайта, хотя уже второй год работаю оформителем-заполнителем на сайтах заказчиков.

  8. Дмитрий

    Попробывал ваши css приёмы на своём сайте. Блок получился очень красивый.

  9. Андрей

    Здравствуйте Юрий! Спасибо за статью и ролик, думаю обязательно пригодится, при удобном случае использую.

  10. Юрий

    Пользоваться плагином — 100% удобнее, но много плагинов не хочется устанавливать.

Комментарии закрыты.

Прокрутить вверх