» » » Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

27.08
6
25 257
В поисках простого и удобного решения проблемы закруглённых углов на сайте я наткнулся на один крайне интересный вариант решения данной проблемы.
Плюсы этого решения:
- Произвольная ширина, высота блока.
- Нет никаких таблиц, что для меня самое важное. Нет javascript. Нет плясок с бубном вокруг IE.
- Кроссбраузерность: блок во всех браузерах выглядит одинаково.
- Всего ОДНА картинка.
- Легко разобраться, т.к. используется минимум кода для реализации этого "безобразия" Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.
Минусы
- Используется 5 элементов " DIV".

Ранее я выкладывал данный материал, но к нему не было объяснений, сегодня я предлагаю Вашему вниманию мой вольный перевод статьи автора.


Введение

Задачи:
- блок должен быть динамическим, т.е. растягиваться как по высоте, так и по ширине (должен быть независим от разрешения экрана при "резиновой" вёрстке страницы).
- блок должен иметь закруглённые края, и не зависеть от общено фона страницы, т.е. даже при градиентном фоне или с фоновым изображением под блоком не должно вохникать артефактов, проще говоря закруглённые углы должны быть с прозрачным фоном.
- никаких таблиц! никаких javascript!
- одинаковый вид во всех браузерах!
- чистый css, для удобства редактирования внешнего вида!
- маленький размер css-кода для быстрой загрузки.
- простота реализации.

Если поискать на просторах всемирной паутины, то можно найти довольно много разнообразных решений для создания закруглённых углов на сайте. Например: с помошью таблиц; с помошью css, но не поддерживается прозрачность; поддерживается прозрачность, но фиксированные размеры блока; не фиксированный размер блока, но с использованием javascript, и так далее.

Из всего этого многообразия нет только одного - простого и универсального способа для любой ситуации! После анализа большого количества интернет страниц с использованием закруглённых углов автор, смог найти такое решение.

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

Шаг 1: Верхний левый угол.

Сначала сделаем левый угол наверху блока. Это может быть gif-изображение, которое имеет прозрачность с внешней стороны. пусть оно будет размером 9x9px:

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

Мы назначим это изображение как фоновое в DIV, таким образом мы избавляемся от необходимости каждый раз прописывать <img src = "..."...> для каждого блока:

CSS:
.top-left {

background-image: url('images/corner-topleft9x9.gif');
height: 9px;
width: 9px;
}


HTML:
<div class="top-left"></div>


И как это уже заведено, во всех браузерах, кроме IE (чтоб он провалился) всё нормально. Стоит посмотреть на наш блок через IE и мы видим что изображение "размножается". Происходит это изза того что не задан размер шрифта для блока, а изображение явно меньше заданного по умолчанию размера шрифта. ъ

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки. Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

Исправим этот недочёт:

CSS:
.top-left {
...
font-size: 2px;
}


Теперь IE понимает что мы хотим от него и первый шаг на этом закончен.

Шаг 2: Верхний правый угол.

Верхний правый угол - это зеркальное отображение картинки левого угла. Мы не можем поместить фоновое изображение правого угла в тот же самый DIV так как можно задать только одно фоновое изображение для каждого DI. Таким образом мы делаем другой DIV, и на сей раз мы помещаем изображение в правую сторону, с помощью "float: right;".

Результат (на картинке добавлен background-color для наглядности):

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

Это не то чего мы ожидали! Причина в том, что DIV являются блочными элементами и не могут просто так располагаться на одном уровне. Но с добавлением "margin-top" с отрицательным значением мы можем исправить ситуацию.

CSS:
.top-right {

float: right;
margin-top: -9px;
background-image: url('images/corner-topright9x9.gif');
height: 9px;
width: 9px;
font-size: 2px;
}


HTML:
<div class="top-left"></div>
<div class="top-right"></div>


Теперь браузер показывает то, что нам нужно.
Шаг 2 закончен.

Шаг 3: Верхняя средняя часть.

Для верхней средней части блока мы не сможем использовать border, т.к. тогда обводка будет пересекаться с картинками и вид будет, мягко говоря, не тот. Мы поступим проще - увеличим изображение левого верхнего угла.

