Учимся делать рамки. |
Сегодня хочу рассказать, как сделать рамки с закруглёнными углами. С помощью атрибута 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 - Душевная музыка. Светлана Копылова.
...
Часть 6 - Учимся делать рамочки
Часть 7 - Музыкальный альбом Горячий шоколад
Часть 8 - Учимся делать рамки. Урок 2.
Часть 9 - Учимся делать рамки. Урок 3
Часть 10 - Рамки для постов
Часть 11 - Вставить рамку в пост
Часть 12 - Рамка "Светлой пасхи"
Рубрики: | все для днева/делаем рамки |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |