Спас Медовый и Спас Яблочный... ПОЗДРАВЛЯЮ ВСЕХ!!! Прошел Спас Ме...
Разделители для текста - (0)Разделители для текста Славница
Рамочка "Чаще вспоминайте хорошее, чтобы ему захотелось вернуться!" - (0)Рамочка "Чаще вспоминайте хорошее, чтобы ему захотелось вернуться!" Здесь будет ваш текст... З...
Рамочка "Море любви... " - (0)Рамочка "Море любви ..." Здесь будет ваш текст... Здесь будет ваш текст...
Женский образ/Чёрное с золотом|ART by Natalia Belova - (0)Женский образ/Чёрное с золотом|ART by Natalia Belova Делала, чтобы выбрать и вырезать для колл...
Учимся делать рамки. Урок 2. |
 Сегодня хочу рассказать, как сделать рамки с закруглёнными углами. С помощью атрибута 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> Ну вот как-то так... Здесь ещё много нюансов можно описывать, но для начинающих и этого пока хватит. Что не понятно или что-то хотелось бы узнать, пишите в комменты. |
Серия сообщений "рамки":
Часть 1 - Рамка к Пасхе.
Часть 2 - Душевная музыка. Светлана Копылова.
...
Часть 9 - Учимся делать рамочки
Часть 10 - Музыкальный альбом "Гуляночка"
Часть 11 - Учимся делать рамки. Урок 2.
Часть 12 - Учимся делать рамки. Урок 3
Часть 13 - Рамка "Светлой пасхи"
...
Часть 18 - Рамки для постов
Часть 19 - Счастье подобно бабочке }i{ - плейкаст
Часть 20 - Заходи в мой дневник
| Рубрики: | Уроки Остальное |
| « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