Не будем забывать что наш блок будет динамически расширяться, поэтому изображение будет довольно широкое: 1280x9px (под разрешение экрана 1280x1024)
Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

CSS:
.top-left {
background-image: url('images/corner-topleft1280x9.gif');
height: 9px;
font-size: 2px;
}


Результат:
Динамический блок с закруглёнными углами с помощью CSS и 1 картинки. DIV, в котором будет контент блока.

CSS:
.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
padding: 10px;
margin-top: 0;
margin-bottom: 0;
}


HTML:
<div class="inside">
&lt;!-- Контент блока -->
..... .....
&lt;!-- Контент блока -->
</div>


Цвет обводки при этом дожен совпадать с цветом обводки на изображениях углов, а цвет фона - с цветом фона на изображениях.
Примечание, так же мы можем испольховать изображения в качестве обводки справа и слева от блока. Для этого добавим ещё один DIV по аналогии с верзним левым и правым углами (пример такой обводки можно посмотреть в приложенном архиве).
Так же мы задали padding для содержимого блока, чтобы текст внутри его не "прилипал" к краям самого блока.
Важно!
Так же необходимо прописать 2 важных строчки margin-top: 0; и margin-bottom: 0; для того чтобы верхняя и нижняя части не имели отступа от средней части блока.

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

Но автор для этого использовал такой приём:

CSS:
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}


HTML:
<div class="inside">
<p class="notopgap">First element</p>
<p>Other elements...</p>
<p class="notbottomgap">Last element</p>
</div>


Большая часть работы завершена, осталось совсем чуть-чуть.


Шаг 5: Нижняя часть.

Делаем то же самое, что и в первых двух шагах, но переварачиваем всё вверх ногами.

CSS:
.bottom-left {
background-image: url('images/corner-botleft1280x9.gif');
height: 9px;
font-size: 2px;
margin-right: 9px;
}
.bottom-right {
background-image: url('images/corner-botright9x9.gif');
background-position: 100% 0;
background-repeat: no-repeat;
height: 9px;
font-size: 2px;
margin-top: -9px;
}


HTML:
<div class="bottom-left"></div>
<div class="bottom-right"></div>


Вот собственно и всё, осталось только оптимизировать наш код и можно ставить на сайт.

Шаг 6: Оптимизация и упрощение.

Пока мы использовали четыре изображения для нашего блока. Но, как известно, существует технология CSS-спрайтов (или css-rollovers), при помощи которой мы можем использовать только одно изображение да всего блока.
Для начала "склеим" все наши картинки углов воедино. (для наглядности на рисунке показан укороченный вариант нашего изображения, на самом деле его можно делать шириной до 1900px для высоких разрешений экранов)

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

На рисунке ниже мы видим схематичное отображение принципа "нарезки" нашей склеенной картинки углов.

Динамический блок с закруглёнными углами с помощью CSS и 1 картинки.

Думаю объяснения тут излишни.

Смотрим CSS:
.top-left {
margin-right: 9px; /* clip right corner */
background-image: url('images/corners1280x18.gif');
height: 9px; /* vertical: show first half of the image with the top-corners in it */
font-size: 2px; /* correct height for IE */
}

.top-right {
margin-top: -9px; /* to level of top-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('images/corners1280x18.gif');
background-position: 100% 0; /* show bg-image starting at the right */
height: 9px;
font-size: 2px;
}

.bottom-left {
margin-right: 9px; /* clip right corner */
background-image: url('images/corners1280x18.gif');
background-position: 0 -9px; /* show under half of the image */
height: 9px;
font-size: 2px;
}

.bottom-right {
margin-top: -9px; /* to level of bottom-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('images/corners1280x18.gif');
background-position: 100% -9px; /* under half, right side */
height: 9px;
font-size: 2px;
}

.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
color: #000000;
padding: 10px;
margin-top: 0;
margin-bottom: 0;
}


HTML:
<div class="top-left"></div>
<div class="top-right"></div>
<div class="inside">
......Контент.....
</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>


