Используем CSS3: округление углов рамки в паре с элементом «fieldset» для группирования элементов

Сегодня мне хотелось бы рассказать как использовать новые свойства таблицы стилей css3 в паре с html-тегом «fieldset». В итоге мы получим очень симпатичный блок, который можно использовать, например, для оформления справочной информации.Т.к. я сейчас работаю над большим проектом по Google maps API3 в Oracle BI, иногда очень нужно выделить какую-нибудь важную информацию для пользователей, поэтому мне в голову пришла идея выделять с помощью css3 и очень удобного html-тега «fieldset». Чтобы сразу стало понятней о чем я говорю, взгляните на приведенный ниже скриншот и тогда  все станет понятней:)

Загругление углов рамки с помощью css3 в паре с html-тегом Fieldset

Css3 - округление рамки

 

Кстати, отходя от темы, скоро я планирую открыть рубрику, посвященной Google maps API3. Сделал уже многое, столкнулся с очень большим количеством вопросов, на которые даже не то что в русском рунете нет, даже в зарубежном мало информации, а порой ее даже нет. Есть попытки в блогах освятить эту тему, но освещается очень поверхностно, приходится додумывать самому, учиться на пробах и ошибках.

Ну ладно, не будем отвлекаться, идем дальше по нашей сегодняшней теме.

Как видно из скриншота, закругление рамки идет с помощью css3 свойства «border-radius», а изображение вопроса вставляем с помощью элемента группирования «Fieldset». Интересно то, что данный элемент использует для группирования html-форм. Это его самое главное предназначение. Но мне в данный момент захотелось объединить несколько технологий, чтобы получить что-то свое уникальное. Кстати, такие элементы группирования Вы могли увидеть в современных программах. В своем время в университете нам рассказывали, что это хороший тон программирования. Конечно, можно ведь группировать разные элементы окна программы для лучшего восприятия.

Итак, меньше воды, больше дела:)

Начнем разбирать с элемента «fieldset». Его синтаксис следующий:

«<fieldset>…</fieldset>»

Между данными тегами идет нам контент. Внутри этих тегов также нужно использовать html-теги «<legend>…</legend>». Внутри этих тегов текст будет идти сверху слева по рамке, т.е. где у нас в данном случае идет изображение вопросика. Т.е. как вы догадались, внутри этих тегов можно вставить путь к нашей картинке, используя тег «<img>». Пример:

<fieldset>

<legend><img src=»help.png»></legend>

<pr>Здесь идет любой текст!:)

</pr>

</fieldset>

Тегом «<pr>» я здесь обозначил текст, который будет идти внутри нашей рамки. Вы можете это увидеть на скриншоте. С этим, я думаю, мы разобрались. Теперь разберем css3. Нам нужно оформить теги «<fieldset>», «<legend>» и «<pr>».

H2 {
font-size: 16px;
font-weight: normal;
}
FIELDSET {
border: solid 1px #CCC;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
padding: 1em 2em;
margin: 1em 0em;
}
 
LEGEND {
color: #666;
font-size: 16px;
padding: 0em .5em;
}
 
PR {
font-family: "Courier New", monospace;
font-size: 13px;
color: #666;
background: #F8F8F8;
padding: 0em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

Именно свойства «border-radius» и отвечает за скругление нашей рамки. Тут я думаю все понятно — 8px, означает, на сколько скруглять углы, тут Вы можете поэкспериментировать. Там где написано «-webkit» или «-moz-« — это значит, что мы указываем для движков браузеров (Mozilla и Chrome) что нужно округлять углы. Для каждого браузера — свой идентификатор. Хочу заметить, что в Opera 10.62 округление не работает, что очень обидно, т.к. этот браузер поддерживает новые стандарты.

В общем, это работает так — браузеры сами отображают «fieldset» в виде рамки, и это отображение зависит, как вы уже поняли, от браузера, который используется.

Ну вот и все!:) Надеюсь данная статья Вам пригодится.

Посмотреть ДЕМО можете здесь.

11 мыслей про “Используем CSS3: округление углов рамки в паре с элементом «fieldset» для группирования элементов

  1. Праздники и дни рождения, которые мы отмечаем, чаще всего не обходятся без цветов. Цветы оставляют впечатляющие воспоминания о каждой дате. У каждого человека имеется цветок, ему он отдаёт предпочтение из общего разнообразия. В нашем большом цветочном ассортименте можно найти цветы на самый изысканный вкус.
    Если вы не уверены в точных предпочтениях человека, которому хотите купить цветы, можете остановиться на красивейших букетах. Наши букеты сделаны опытными флористами. Букет из ярких роз, нежных орхидей, утонченных хризантем и других, удивляющих особой красотой цветов, будет хорошим презентом, как даме, так и джентльмену. Если вы желаете доставить радость девушке, то добавьте к букетунапример мягкую игрушку. Подобный сюрприз будет по душе каждой представительнице женского пола.
    Розы являются самыми покупаемыми цветами. Даря эти цветы, вы наверняка угодите каждому человеку. Эти красивые цветы имеют уникальный аромат, который сможет радовать продолжительное время. У нас на складе имеется огромный выбор сортов роз различной длины и цветовой гаммы.

    цветы купить спб

    На вопросы касающиеся подбора букета или создания его по индивидуальному заказу могут ответить наши флористы.

  2. Праздники и события, которые мы переживаем, обычно не обходятся без цветов. Цветы оставляют впечатляющие воспоминания о любой дате. У любого человека есть цветок, ему он отдаёт предпочтение из общего разнообразия. В нашем богатом цветочном ассортименте можно найти цветы на самый изысканный вкус.
    Если вы не уверены в точных предпочтениях того, кому хотите купить цветы, можете остановиться на красивых букетах. Наши букеты собраны опытными флористами. Букет из ярких роз, красивых орхидей, утонченных хризантем и других, поражающих своей красотой цветов, будет чудесным подарком, как даме, так и джентльмену. Если вы желаете доставить радость девушке, то купите к букетук примеру мягкую игрушку. Такой сюрприз станет по душе любой представительнице слабого пола.
    Розы являются самыми популярными представителями флоры. Даря розы, вы наверняка угодите каждому человеку. Эти прекрасные цветы имеют уникальный аромат, который сможет радовать длительное время. На нашем складе в наличии огромный выбор сортов роз разнообразной высоты и цветовой гаммы.

    заказать букет

    На вопросы касающиеся выбора букета или создания его по своему заказу ответят наши флористы.

    • Да, ты прав, как только тег «legend» добавляется в Opera все квадратится. Опера так работает нехорошо 🙁 В Mozilla или Chrome и Safari все ок.

  3. В Опере 11.10(у меня эта версия) округляются. Хотя как только добавляю тег — заквадративается всё обратно нах. Ну а в ИЕ7 всё всегда квадратно.

    • Да, в Opera не работает. Сам разачеровался 🙁 Хотя разработчики говорили, что css3 поддерживается почти полностью.

    • Не совсем понял, что ты имел ввиду…»Название» вместо вопросика? Если да — то изображение мне больше понравилось. На самом деле, каждый любит по-своему 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.