• Авторизация


РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА 01-04-2019 07:40 к комментариям - к полной версии - понравилось!

Это цитата сообщения rss_semenova_irina Оригинальное сообщение

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


Это цитата сообщения Sergg62 Оригинальное сообщениеРАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА


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


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

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

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

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

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


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


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


ВАШ ТЕКСТ


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

"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",можно построить интересные формы

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


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


ВАША ПОДПИСЬ

Код рамки:


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


ВАША ПОДПИСЬ





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

ВАША ПОДПИСЬ
Код рамки:




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

ВАША ПОДПИСЬ






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




ВАША ПОДПИСЬ
Код рамки:





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



ВАША ПОДПИСЬ




Ваш текст

ВАША ПОДПИСЬ

Код рамки:



Ваш текст

ВАША ПОДПИСЬ





ВАШ ТЕКСТ

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


ВАША ПОДПИСЬ


Код рамки:





ВАШ ТЕКСТ

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


ВАША ПОДПИСЬ


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

http://www.liveinternet.ru/users/semenova_irina/post322337871/

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА | Angel_Hear - От сердца к сердцу! | Лента друзей Angel_Hear / Полная версия Добавить в друзья Страницы: раньше»