Плетение бисером схемы из журналов

Плетение бисером схемы из журналов
Плетение бисером схемы из журналов
Плетение бисером схемы из журналов
Плетение бисером схемы из журналов
Плетение бисером схемы из журналов

Привет друзья. Каждый из нас понимает, что красиво оформленный тест на странице вашего блога или сайта – это 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. Ничего сложного в этом нет, справиться даже новичок 🙂

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

Возможно вас заинтересует:  Как я пришел в блогосферу, зачем мне блог и что представляет блогосфера сегодня?

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

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

Плетение бисером схемы из журналов Плетение бисером схемы из журналов Плетение бисером схемы из журналов Плетение бисером схемы из журналов Плетение бисером схемы из журналов

Статьи по теме:



Пиелонефрит у детей схема

Макияж на хэллоуин для девушек клоун

Простые схемы узоров спицами для пальто

Вяжем серьги со схемами

Украшать кофты своими руками