Скругление углов методом SCC со сглаживанием

Веб-дизайнеры так или иначе сталкиваются с проблемой скругления уголков блоков. Стандартный HTML это не делает, может что-то изменится в HTML5, но пока это не произошло.

Есть достаточно распространенный метод, который активно использует Google в своих веб-приложениях. Суть его заключается в том, что верхняя полоса блока высотой в 5 пикселей состоит из 4 миниблоков, 3 из которых высотой в 1 пиксель, и еще один высотой в 2 пикселя. Эти блоки имеют отступы от краев в 5, 3, 2 и 1 пиксель, и если глядеть на это дело, то создается ощущение, что есть не большое скругление.

Вот пример такого скругления. Пример взят целиком с сайта Шторкин.ру.

Первая работающая версия сглаживания углов на чистом CSS

Это картинка, а вот действующая модель. Справа видно увеличение, как это реально выглядит. Есть небольшая лесенка из пикселей.

Есть разные методы скругления углов, и один из самых древних и распространенных: уголки скругляют картинками. Если скругленный уголок подготовить в фотошопе, то он будет менее «ступенчатый». Вот пример:

Метод с использованием картинок имеет много недостатков, на которых я сейчас не буду останавливаться. Мне больше нравится вариант с Шторкин.ру, он полностью кроссплатформенный, сделан на чистом CSS без примесей джава-скрипт, занимает не так уж много места.

Я поставил цель сделать кроссплатформенный метод скругления углов, но со сглаживанием, как если бы скругление готовилось в фотошопе.

Добавляем один полутон

Измеряем цвет полутона в фотошопе. Поскольку фон у нас белый, то синий уходит в светло-синий. В RGB шкале цвет получается #9eb4d3.

Добавляем к 4 блокам бордер справа и слева толщиной в 1 пиксель, цвета полутона. Еще нужно убавить у каждого блока по одному пикселю отстут, и вот результат:

Вторая работающая версия скругления углов со сглаживанием

Вторая версия кода размещена здесь. Сглаживание уже гораздо более мягкое, кода добавилось не много, всего плюс 120 байт. Чистый CSS.

Добавляем второй полутон

Хотя мягкость добавилась, но ощущается, что два полутоновых пикселя лишние. То есть один полутоновый пиксель нормальный, ва второй должен быть посветлее. Добавляем еще один полутон, еще более светлый. Он оказался #f1f4f9.

Надо четвертый блок, который высотой в 2 пиксела, разбить на 2, и верхнему задать новый цвет бордера. Получается вот что:

Третья работающая версия скругления углов с двойным сглаживанием сглаживанием

Рабочая третья версия кода размещена здесь. Теперь все стало еще более мягко. Вес кода увеличился на 200 байт.

Доводим до логического конца

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

Для этого у верхних двух блоков должны появиться вторые бордеры, внешние, чуть более светлые. Создаем еще один стиль, помещаем его внутрь этих блоков, немного редактируем отступы, и вот наш CSS дубликат сглаживания в фотошопе:

Четвертая версия скругления углов с продвинутым двойным сглаживанием

Вот она, четвертая версия кода. Итоговая разница в коде между начальной версией и этой: 400 байт. По нашим временам вполне сносно.

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

Так ли все замечательно?

У метода есть только один недостаток. Мы исходим из того, что фон под блоком белый, как на нашем сайте. Но фон очень часто бывает других цветов.

Первый вариант может спокойно помещаться на любой фон, на белый, на черный, любого цвета или с любой фоновой картинкой.

В нашем случае надо знать какого цвета должен быть фон. Если фон черный, то полутоновые цвета должы уходит не в светлый, а в темный цвет.

Это, пожалуй, все. Других недостатков я пока не вижу.

Актуальность

В нашей веб-индустрии все меняется очень быстро. HTML5 и CSS3 наступают. Свойство CSS border-radius уже вполне можно использовать.

Следующий код в свойствах CSS делает скругление во всех браузерах, кроме Internet Explorer до 9 версии:

border-radius: 3px;

Соответственно, я в последнее время использую именно этот метод.

О дизайне → Скругление углов
Напишите письмо
© Галкин Вадим. 2007−2015.      Яндекс.Метрика

Портфолио

Коттеджный поселок «Медное»

Тверское городское БТИ

АН «Наш Дом»

Книги

Воспоминания папы

Учебник для заказчика сайта

Учебник для учителя

Интернет торговля

Рассылка email-писем с ePochta

Популярность покупок в Интернете сегодня

Торговля товарами из Китая — идея для заработка в Интернете

Моби-С: 1С на планшете

Мысли о веб-дизайне

Как создать шаблоны для сайтов с помощью фотошопа?

Секреты юзабилити интернет-магазинов

Изготовление пластиковых карт в Москве: как осуществляется печать изделий

О продвижении сайтов

Аудит сайта – как не дать порталу исчезнуть

Методы продвижения сайтов

Создание и продвижение сайтов