Опять про красивое оформление текста.

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


Нам понадобится для этого вот такой код.

<style>.set {
font-size:16px;
color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>
<div class="set ">здесь ваш текст</div>

Это мы получаем в итоге.

Дама сдавала в багаж Диван, Чемодан, Саквояж, Картину, Корзину, Картонку И маленькую собачонку. Выдали даме на станции Четыре зеленых квитанции О том, что получен багаж: Диван, Чемодан, Саквояж, Картина, Корзина, Картонка И маленькая собачонка.

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

Жил человек рассеянный На улице Бассейной. Сел он утром на кровать, Стал рубашку надевать, В рукава просунул руки Оказалось, это брюки. Вот какой рассеянный С улицы Бассейном!

Тут просто убрали из первого варианта значение border-radius:15px;.

 Ну и ещё, к примеру, увеличим закругление углов у рамки с правой и с левой стороны. Изменим в коде свойства border-left:5px и border-right:5px. И поменяем цветовой эффект. Имеем следующее.

У старика и старухи Был котенок черноухий, Черноухий и белощекий, Белобрюхий и чернобокий. Стали думать старик со старухой: - Подрастает наш черноухий. Мы вскормили его и вспоили. Только дать ему имя забыли.

В одном сообщении можно применить несколько подобных стилей. В этом случае нужно просто поменять везде название set на set1, set2 и так далее.

Как это реализовать. При написании сообщения переходим в режим HTML и в нужном месте вставляем этот код. если предполагается многократное использование такого эффекта, то первая часть кода CSS, а именно, то что заключено в теги <style>код </style> установить непосредственно в шаблон блога. Вкладка шаблон-изменить HTML . Находим, давно полюбившуюся всем строку ]]></b:skin> и над ней этот код устанавливаем. Но уже без этих тегов <style></style>. Сохраняем шаблон. А потом, когда очень захочется что-то выделить, берём этот маленький код HTML

<div class="set ">здесь ваш текст</div>

И при написании сообщения добавляем его. Как описано выше.

И сегодня у меня всё. Если возникнут вопросы спрашивайте. Разберёмся. Спасибо что читаете мои шпаргалки. До новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


16 комментариев:

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

    ОтветитьУдалить
  2. Оля, привет. Ну что-ты всё установить не возможно. Это просто как вариант. Главное, чтобы выбор был. Фишек много не надо это точно. В начале ведения блога все мы пробуем почти всё. в конце-концов останавливаемся на чём-то одном. А насчёт ранжирования -каждый год какую-то новую встряску устраивают. Ничто не стоит на месте. Не угнаться.

    ОтветитьУдалить
  3. Здравствуйте, Виктория! Я так и не поняла - как поисковики относятся к подобным вставкам? Положительно, отрицательно или нейтрально?

    ОтветитьУдалить
    Ответы
    1. Смотрите. Вот у меня подобным образом оформлен сам код в сообщении. На протяжении всего времени ведения блога я им пользуюсь. На самом деле этот код на CSS и он куда безобиднее тяжёлых фото на сайте или не нужных гаджетов. Те же ссылки на сторонние сайты куда больше тянут вес и не приветствуются поисковиками.Всё имеет место быть , но в меру. Видела блоги, на которых это применяется постоянно. Тот же http://blogodel.com/.

      Удалить
    2. Извините, что не по теме. А что такое "тяжелые" фото?

      Удалить
  4. Посмотрите последний комментарий к этому посту. там тоже такой вопрос задавали.http://www.shpargalochki.ru/2015/03/vsplyvajushhee-opisanie-u-kartinki.html#more

    ОтветитьУдалить
  5. Мне иногда надо как то выделить цитирование, пожалуй попробую заключить его в рамку, как в вашей шпаргалке.

    ОтветитьУдалить
    Ответы
    1. Насчёт цитирования. Тут нужно вместо set вставить везде blockquote .

      Удалить
  6. Добрый вечер, Вика! хочу воспользоваться Вашим советом, но у меня нет этих знаков ]]> Что делать, пожалуйста, подскажите.

    ОтветитьУдалить
  7. Добрый вечер, Вика! хочу воспользоваться Вашим советом, но у меня нет этих знаков ]]> Что делать, пожалуйста, подскажите.

    ОтветитьУдалить
    Ответы
    1. Ирина, ]]> в каждом шаблоне есть. Прочитайте здесь как это найти. http://www.shpargalochki.ru/2014/04/stili-css-v-shablon-bloga.html#more

      Удалить
  8. Здравствуйте,Вика!Попробую.

    ОтветитьУдалить
  9. Вика, спасибо большое.

    ОтветитьУдалить
  10. Вика, спасибо большое.

    ОтветитьУдалить
  11. Здравствуйте,Вика!Попробую.

    ОтветитьУдалить
    Ответы
    1. Всё должно получиться.

      Удалить

Пользовательский поиск