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

четверг, 9 января 2014 г.

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

Учимся делать рамочки 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рх.

Удачи!





Комментариев нет:

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

Будь проще!!!