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

топ 100 блогов Pro Comp — 09.01.2014 Как на 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, другие команды, которые используются для их оформления, можно увидеть в этих постах:
Блочный элемент
Цвет рамок в блочном элементе
Добавление тени к тексту

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

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

Как на 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, другие команды, которые используются для их оформления, можно увидеть в этих постах:
Блочный элемент
Цвет рамок в блочном элементе
Добавление тени к тексту

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

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



">

Оставить комментарий



Архив записей в блогах:
«Комсомолка» попыталась выяснить, откуда в двух метрах от излюбленного места отдыха рязанцев помойка и груды битых стекол. Лето только началось, и жара не достигла своего апогея, но рязанцы уже активно потянулись на пляжи. Даже в будний день у ...
Ольга Бузова и раньше ни от кого не скрывала подробности своего тела, да и сейчас не собирается этого делать. Новый обнажённый кадр (под катом), который она выложила в инста, вызвал негодование фолловеров. Позируя, Бузова представила, что ловит такси голышом. Находясь при этом на ...
Вчера отмечали открытие 90-го сезона ЦДРИ. Что мы знаем об этом легендарном доме на Пушечной? То, что он, к счастью, почти забыт, как «Здание Союза коммунальников, в котором Ленин дважды выступал». А вот то, что здесь впервые попробовал себя в роли режиссера Станиславский, - знают ...
Писать не пишется.... Зато могу показать картинки! Пока большая часть мира зеленеет и греется на солнышке, мы цветём и зарастаем по-своему. Этот розовый снеговик с бородой - Я , которая пыталась вчера сходить в магазин и попала в пыльную бурю... ...
Похоже, у меня складывается традиция раз в год писать какой-нибудь такой пост, на который кто-нибудь так сильно обижается, что аж кюшать не может. (Ничего личного, просто к слову пришлось.) И пишет, что ах какая же я плохая, да как я посмела и так ...