Как сделать рамочку в вашем новом блоге-сообществе.

Как на mail.ru сделать заливку цветом или учимся делать рамочки.

В посте про перенос блогов в персональные сообщества многие сказали, что в сообществах им не хватает оформления. Будем учиться оформлять посты в рамочки
Тем, кто сейчас про себя сказал что-то вроде: "Фии... рамочки. Прошлый век. Все уже о них забыли, а вы только вспомнили", хочу сказать, что рамочки эти будут необычными.
Сделаем мы их не при помощи HTML, а с использованием стилей css.
У рамочек css есть преимущества. Они не тормозят, не "ломаются", не подвешивают страницы, загружаются мгновенно потому что совершенно ничего не весят. Рамочка css - это чистый код. И ещё, css гораздо круче чем HTML :))

Я сегодня планирую сделать две темы про рамочки css: одна проще, другая красивее. Пожалуйста, не нужно переходить ко второй теме, пока не разберётесь с первой.

Итак, посмотрите, вот такой код:

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

В сообществе отображается так:

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

Давайте посмотрим: какая команда в этом коде за что отвечает.

• border:6px ridge #c7c7c7 - граница: толщина стиль цвет

В этом коде вы можете менять толщину границы.
1px - совсем тонкая, еле заметная рамочка вокруг фона, 10px и больше - широкая, основательная рамочка.

Стиль границы определяет как она будет выглядеть. Ниже показано как отображаются разные стили:

inset

outset

double

groove

ridge

solid

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

• background:#F8F8FF - цвет фона

Наверное, вы уже догадались, что цвет фона подбираем всё в той же таблице цветов.
Выбирая сочетание цветов границы и фона, можно руководствоваться собственным вкусом или использовать сайт для подбора цветов, например, Сolorscheme (есть и другие).

• padding:8px;width:400px - отступ текста от границы и ширина рамки

Обратите внимание, рамки шириной больше 670px в записях в сообществе будут обрезаться, поэтому указывать ширину больше этого значения не нужно.

Что касается синтаксиса кода Команды отделяются одна от одной точкой с запятой, значения указываются через двоеточие, начало и конец команд обозначается кавычками.
Обязателен закрывающий тег

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

Собственноручно сделанные рамочки добавьте в комментарии к этому посту.
Большая просьба - для экспериментов используйте собственное сообщество, не забывайте, что результаты ваших тренировок в записях этого сообщества приходят на почту всем, кто на пост подписан.

Ещё хочу добавить, что идея использования рамочек css для оформления постов в личном сообществе принадлежит Елене Островской и в её сообществе вы можете увидеть примеры использования таких рамочек для оформления разных видов постов: 1, 2, 3, 4, 5, 6. 7. Как мне кажется, получилось очень хорошо.

Если вас заинтересовала тема рамочек css, другие команды, которые используются для их оформления, можно увидеть в этих постах:
Блочный элемент
Цвет рамок в блочном элементе
Добавление тени к тексту

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

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

Источник