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

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

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



">

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

Архив записей в блогах:
Via levkonoe Я, кстати, совершенно не удивлен. Update : Пишут , что эти розы не украденные, а выкованные на месте. Правда, не из осколков, а, скорее всего, из гильз . ...
Думаете коммунистический атеизм —  это не религия? Как бы не так! Самая настоящая религия! Никакая наука не доказывала и не доказала, что Бога нет. Атеизм —  полноценная вера, имеющая свою догматку, свои каноны, свою нравственность и свои традиции… Революционеры подменили ...
Посадил меня в кресло, опустился на колени. Закинул ноги себе на плечи. Когда дошло что он собирается делать, попыталась сопротивляться, но он строго осадил. Нет, не умеет он куни, но все равно приятно. Притянул за ошейник, поцеловал, вошел. И драл ...
В двух словах про фильм: война за независимость США через призму одной семьи. Трейлер фильма: Краткий сюжет: Заслуженный ветеран Бенджамин Мартин ведет спокойный и размеренный образ жизни, наслаждаясь покоем в загородном доме со своими семерыми детьми. Несколько лет назад у ...
Тут на днях у одного баварского врача в особняке обыск провели. Подозревали, что незаконно оружие хранит. Но чтобы столько: свыше семисот нарезных "стволов"! И боеприпасов - на сутки оборонительного боя. - А что вы хотите? - развел руками ...