Тем, кто сейчас про себя сказал что-то вроде: "Фии... рамочки. Прошлый век. Все уже о них забыли, а вы только вспомнили", хочу сказать, что рамочки эти будут необычными. Сделаем мы их не при помощи HTML, а с использованием стилей css.У рамочек css есть преимущества. Они не тормозят, не "ломаются", не подвешивают страницы, загружаются мгновенно потому что совершенно ничего не весят. Рамочка css - это чистый код. И ещё, css гораздо круче чем HTML :))
Итак, посмотрите, вот такой код:
В сообществе отображается так:
Под голубыми небесами
Великолепными коврами,
Блестя на солнце, снег лежит;
Прозрачный лес один чернеет,
И ель сквозь иней зеленеет,
И речка подо льдом блестит.
Давайте посмотрим: какая команда в этом коде за что отвечает.
- border:6px ridge #c7c7c7 - граница: толщина стиль цвет
В этом коде вы можете менять толщину границы.
1px - совсем тонкая, еле заметная рамочка вокруг фона, 10px и больше - широкая, основательная рамочка.
Стиль границы определяет как она будет выглядеть. Ниже показано как отображаются разные стили:
Цвет границы выбираем в таблице цветов. В ней показано как выглядят различные цвета и возле каждого указывается его название и шестнадцатеричный код цвета.Можно использовать или название, или код цвета - на ваше усмотрение.
- background:#F8F8FF - цвет фона
Наверное, вы уже догадались, что цвет фона подбираем всё в той же таблице цветов.
Выбирая сочетание цветов границы и фона, можно руководствоваться собственным вкусом или использовать сайт для подбора цветов, например, Сolorscheme (есть и другие).
- padding:8px;width:400px - отступ текста от границы и ширина рамки
Обратите внимание, рамки шириной больше 670px в записях в сообществе будут обрезаться, поэтому указывать ширину больше этого значения не нужно.
Что касается синтаксиса кода.
Команды отделяются одна от одной точкой с запятой, значения указываются через двоеточие, начало и конец команд обозначается кавычками.
Обязателен закрывающий тег
Кажется всё :)
Я предлагаю вам попробовать придумать собственный стиль рамочки, поэкспериментировав с шириной и стилем границы, подобрав различные сочетания цветов и, разумеется, подобрать содержание для этой рамочки - стихи или короткие высказывания.
Собственноручно сделанные рамочки добавьте в комментарии к этому посту.
Большая просьба - для экспериментов используйте собственное сообщество, не забывайте, что результаты ваших тренировок в записях этого сообщества приходят на почту всем, кто на пост подписан.
Ещё хочу добавить, что идея использования рамочек css для оформления постов в личном сообществе принадлежит Елене Островской и в её сообществе вы можете увидеть примеры использования таких рамочек для оформления разных видов постов: 1, 2, 3, 4, 5, 6. 7. Как мне кажется, получилось очень хорошо.
Если вас заинтересовала тема рамочек css, другие команды, которые используются для их оформления, можно увидеть в этих постах:
Блочный элемент
Цвет рамок в блочном элементе
Добавление тени к тексту
В следующей теме выложу пример более сложной рамочки в которой будут использоваться некоторые из этих команд.
Мне кажется, это просто чудо, когда буквы и цифры превращаются в что-то осязаемое, чем можно любоваться самому и что можно показать другим. И это чудо вы можете создать сами, своими руками. Всё, что для этого требуется: терпение, внимательность, аккуратность и, разумеется, целеустремлённость и настойчивость.
Комментариев нет:
Отправить комментарий
Будь проще!!!