ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Оформление текста в HTML — Выноски Callout

.

oformОформление текста в HTML — Выноски Callout

Всем доброго времени суток и приятного прочтения!

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя на определенном, важном, ключевом участке статьи, либо на нескольких таких участках.

Либо напротив, данным оформлением можно выделить, вынести отрывок текста, выходящий из контекста статьи.

Это может быть как просто рамка вокруг или с края нужного отрывка текста:ramka1

Либо что-нибудь поярче, с добавлением изображения:

ramka2

Причем оформление HTML CSS выносок ограничено лишь воображением. Я набросал несколько примеров, которые вы с легкостью можете применить в своих проектах, а может, посмотрев саму идею, сделать свои оригинальные.

Оформление текста — Выноски Metro UI Colors

Подбираем цвет для выносок
Вот цвета, подобранные профессиональным дизайнером в стиле Metro UI Colors. Выноски «разукрашены» с использованием данной цветовой схемы.  Для подбора цветовой палитры я пользовался сайтом- color-hex.com.

tsveto

Цветовая схема из примера не является шаблоном, при оформлении статьи подбирайте цвета, уже используемые на вашем сайте. Можно воспользоваться небольшой программой для снятия цвета с монитора- colorcop. Далее нужно заменить в файле example.css, либо в отрывке кода исходный набор цветов на свои собственные, например бардового.callout-warning.

Скачиваем архив с файлами при помощи данной программы!

В архиве находятся:

  • Файл example.css — в нем находятся стили для оформления текста выносками, которые используются в примерах;
  • Файл example.html — HTML разметка примеров;
  • Папка img — внутри одна картинка для наглядности, также используемая в примерах;
  • Папка base — является вспомогательной и не имеет отношения к данным примерам (в ней стили для внешнего оформления демонстрационной страницы);

CSS и HTML код для первого примера с DEMO страницы:

Использование иконок

В примере 4 и 5 используется набор иконочных шрифтов  Font Awesome, о подключений которого будет рассказано отдельно!

Аналогичным способом можно оформлять цитаты и прочие элементы статей сайта.

БЕРЕГИТЕ СЕБЯ!

 




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

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