Еще один способ создать блок с закругленными краями и тенью. CSS

Очередной валидный кроссбраузерный блок с тенью и закругленными краями

Я уже вижу день, когда верстальщики всего мира легким добавлением двух строчек кода превращают унылый квадратный блок на веб-странице в красивый блок с тенью и закругленными краями:

border-radius:15px;
box-shadow:#000 0 0 10px;

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

Жестокая реальность намного ужасней... Стандарты CSS3 и HTML5 уже давно стучатся в наши двери, но сила обстоятельств (на февраль 2011) все еще не дает им полноценно войти в мир интернет. Представляю, как будут сочувствовать нам следующие поколения верстальщиков, читая хроники о наших нелегких буднях, об изощренных способах решения простых задач... Хотя, наверняка, им придется изобретать хаки для какого-нибудь Интернет Эксплорера 12.0, чтобы, повседневные на то время 3D элементы рендерились по принятым международным стандартам... Они будут ругать пользователей за то, что те пользуются старыми и корявыми браузерами и продолжать материться теми же словами, что и мы сегодня :)

Итак, задача:

  • Найти кроссбраузерное решение для отображения блоков с закругленными краями и тенью

В глобальной сети существует большое количество решений для поставленной задачи. Среди них есть очень удачные, легкие и простые для понимания. Их свободно можно копировать и вставлять в свои проекты без каких-либо ограничений. Однако, пытливый ум, иногда (редко), отвергает копирование чужого кода и требует изобретения собственного велосипеда. Этим мы и займемся.

Наш блок должен удовлетворять следующим требованиям:

  1. Быть кроссбраузерным (FF 2+, Opera 9+, Chrome, IE6+, Safari)
  2. Быть резиновым по высоте и ширине (пусть с ограничением на максимальную ширину в 1920 пикселей)
  3. Сверстан без использования таблиц (само собой), с минимальным количеством HTML элементов
  4. CSS и HTML код должен быть валидным

Кстати, довольно неплохое решение на ближайшее будущее есть тут: http://fetchak.com/ie-css3/.

Оно основано на поддержке "хорошими" браузерами своих свойств CSS (для Mozilla - "-moz-border-radius:15px; -moz-box-shadow:#000 0 0 10px;", для webkit-браузеров - "-webkit-border-radius:15px; -webkit-box-shadow:#000 0 0 10px;"). А для IE6+ используется замечательный файлик htc, который учит непослушные программы работать по стандартам. У данного способа, как и у всех остальных, есть недостатки. Код CSS невалидный, при большом количестве блоков на странице, IE начинает заметно задумываться, а Опера до версии 10.60 не понимает, что от нее хотят.

Для отображения тени мы будем использовать 6 PNG файлов (далее уменьшим их количество до 3). 

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

Разрезаем его на кусочки, чтобы получилось 6 таких файлов:

  • Левая сторона блока;
  • Правая сторона блока;
  • Верхняя граница блока до правого верхнего угла;
  • Верхний правый угол;
  • Нижняя сторона до правого нижнего угла;
  • Нижний правый угол;

Исходный файл .PSD с разбивкой на кусочки вы сможете скачать в конце статьи.

Далее совмещаем наши картинки с CSS кодом:

.gigi-shadow-block,
.gigi-shadow-block .sh-sl,
.gigi-shadow-block .sh-content {
	overflow:hidden;
}
.gigi-shadow-block .sh-top,
.gigi-shadow-block .sh-ct,
.gigi-shadow-block .sh-cb,
.gigi-shadow-block .sh-bottom {
	height:30px;
}
.gigi-shadow-block .sh-ct,
.gigi-shadow-block .sh-cb {
	float:right;
	width:30px;
}
.gigi-shadow-block .sh-ct,
.gigi-shadow-block .sh-cb {
	margin-top:-30px;
}
.gigi-shadow-block .sh-bottom,
.gigi-shadow-block .sh-top {
	margin-right:30px;
}
.gigi-shadow-block .sh-top {
	background:url(./shadow-images/shadow-st.png) no-repeat;
}
.gigi-shadow-block .sh-ct {
	background:url(./shadow-images/shadow-ct.png) no-repeat;
}
.gigi-shadow-block .sh-sl {
	background:url(./shadow-images/shadow-sl.png) repeat-y;
	width:100%;
}
.gigi-shadow-block .sh-sr {
	background:url(./shadow-images/shadow-sr.png) right repeat-y;
}
.gigi-shadow-block .sh-content {
	background:#FFF;
	margin:0 30px;
}
.gigi-shadow-block .sh-bottom {
	background:url(./shadow-images/shadow-sb.png) no-repeat;
}
.gigi-shadow-block .sh-cb {
	background:url(./shadow-images/shadow-cb.png) no-repeat;
}

HTML код будет выглядеть так:

<div class="gigi-shadow-block">
   <div class="sh-top"></div>
   <div class="sh-ct"></div>
      <div class="sh-sl">
         <div class="sh-sr">
            <div class="sh-content">
               Этот блок создан с помощью 6 картинок.
            </div></div></div>
   <div class="sh-bottom"></div>
   <div class="sh-cb"></div>
</div><!--.gigi-shadow-block-->

Проверяем. Радуемся. Но недолго... Вспоминаем про "любимый" IE6

Он, конечно, не отрисовывает PNG прозрачность. Если мы все еще заботимся о пользователях IE6, воспользуемся, например, способом DD_belatedPNG (http://dillerdesign.com/experiment/DD_belatedPNG/).

Скачиваем файлик DD_belatedPNG_0.0.8a-min.js отсюда http://dillerdesign.com/experiment/DD_belatedPNG/#download, переименовываем его в DD_belatedPNG.js

Дописываем в секцию head следующий код:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" type="text/javascript"></script>
<script  type="text/javascript">
  DD_belatedPNG.fix('.gigi-shadow-block div');
  DD_belatedPNG.fix('.gigi-shadow-block2 div');  
</script>
<![endif]-->

Радуемся еще раз, пьем чай, курим (по желанию) 

Итак, наш велосипед способен ехать. К минусам данного подхода можно отнести следующие пункты:

  • Довольно большое количество внешних изображений - 6 штук. Хотя количество можно легко уменьшить до 3х, скомпоновав парные элементы в спрайт:

    подробнее - в демо файле
  • Требование о малом количестве HTML элементов (8 штук), мягко говоря, не соблюдено. Возможно, есть способ сократить их до 7ми, но и это особой погоды уже не сделает. Подумаю позже
  • Пользователи IE6 могут не дождаться отрисовки страницы при большом количестве PNG изображений. При отключенном JavaScript прозрачность в этом браузере отображаться не будет

Плюсы, конечно же, очевидны:

  • Кроссбраузерность (с небольшими поправками на ветер)
  • Возможность создания тени любой формы и любых углов
  • Валидный код CSS, HTML

P.S. Границы можно создать абсолютно любые. Например, таким способом можно сверстать резиновую пиратскую карту сокровищ (подробнее - в демо)...

Демо

Полный архив с исходными файлами

Этот код можете свободно копировать и использовать в своих проектах. Буду благодарен за отзывы и ссылки на эту статью.

13.02.2011

Вы можете оставить комментарий

нигде не публикуется