Учимся делать рамочки часть вторая

Учимся делать рамочки css. Часть 2
Эта тема - продолжение предыдущей и переходить к ней можно только разобравшись как следует с той. Не секрет, что рамочки на mail.ru делали далеко не все. Многие просто брали чужие коды и добавляли в них свой текст. Так неинтересно
Самое замечательное в рамочке - процесс создания, когда вы выступаете творцом, и мёртвые знаки и символы под вашими руками оживают, превращаясь во что-то осязаемое. Создавая собственные рамочки, вы можете проявить свой вкус, талант и фантазию.

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

Рамочка получилась нежная и романтичная:

Ваш текст... музыка... стихи...

Её код:

<div align=center><font style="display:block;padding-bottom:100px;"><font style="display:block;width:500px;box-shadow:3px 3px 6px #FF7F00;background-color:#FFFAF0;border:2px inset yellow;border-radius:10px;font-size:14pt;color:#FF7F00;text-align:center;padding:20px;padding-bottom:0px;padding-top:80px;">Ваш текст... музыка... стихи...<div><font style="display:block;position:relative;bottom: -100px"><img src="http://content.foto.mail.ru/mail/irbris/_blogs/s-14968.jpg"></font></div></font></font></div>

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

На скрине выделены те значения, меняя которые можно будет получить свою рамочку, совершенно непохожую на эту:



Некоторые команды расшифрую, с остальными можно разобраться самостоятельно - меняя их значения и сравнивая результаты:

1. padding-bottom:100px - отступ цветка вниз от края рамочки, равный примерно половине высоты картинки
2. width:500px - ширина рамочки
3. box-shadow:3px 3px 6px #FF7F00 - тень границы: сдвиг тени по горизонтали, вертикали, ширина и цвет
4. background-color:#FFFAF0 - цвет фона
5. border:2px inset yellow - граница: ширина и цвет
6. border-radius:10px - заокругленность рамочки
7. font-size:14pt;color:#FF7F00 - размер и цвет шрифта
8. padding:20px;padding-bottom:0px;padding-top:80px - отступ текста от границ
9. bottom: -100px - равно по значению и противоположно по знаку padding-bottom в первом пункте
10. http://content.foto.mail.ru/mail/irbris/_blogs/s-14968.jpg - картинка на прозрачном фоне, которая размещается внизу рамочки. Подходящее изображение ищем в любом поисковике по запросу "клипарт png на прозрачном фоне", загружаем в майловский фотоальбом, а потом редактируем ссылку на фото, сменив букву i на s, так, как рассказано в этой теме.

В комментариях к этой теме выложите, пожалуйста, те рамочки, которые сумели придумать и сделать сами. Постарайтесь их сделать небольшими, для этого подбирайте небольшую картинку (не забудьте изменить значения padding-bottom и bottom) и установив ширину рамочки 400рх.

Удачи!

Как сделать рамку на мейле

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

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

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

<font style="display:block;border:6px ridge #c7c7c7;background:#F8F8FF;padding:8px;width:200px;"> Под голубыми небесами
Великолепными коврами,
Блестя на солнце, снег лежит;
Прозрачный лес один чернеет,
И ель сквозь иней зеленеет,
И речка подо льдом блестит.</font>

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

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

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

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

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

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

inset

outset

double

groove

ridge

solid

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

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

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

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

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

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

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

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

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

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

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

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

Сертификат на никнейм Ираида Скорпион

Зарегистрируй свой никнейм!

Поздравляю с годом Лошади!

Мой маленький МИР: Сервис украшения сайтов "Дари! разработан компание...

Мой маленький МИР: Сервис украшения сайтов "Дари! разработан компание...: Сервис украшения сайтов "Дари! разработан компанией Exiterra - создание и продвижение сайтов .

Сервис украшения сайтов "Дари! разработан компанией Exiterra - создание и продвижение сайтов.

Курица с сыром В слоеном тесте... и др.

Слоёные косички с курицей и сыром Ингредиенты: готовое слоеное тесто (пресное) твердый сыр копченая куриная грудка желток Приготовление: Нарезаем слоеное тесто полосками шириной в 2 см (длину варьируйте сами). Полосок должно быть парное количество. На полоску теста выкладываем маленькими кусочками грудку. Накрываем сверху сыром   И еще одной полоской теста. Краешки защипываем    И аккуратно заворачиваем слойку спиралькой. Выкладываем на противень на пергамент. Смазываем сверху тесто желтком и отправляем в разогретую духовку (200 градусов). Выпекаем до румяности и пышности (мин. 15) И еще один рецептик - быстро и вкусно... Слоеного теста, что может быть проще??? Раскатываем магазинное(замечательное) слоеное тесто в квадрат и раскладываем начинку ровным слоем, посыпаем сахаром, совсем немного, т.к. все составляющие нашей начинки и так достаточно сладкие и корицей, заворачиваем рулетом, защипываем там где это нужно, смазываем сахарным сиропом и посыпаем кунжутом, все, ставим в горячую духовку и смотрим, вытаскиваем, едим. Начинка у меня такая: Черночлив 100гр., резанный на 8 частей примерно Изюм 100гр. Яблоко почищеное и порезанное одно Орехи грецкие 100гр. Корица, сахар. Приятного аппетита,друзья!!! Только мне кажется ,для приготовления понадобится не менее 30 минут, т.к. слоеное тесто жирное и так быстро не приготовится. Нашла для Вас ЖМИ: Это мой Блог.