Для дальнейшей оптимизации кода мы можем объединить элементы с одинаковыми стилями, и сократит названия классов.
Хотя описаный выше пример имеет довольно длинный код, после оптимизации он состоит из 9 линий и занимает всего 0.5kB.


Демо вы можете увидеть на моём демо-сайте выбрав шаблон tm-saratov2


P.S.
Мы решили все задачи поставленные вначале статьи, а html и css коды полностью валидны, и наш блок выглядит одинаковым во всех браузерах. Ну а если вам нужно оформить уголки на своём сайте как то иначе, Вам помогут уроки фотошопа на русском.

Похожие материалы

Комментарии

sashok
sashok 28 октября 2009 03:02
#85
многова то кода ... вот поинтересуйся как реализовано у covorp.com ... там все черезмерно закругленое ... спс поделился реализацией намного прожще и кроссбраузерно работает
ПафНутиЙ
ПафНутиЙ 29 октября 2009 17:51
#86
Цитата: sashok
многова то кода ...

Я предложил всего навсего один из многочисленных универсальных способов закругления углов smile
Цитата: sashok
вот поинтересуйся как реализовано у covorp.com ... там все черезмерно закругленое ...

Ну не знаю насколько хорошо там у них всё реализовано, но вот у меня например IE7 выдал 2 ошибки:
Строка: 72
Ошибка: 'document.all.r' - есть null или не является объектом
Строка: 1
Ошибка: 'lifemeet' - есть null или не является объектом


А в googlechrome 3.0.195.27
вообще всё расползлось......

Опять же для создания закругления используется несколько картинок...

sashok
sashok 23 января 2010 06:00
'document.all.r' - есть null и все прочее это внутренние ошибки, на сколько я понял, они не относятся к технологии прорисовки округлостей)... я пообщался с админом он вывел меня на дезигнера))) (вернее он и есть им), и скажу, без задора, что намного проще решение, хотя весь дизайн сайта оставляет желать лучшего)))
Vladimir
Vladimir 9 марта 2011 20:14
Ребят, вопросик такой, я в веб программировании ничерта не понимаю и работаю с ним впервые... Но надо позарез сдалть один сайтик.

Попытался отцентровать данные слои, но не получилось... Я пробывал это сдалть через СSS по средствам

top: 30%;
left: 25%;

Для каждого из углов и задавал для верхнего только, но они вообще нехотят перемещаться как поодному так и поотдельности, вот моя CSS


.top-left, .top-right, .bottom-left, .bottom-right {
background-image: url('../images/corners-label1280x40.gif');
height: 20px;
font-size: 2px;
top: 30%;
left: 25%;
width: 50%;
}
.top-left, .bottom-left
{
margin-right: 20px;
}
.top-right, .bottom-right {
margin-left: 20px;
margin-top: -20px;
}
.top-right
{
background-position: 100% 0;
}
.bottom-left {
background-position: 0 -20px;
}
.bottom-right {
background-position: 100% -20px;
}
.hide {
border-left: 2px solid #0070FF;
border-right: 2px solid #0070FF;

background: #FFFFFF;
color: #000000;
padding-left: 8px;
padding-right:8px;

width: 50%;

}

.text_1, .text_2, .text_3
{margin-top: 0; margin-bottom: 0;}
ПафНутиЙ
ПафНутиЙ 10 марта 2011 10:01
Я не совсем понял какая цель преследуется, но
.top-left, .top-right, .bottom-left, .bottom-right {
background-image: url('../images/corners-label1280x40.gif');
height: 20px;
font-size: 2px;
top: 30%;
left: 25%;
width: 50%;
}

этим кодом вы задали позицию для всех классов в одном и том же месте. т.е. все блоки будут располагаться в позиции top: 30%;left: 25%; только не понятно относительно чего эта позиция будет выбираться.
websot
websot 2 сентября 2012 12:16
Пафнутий, у меня к тебе имеется вопрос не по теме.
Чтобы не устраивать демагогию напиши мн в ЛС когда будешь свободен для беседы.Я по поводу оформления "поиск(а)" у себя на сайте.
Спасибо за внимание!

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

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.