Уроки создания текстовых рамочек 2.

Четверг, 22 Июня 2017 г. 01:00 + в цитатник

Цитата сообщения bloginja

Прочитать целиком В свой цитатник или сообщество!

Уроки создания текстовых рамочек 2.
Учимся делать рамки. Урок 2.

Учимся делать рамки. Урок 2.
Сегодня хочу рассказать, как сделать рамки с закруглёнными углами.

С помощью атрибута

border-radius

можно делать рамки разных форм.

К примеру, такую:

bloginja

или такую:

bloginja

или такую:

bloginja

border-radius устанавливает радиус скругления уголков рамки или фона.

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел, например, border-radius: 60px 0px 0px 60px;
1. Если число указано одно, то происходит скругление всех четырёх углов.
2. Если указано 2 значения, то первое задаёт радиус верхнего левого уголка и нижнего правого, второе значение - верхнего правого и нижнего левого уголка.
3. Если указано 3 значения, то первое задаёт радиус для верхего левого, второе - одновременно для верхнего правого и нижнего левого уголков.
4. Если указаны 4 значения, то устанавливается радиус по очереди для верхнего левого, верхнего правого, нижнего правого и нижнего левого (по часовой стрелке).
<table style="border-radius: 60px 0px 0px 60px; width:200px; background-color:#E41326"><tbody><tr><td style="padding:3px">Текст</td></tr></tbody></table>

Текст

Также допустимо писать два значения через слэш (/). Например, border-radius: 80px/8px;
Первое значение задаёт радиус по горизонтали, а второй по вертикали
<table style="border-radius: 80px/8px; width:200px; background-color:#E41326"><tbody><tr><td style="padding:3px">ТЕКСТ</td></tr></tbody></table>

ТЕКСТ

---------

Только border-radius не работает в рамке предыдущего HTML-кода. Поэтому будем снова учиться писать код и использовать стилевые значения тегов.

Открываем редактор. Это другой редактор: в окне сверху пишем, а внизу смотрим, что получается.

Начинаем писать код:
в тег table дописываем атрибут style, подставляем знак равенства и открываем кавычки для перечисления стилевых свойств
<table style=" >

Атрибут style применяется для определения стиля элемента с помощью правил CSS: : вначале следует имя стилевого свойства, затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой.

В данном случае мы применим закругление углов рамки - border-radius: 80px;

Подставляем в код
<table style="border-radius: 80px; >

установим ширину рамки в 400 пикселей width:400px; (можно установить и высоту height:ВЫСОТАpx;), допишем и закроем кавычки, так как стили мы больше не будем добавлять.
<table style="border-radius: 80px; width:400px;" >

Нам нужен фон (background) в рамку, добавим его в код
<table style="border-radius: 80px; width:400px;" background="АДРЕС ФОНА" >

Теперь подставляем уже знакомые нам теги <tbody><tr><td style="padding:3px">, содержимое рамки и пишем закрывающие теги </td></tr></tbody></table>.
И подставим адрес фона.

Рамка в один слой готова.
<table style="border-radius: 80px; width:400px" background="//s020.radikal.ru/i703/1604/58/d00c1ca55fcb.gif" ><tbody><tr><td style="padding:3px"> содержимое рамки</td></tr></tbody></table>

содержимое рамки

Я показываю background="АДРЕС ФОНА" , так как всем хочется сделать красивую рамку, но, если нужно использовать однотонные фоны, можно в стилевые значения до закрывающих кавычек вставить слой цвета background-color:#ЦВЕТ ФОНА; и подставлять значения цвета. А background="АДРЕС ФОНА" удалить.

Попробуйте поменяйте эти теги и посмотрите, что получится.
<table style="border-radius: 80px; width:400px; background-color:#000fff;"><tbody><tr><td style="padding:3px"> содержимое рамки</td></tr></tbody></table>

содержимое рамки

----------------------

В основном border-radius понимают большинство браузеров, но в некоторых браузерах этот тег не работает и нужно прописывать другие теги.

- Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.
- Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.
- Браузер Konquerer системы Linux использует нестандартное свойство khtml-border-radius

А так как мы не знаем, у кого какой браузер, будем для надёжности прописывать все эти значения вместе в нашем коде,

чтобы рамка отображалась правильно в любом браузере

:
-moz-border-radius: 80px; -webkit-border-radius: 80px; -khtml-border-radius: 80px; border-radius: 80px;

<table style="-moz-border-radius: 80px; -webkit-border-radius: 80px; -khtml-border-radius: 80px; border-radius: 80px; width:150px;" background="//s019.radikal.ru/i630/1603/72/891def79891c.jpg" ><tbody><tr><td style="padding:3px"> содержимое рамки</td></tr></tbody></table>

Ну вот как-то так... Здесь ещё много нюансов можно описывать, но для начинающих и этого пока хватит.
Что не понятно или что-то хотелось бы узнать, пишите в комменты.

bloginja

Серия сообщений "рамки":

Часть 1 - Рамка к Пасхе.
Часть 2 - Душевная музыка. Светлана Копылова.
...
Часть 6 - Учимся делать рамочки
Часть 7 - Музыкальный альбом Горячий шоколад
Часть 8 - Учимся делать рамки. Урок 2.
Часть 9 - Учимся делать рамки. Урок 3
Часть 10 - Рамки для постов
Часть 11 - Вставить рамку в пост
Часть 12 - Рамка "Светлой пасхи"