Персональный сайт

РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА

lorinmir22 — Mon, 29 Sep 2014 11:01:27 GMT

ДЕЛАЕМ РАМКИ С КРУГЛЫМИ УГЛАМИ
БЕЗ ФОТОШОПА

Многие спрашивают, как сделать рамочку с круглыми углами?

ЕгороваТатьяна уже разьясняла,как это делается: тут

Немного дополню её, в своём маленьком уроке

По просьбе посетителей моего дневника продемонстрирую,в небольшом уроке, как это сделать.

Рассотрим,из чего же состоит наша формула

ЗДЕСЬ БУДЕТ ВАША ФОНОВАЯ КАРТИНКА

Это часть нашей формулы, один "контейнер" (их может быть несколько)

Контейнер состоит из атрибутов:

"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(‘ ‘) вставляете ссылку на свою картинку, будьте внимательны, не удаляйте маленькие одиночные ковычки перед и после адреса картинки!

Получается такая рамочка:

ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ
БЕЗ ФОТОШОПА
ВАША ПОДПИСЬ

Изменяя значения "border-radius",можно построить интересные формы

Рассмотрим несколько примеров создания рамок :

ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ
БЕЗ ФОТОШОПА
ВАША ПОДПИСЬ

Код рамки:

ВАШ ТЕКСТ
(Текст с прокруткой)

ВАША ПОДПИСЬ

Код рамки:

ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ
БЕЗ ФОТОШОПА.
ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ
БЕЗ ФОТОШОПА.
ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ
БЕЗ ФОТОШОПА.
ВОТ ТАКИЕ РАМОЧКИ МОЖНО НАУЧИТЬСЯ ДЕЛАТЬ

ВАША ПОДПИСЬ

Код рамки:

Ваш текст
ВАША ПОДПИСЬ

Код рамки:

ВАШ ТЕКСТ

(ТЕКСТ С ПРОКРУТКОЙ)

ВАША ПОДПИСЬ

Код рамки:

Желаю успехов в конструировании ваших рамок!

Курсоры для браузера ....

lorinmir22 — Mon, 29 Sep 2014 09:12:37 GMT

ЧТОБЫ БЫЛО ВИДНО НАВЕРНЯКА КОПИРУЙТЕ СРАЗУ ДВА КОДА (один в другой), НО: СНАЧАЛА С ОКОНЧАНИЕМ auto (это в этом посте, ниже), а потом где расширение .ani (это в том, [url=http://www.liveinternet.ru/users/ka82/post100396162/] другом [/url] посте) По крайней мере это у меня видят и Опера, и Эксплоэр. А у вас? http://img-fotki.yandex.ru/get/4131/131624064.3b6/0_ab5f1_794f17f6_orig'),auto;">http://www.cieldefrancoise.com/curseur/curseurimage/100.ani'); ">ВАШ ТЕКСТ

Итак, здесь: общий код вставки для курсоров ниже:

КУРСОРЫ
Вставить курсор в свою запись очень просто. Копируете нужный код из окошечка и ВМЕСТО слов "ТЕКСТ ИЛИ КОД" вставляете ... свой текст или код поста или код рамочки.
Чтобы увидеть как выглядит сам курсор, наведите свой курсор на название.

РозочкаТекст или код  СердечкоТекст или код  ЦветочекТекст или код 

УголокТекст или код  ДельфинТекст или код  ДельфинчикТекст или код 

БабочкаТекст или код  БабочкаТекст или код  БабочкаТекст или код 

Божья коровкаТекст или код рамочки Ветка черёмухиТекст или код рамочки Веточка сакурыТекст или код рамочки

Вишня в шоколадеТекст или код рамочки ЖасминТекст или код рамочки КапелькаТекст или код рамочки

КотёнокТекст или код рамочки ЛистикТекст или код рамочки ЛистикТекст или код рамочки

Морской конёкТекст или код рамочки РакушкаТекст или код рамочки РыбкаТекст или код рамочки

Осенний листикТекст или код рамочки ПодснежникТекст или код рамочки СиреньТекст или код рамочки

ФиалкаТекст или код рамочки ПтичкаТекст или код рамочки ПтичкаТекст или код рамочки

МишкаТекст или код рамочки ЩенокТекст или код рамочки ГномикТекст или код рамочки

МИР СМАЙЛИКОВ / Ангел

lorinmir22 — Fri, 26 Sep 2014 08:50:34 GMT