ОткрыткиПерерожденный каталог открыток на все случаи жизни
СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения.
Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить
Всегда под рукойаналогов нет ^_^
Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
Включи свою музыку84 канала потокового радио с тематической музыкой. Выбери свою музыку и слушай
РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА |
Многие спрашивают, как сделать рамочку с круглыми углами?
ЕгороваТатьяна уже разьясняла,как это делается: тут
Немного дополню её, в своём маленьком уроке
По просьбе посетителей моего дневника продемонстрирую,в небольшом уроке, как это сделать.
Рассотрим,из чего же состоит наша формула
Это часть нашей формулы, один "контейнер" (их может быть несколько)
<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(' АДРЕС ВАШЕЙ КАРТИНКИ ');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(' АДРЕС ВАШЕЙ КАРТИНКИ ' );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_6f4f9_989e4362_M.png"width="30%"></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 3 4 5 6 [Новые] |
jzayka обратиться по имени
Понедельник, 03 Марта 2014 г. 19:36 (ссылка)
Ольга_Гогишвили обратиться по имени
Понедельник, 03 Марта 2014 г. 19:39 (ссылка)
Любаша_Сумчанка обратиться по имени
Понедельник, 03 Марта 2014 г. 20:35 (ссылка)
на радость!...изучайте,экспериментируйте!
Lyubov0848 обратиться по имени
Понедельник, 03 Марта 2014 г. 20:57 (ссылка)
koreckolga обратиться по имени
Понедельник, 03 Марта 2014 г. 21:45 (ссылка)
streglova обратиться по имени
Понедельник, 03 Марта 2014 г. 22:47 (ссылка)
Сказитель_вещий обратиться по имени
Понедельник, 03 Марта 2014 г. 22:58 (ссылка)
LJILJANA обратиться по имени
Понедельник, 03 Марта 2014 г. 23:17 (ссылка)
Юляшка_гречанка обратиться по имени
Понедельник, 03 Марта 2014 г. 23:55 (ссылка)
Novichok56 обратиться по имени
Вторник, 04 Марта 2014 г. 00:10 (ссылка)
НАДЕЖДА_БЫКОВСКИХ обратиться по имени
Вторник, 04 Марта 2014 г. 00:25 (ссылка)
Пошехонка обратиться по имени
Вторник, 04 Марта 2014 г. 02:06 (ссылка)
Алло_чка44 обратиться по имени
Вторник, 04 Марта 2014 г. 02:16 (ссылка)
Надежда_Гостевская обратиться по имени
Вторник, 04 Марта 2014 г. 04:48 (ссылка)
mobil-photo обратиться по имени
Спасибо за урок! Вторник, 04 Марта 2014 г. 06:21 (ссылка)
Elocjka обратиться по имени
Вторник, 04 Марта 2014 г. 07:20 (ссылка)
планета111 обратиться по имени
Вторник, 04 Марта 2014 г. 10:09 (ссылка)
Алефтина_Воробьева обратиться по имени
Вторник, 04 Марта 2014 г. 12:05 (ссылка)
Моисеева_Надежда обратиться по имени
Вторник, 04 Марта 2014 г. 12:37 (ссылка)
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] 2 3 4 5 6 [Новые] |
