Цветок для отделки спицами обычным набором набрать 56 петель провязать 14 рядов лицевой...
Квантовый Переход - (0)Единое Человечество – идеология нового времени Нет ничего сильнее идеи, время которой пришло...
Матрица Судьбы по дате рождения. Предназначение и расчёты. - (0)Матрица Судьбы по дате рождения. Предназначение и расчёты. Сегодня ...
ИНСТРУКЦИЯ ДЛЯ ТЕХ, КТО НЕ ПОНЯЛ, КУДА ПОПАЛ ПРИ РОЖДЕНИИ. - (1)ИНСТРУКЦИЯ ДЛЯ ТЕХ, КТО НЕ ПОНЯЛ, КУДА ПОПАЛ ПРИ РОЖДЕНИИ. 1. Ты получишь 7 разных тел и спящее с...
Влияние Сатурна на жизнь человека (часть 3) - (0)Влияние Сатурна на жизнь человека (часть 3) Сатурн отвечает и за страхи: страх смерти, страх публ...
Костюм крючком » Сайт "Ручками" - делаем вещи своими руками - (0)
Юбка крючком, комбинируем ткань и вязание крючком » Сайт "Ручками" - делаем вещи своими руками - (0)
Юбка крючком пляжная » Сайт "Ручками" - делаем вещи своими руками - (0)
Ажурное вязание, юбка и жилет » Сайт "Ручками" - делаем вещи своими руками - (0)
Женский костюм, длинная юбка и туника » Сайт "Ручками" - делаем вещи своими руками - (0)
Всегда под рукойаналогов нет ^_^
Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Photoshop onlineДля того чтоб отредактировать картинку совсем не обязательно иметь фотошоп на комьпьютере. Это можно сделать с помощью приложения online photoshop =)
Смешные цитаты и ICQ статусыСмешные цитаты и ICQ статусы из социального цитатника basher.ru
РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФШ |
Многие спрашивают, как сделать рамочку с круглыми углами?
ЕгороваТатьяна уже разьясняла,как это делается: тут
Немного дополню её, в своём маленьком уроке
По просьбе посетителей моего дневника продемонстрирую,в небольшом уроке, как это сделать.
Рассотрим,из чего же состоит наша формула
Это часть нашей формулы, один "контейнер" (их может быть несколько)
<div style="box-shadow:12px 8px 7px #FF533E,18px -3px 2px #2D20FF,-2px -2px 17px #00D80F;border:5px inset #3F1D00;border-radius:50px;padding:10px;background-image:url('АДРЕС ВАШЕЙ КАРТИНКИ');width:50%;"><center><br />ВАШ ТЕКСТ<br /><br />
Контейнер состоит из атрибутов:
"div style" - блочный элемент стилей
"box shadow" - эффект тени (красная, синяя, зелёная...ставить на Ваше усмотрение)
"border" - эффект бордюра : inset - цвет эффекта бордюра(чёрно серый)
"border-radius" - радиус скругления углов
Радиус скругления углов,можно задавать как 1 значением (для всех улов),
2 значениями (для 2 углов по диагонали), так и 4 углов (для каждого угла)
"padding" - внутренний отступ в элементе
"background-image" - фоновая картинка (адрес фоновой картинки)
"width" - ширина рамки (может быть выражена в % или же в px)
могут встречаться атрибуты:
"-webkit-box-shadow" - для отображения в старых версиях браузера Chrome,
"-moz-box-shadow" - для отображения в старых версиях браузера Mozilla Firefox,
"box-shadow" - для отображения во всех остальных браузерах.
Вставив свои параметры и адрес картинки получаем такую картинку "контейнер":
Далее к этому контейнеру, подставляем ещё один, такой же,
только с атрибутами текста и получаем
КОД РАМКИ:
В атрибуте background-image:url(‘ ‘) вставляете ссылку на свою картинку, будьте внимательны, не удаляйте маленькие одиночные ковычки перед и после адреса картинки!
<center><div style="box-shadow:2px 6px 7px #534300,-2px -3px 2px #534300,-2px -2px 7px #846A00;border:1px inset #FFF3C9;border-radius:50px;padding:12px;background-image:url('АДРЕС ВАШЕЙ КАРТИНКИ ДЛЯ БОРДЮРА');width:70%;" <center> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:40px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:15px;background-image:url('АДРЕС ВАШЕЙ КАРТИНКИ ОСНОВНОГО ФОНА');width:94%;"> <center> <br /> <div align="center"> <span style="font-weight:normal;text-align:center;color:#EEEED;font-family:monotype corsiva,serif;font-size:23px;line-height:150%;text-shadow:3px 2px 11px #006400,2px 1px 1px #006400;column-count:3;column-width:0px;"><font color="#FFcc99" face="Courier New" style="font-size:20px">ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ<br /> БЕЗ ФОТОШОПА</font></span><br /> <br /> <center> <span style="font-weight:normal;text-align:center;color:#EEEED;font-family:monotype corsiva,serif;font-size:23px;line-height:150%;text-shadow:3px 2px 11px #006400,2px 1px 1px #006400;column-count:3;column-width:0px;"><font color="#FFcc99" face="Courier New" style="font-size:16px"><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank"><span style="font-family:Arial;color:#FEBF80;font-size:12px">ВАША ПОДПИСЬ</span> </a></font></span></center> </center> </div> </center> </div> </center> </div>
Получается такая рамочка:
Изменяя значения "border-radius",можно построить интересные формы
Рассмотрим несколько примеров создания рамок :
Код рамки:
<center><div style="box-shadow:2px 6px 7px #534300,-2px -3px 2px #534300,-2px -2px 7px #846A00;border:1px inset #FFF3C9;border-radius:50% 0% 50% 0%;padding:12px;background-image:url('АДРЕС ВАШЕЙ КАРТИНКИ ДЛЯ БОРДЮРА');width:70%;" <center> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:50% 0% 50% 0%;padding:15px;background-image:url('АДРЕС ВАШЕЙ КАРТИНКИ ОСНОВНОГО ФОНА');width:94%;"> <center> <br /> <div align="center"> <span style="font-weight:normal;text-align:center;color:#EEEED;font-family:monotype corsiva,serif;font-size:23px;line-height:150%;text-shadow:3px 2px 11px #006400,2px 1px 1px #006400;column-count:3;column-width:0px;"><font color="#FFcc99" face="Courier New" style="font-size:20px">ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ<br /> БЕЗ ФОТОШОПА</font></span><br /> <br /> <center> <span style="font-weight:normal;text-align:center;color:#EEEED;font-family:monotype corsiva,serif;font-size:23px;line-height:150%;text-shadow:3px 2px 11px #006400,2px 1px 1px #006400;column-count:3;column-width:0px;"><font color="#FFcc99" face="Courier New" style="font-size:16px"><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank"><span style="font-family:Arial;color:#FEBF80;font-size:12px">ВАША ПОДПИСЬ</span> </a></font></span></center> </center> </div> </center> </div> </center> </div>
<div> <div> <center> <div style="border-radius:50% 50% 47% 50%/50% 50% 50% 50%;-webkit-border-radius:50% 50% 47% 50%/50% 50% 50% 50%;-moz-border-radius:50% 50% 47% 50%/50% 50% 50% 50%;background-image:url('//img-fotki.yandex.ru/get/4709/65019656.13a/0_68174_25ea8a37_S.gif');width:70%;"> <br /> <div style="box-shadow:-4px -4px 9px #333333,4px 4px 9px white,4px 4px 9px white;border-radius:50% 50% 47% 50%/50% 50% 50% 50%;-webkit-border-radius:50% 50% 47% 50%/50% 50% 50% 50%;-moz-border-radius:50% 50% 47% 50%/50% 50% 50% 50%;background-image:url('//img-fotki.yandex.ru/get/5809/65019656.128/0_62be6_f73aed45_M.jpg');width:94%;border:2px outset #A8A800;"> <br /> <span style="font-family:Times New Roman;color:#FFE0AB;font-size:23px;text-shadow:1px 1px 1px #FFE0AB;"><span style="font-family:Times New Roman;color:#FFE0AB;font-size:23px;text-shadow:1px 1px 1px #FFE0AB;"><img alt="" border="0" src="//img-fotki.yandex.ru/get/9356/140630731.e5/0_cdd01_acef58a5_L.png" width="30%" /></span></span><br /> <div style="width:80%;height:50%;scrollbar-track-color:#FFE0AB;scrollbar-arrow-color:#FFE0AB;scrollbar-base-color:#FFE0AB;overflow:auto;"> <span style="font-family:Times New Roman;color:#836600;font-size:23px;text-shadow:1px 1px 1px #FFE0AB;"><strong>ВАШ ТЕКСТ<br /> (Текст с прокруткой)<br /> </strong></span><br /> <p> </div> <img alt="" src="//img-fotki.yandex.ru/get/9356/140630731.e5/0_cdd01_acef58a5_L.png" width="30%" /></div> <a href="АДРЕС ВАШЕГО БЛОГА" target="_blank"><span style="color:#FE290B;"><strong><span style="font-family: Comic Sans MS; font-size: 16px;">ВАША ПОДПИСЬ</span></strong></span></a></div> </center> </div> </div>
<center> <div style="box-shadow:1px 2px 7px black,-2px -2px 1px white,-2px -2px 7px white;border:2px inset #00000;border-radius:0px 400px 0px 400px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:20px;background-image:url(' АДРЕС КАРТИНКИ ');width:70%;"> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black;border:2px inset #000000;border-radius:0px 395px 0px 395px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:18px;background-image:url(' АДРЕС КАРТИНКИ ');width:95%;"> <center> <div style="box-shadow:2px 2px 7px white,-2px -2px 7px white,2px 2px 7px black;border:1px inset #000000;border-radius:0px 385px 0px 385px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:15px;background-image:url(' АДРЕС КАРТИНКИ ');width:95%;"> <center> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:0px 385px 0px 385px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:15px;background-image:url(' АДРЕС КАРТИНКИ');width:95%;"> <center> <br /> <div align="center"> <span style="font-weight:normal;text-align:center;color:#EEEED;font-family:monotype corsiva,serif;font-size:23px;line-height:150%;text-shadow:3px 2px 11px #006400,2px 1px 1px #006400;column-count:3;column-width:0px;"><font color="#FFcc99" face="Courier New" style="font-size:16px"><br/><img src="//img-fotki.yandex.ru/get/6112/147114257.76/0_d5e71_b89a395_XL" width="250" height="130"><br/><br/> ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ<br /> БЕЗ ФОТОШОПА.<br />ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ<br /> БЕЗ ФОТОШОПА.<br />ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ<br /> БЕЗ ФОТОШОПА.<br />ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ<br /></font></span><br /> <br/><img src="//img-fotki.yandex.ru/get/6112/147114257.76/0_d5e71_b89a395_XL" width="200" height="100"><br/> <center> <span style="font-weight:normal;text-align:center;color:#EEEED;font-family:monotype corsiva,serif;font-size:23px;line-height:150%;text-shadow:3px 2px 11px #006400,2px 1px 1px #006400;column-count:3;column-width:0px;"><font color="#FFcc99" face="Courier New" style="font-size:16px"><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank"><span style="font-family:Arial;color:#FEBF80;font-size:10px">ВАША ПОДПИСЬ</span> </a></font></span></center> </center> </div> </center> </div> </center> </div> </center> </div> </div> </center>
Ваш текст
Код рамки:
<center> <div style="box-shadow:1px 2px 7px black,-2px -2px 1px white,-2px -2px 7px white;border:2px inset #00000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:20px;background-image:url('АДРЕС КАРТИНКИ');width:70%;"> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black;border:2px inset #000000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:25px;background-image:url('АДРЕС КАРТИНКИ');width:93%;"> <center> <div style="box-shadow:2px 2px 9px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:15px;background-image:url('АДРЕС КАРТИНКИ');width:95%;"> <center> <br /> <div align="center"> <p> <img src="//img-fotki.yandex.ru/get/6515/38620350.1b/0_7aa60_5c41df94_L.png" width="162" height="230"><br /> <span style="color:#008000;"><span style="font-weight: 400; text-align: center; font-family: &quot;monotype corsiva&quot;, serif; font-size: 15px; line-height: 150%; text-shadow: 3px 2px 25px rgb(85, 69, 0), 1px 1px 1px rgb(135, 102, 0); column-count: 3;"><font face="Courier New" style="font-size:26px"><span style="font-family:georgia,serif;"><em><strong>Ваш текст</strong></em></span></span></font></span></span><br /> <center> <a href="АДРЕС ВАШЕГО БЛОГА" target="_blank"><span style="color:#007F12;"><strong><span style="font-family: Comic Sans MS; font-size: 16px;">ВАША ПОДПИСЬ</span></strong></span></a></center> </div> </center> </div> </center> </div> </div> </center>
Код рамки:
<center> <div style="border-radius:50% 50% 0% 0%/50% 50% 0% 0%;-webkit-border-radius:50% 50% 0% 0%/50% 50% 0% 0%;-moz-border-radius:50% 50% 0% 0%/50% 50% 0% 0%;background-image:url(' АДРЕС КАРТИНКИ БОРДЮРА ');width:70%;"> <br /> <div style="box-shadow:-4px -4px 9px #333333,4px 4px 9px white,4px 4px 9px white;border-radius:50% 50% 0% 0%/50% 50% 0% 0%;-webkit-border-radius:50% 50% 0% 0%/50% 50% 0% 0%;-moz-border-radius:50% 50% 0% 0%/50% 50% 0% 0%;background-image:url(' АДРЕС КАРТИНКИ ФОНА ');width:93%;border:1px outset #A8A800;"> <br /> <span style="font-family:Times New Roman;color:#004583;font-size:20px;text-shadow:1px 1px 1px #9B86FF;"><img alt="" border="0" src="//img-fotki.yandex.ru/get/6203/38620350.d/0_6...%"></span><br /> <div style="width:490px;height:250px;scrollbar-track-color:#9B7600;scrollbar-arrow-color:#ffffff;scrollbar-base-color:#755A00;overflow:auto;"> <br /> <span style="font-family:Times New Roman;color:#FFF0B3;font-size:26px;text-shadow:2px 2px 2px #C39700;"><strong>ВАШ ТЕКСТ<br /><br /> (ТЕКСТ С ПРОКРУТКОЙ)<br /> <br /> </strong></span></span></div> <span style="font-family:Times New Roman;color:#004583;font-size:20px;text-shadow:1px 1px 1px #9B86FF;"><img src="//img-fotki.yandex.ru/get/9763/38620350.27/0_90a72_2ecc4bed_M.png" width="50%" ><br /><a href="АДРЕС ВАШЕГО ДНЕВНИКА" target="_blank"><strong><span style="font-family:Comic Sans MS;color:#828282;font-size:16px;">ВАША ПОДПИСЬ</span></strong></a></span></div> </div> </center>
Серия сообщений "МОИ РАМОЧКИ":
Часть 1 - Для любителей скромных рамочек...
Часть 2 - Рамочки для Вашего творчества - золотые
...
Часть 7 - Рамка с круглыми углами без ФШ (урок)
Часть 8 - Объемные рамки разной конфигурации. Без фотошопа!
Часть 9 - РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФШ
Часть 10 - Золотая рамочка с прокруткой
Часть 11 - Красная рамочка с прокруткой
...
Часть 35 - Рамочка с разрывом
Часть 36 - Рамки для творчества
Часть 37 - Внутренние тени изображений и текста
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
