ПОДПИСАТЬСЯ НА НОВОСТИ
Подписка по Email - новости

Отменить подписку
61

Закругление углов с помощью CSS

2015
2
Фев
lenmon
viewsПросмотров: 441         commentsКомментариев: 0

cssВеб-разработчики всегда ищут возможности сделать интерфейс пользователя более привлекательным. CSS3 предоставляет для этого много новых возможностей. Вы можете использовать собственные шрифты на страницах; создавать элементы с закругленными углами и тенями; использовать градиенты в качестве фона и даже поворачивать элементы, чтобы они не казались такими однообразными и геометрически правильными. Все это делается без применения Photoshop и других графических программ. Для начала вы узнаете, как закруглить острые углы на форме.

В этой статье рассматриваются следующие возможности CSS3:
border-radius [border-radius: 10pxj] Закругление углов элементов.

Закругление прямых углов

css 3В Web все элементы по умолчанию имеют прямоугольную форму. Поля форм, таблицы и даже разделы веб-страниц — все они имеют строгий, геометрически правильный вид. За прошедшие годы многие веб-дизайнеры использовали различные способы закругления углов элементов, чтобы немного смягчить интерфейс.

В CSS3 появилась поддержка простого и удобного закругления углов, которая уже довольно давно поддерживается в Chrome, Firefox и Safari. В Internet Explorer 9 эта поддержка тоже появилась, так что теперь проблема решается без особых хлопот. Давайте посмотрим, как это делается.

Закругленные углы  на  форме  входаВам нужно создать новую форму входа для сайта. Поля форм должны быть с закругленными углами. Начнем с реализации этого эффекта исключительно средствами CSS3.

index.html
Log  in
Email  
Password  

Применение к форме стилей немного улучшит ее внешний вид:

stylesheets/style.css

. login{
   width: 250рх;
}

. login fieldset{
   background-color: #ddd;
   border: none;
}

. login legend{
   background-color: #ddd;
   padding: 0 64px 0 2px;
}

. login ol{
   list-style: none;
   margin: 2px;
   padding: 0;
}

. login li{
   margin: 0 0 9px 0;
   padding: 0;
}

. login input{
   background-color: #fff;
   border: lpx solid #bbb;
   display:block;   width: 200px;
}

. login input[type="submit"]{
   background-color: #bbb;
   padding: 0;  width: 202рх;
}


Эти стили удаляют из списка маркеры и обеспечивают равенство размеров текстовых полей. Также можно внести изменения в теги и формы для группировки полей. Когда базовое оформление будет завершено, можно переходить к применению эффектов закругления.

Для закругления углов всех текстовых полей формы понадобится правило CSS вида:

stylesheets/style.css

. login inputл . login fieldset, . login legend{
   border-radius: 5px;
}


Включите его в файл style.css, — и углы текстовых полей будут плавно закругляться.

cssПриведенное решение работает в Firefox, Safari, Chrome и Internet Explorer 9 и 10, но не в Internet Explorer 8, а следовательно, нужно реализовать как можно более близкий аналог. Проблема совершенно тривиально решается при помощи библиотеки PIE, которая обеспечивает моментальную поддержку border-radius и ряда других функций. Загрузите PIE, распакуйте архив и поместите файл  PIE.htc в папку stylesheets.

Прежде чем мы доберемся до закругления, необходимо избавиться от одной стилевой ошибки. Internet Explorer обрабатывает тег  особым образом, так что при просмотре формы в IE мы не увидим заголовок группы на «корешке»; он полностью размещается внутри набора полей. Мы добавим небольшую «заплатку» для IE, которая сдвигает заголовок группы на несколько пикселов вверх — туда, где он выводится в Firefox и Chrome. Создайте новый файл с именем stylesfieets/ie.css и включите ссылку на него в условный комментарий, чтобы она загружалась только в IE 8 и ниже:

index.html

Затем внесите в stylesheets/ie.css поправки для  legend  и fieldset:

stylesheets/ie.css

. login{
   margin-top: 20рх;
}

. login fieldset legend{
   margin-top: -10px;
   margin-left: 10px;
}

. login  fieldset{
   padding-left: 10px;
}


Группа полей смещается на 20 пикселов вниз, а заголовок группы — на 10 пикселов вверх. Также заголовок смещается вправо, но из-за особенностей стилевого оформления по умолчанию в Internet Explorer необходимо добавить небольшой отступ в саму группу полей. Теперь форма выглядит так же, как в других браузерах.

Наконец, мы загружаем PIE при помощи  behavior — специального правила CSS, поддерживаемого Internet Explorer:

stylesheets/ie.css

. login fieldset, . login input, . login legend{
   behavior:  urL( stylesheets/PIE.htc);
}

cssОбратите внимание: файл PIE.htc хранится в папке   stylesheets. Ссылка на PIE.htc в нашей таблице стилей должна задаваться относительно страницы HTML, загружающей таблицу стилей, а не относительно самой таблицы.Теперь во всех основных браузерах результат выглядит одинаково.

В нашем примере требуется, чтобы во всех браузерах углы были закруглены. Однако такие возможности всегда следует оставлять на усмотрение пользователя. Хотя кто-то скажет, что «смягчение» внешнего вида формы приносит реальную пользу, для начала необходимо прикинуть, сколько пользователей работает в браузерах без поддержки закругления средствами  CSS. Если ваши посетители используют Internet Explorer 9 и выше, возможно, вам просто не стоит тратить время на написание и сопровождение обходного решения.

Закругленные углы визуально «смягчают» интерфейс, а использовать их чрезвычайно легко. Вместе с тем, очень важно последовательно подходить к их применению и не злоупотреблять этим аспектом дизайна (как, впрочем, и любым другим).

Видео: "CSS3 для начинающих"

Автор:
ОЦЕНИТЬ НОВОСТЬ
5   (голосов: 1)
Читайте также:
Разгон видеокарт с помощью софта
Разгон видеокарт с помощью софта
Известно, что не каждая модель видеокарты поддается разгону. Еще очень многое...
2012
11
Окт
Admin
Просмотров: 1591 Комментариев: 9
Торрент в помощь геймерам
Торрент в помощь геймерам
Наиболее популярным способом закачки игр из интернета является использование...
2014
8
Окт
Admin
Просмотров: 455 Комментариев: 0

Чтобы добавить комментарий нужно авторизироваться.
Авторизируйтесь используя Yandex Google Вконтакте Mail.ru Twitter