И снова круглые углы

Great Rash · January 27, 2010

Здравствуйте, товарищи по несчастью!

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

Хочу поделиться с вами еще одним способом закругления углов, который я совсем недавно придумал. Он использует всего одну картинку, не использует background-position (так что .png24 будет нормально отображаться с хаком в ИЕ6) и полностью резиновый.

Плюсы:

- одна картинка;

- тянется по ширине и по высоте (по контенту);

- сменить дизайн можно очень быстро.

Минусы:

- блок не может быть резиновым по высоте;

- 7 контейнеров;

- использует .png24 картинку, так что для ИЕ6 нужен хак;

- код строго под конкретную задачу.

Юзать или нет решайте сами.

Сначала скачиваем картинку. Затем разбираемся в коде:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Arial;
		}

		body {
			margin: 10px;
		}

		.bubble-cont {
		overflow: hidden;
			position: relative;
			width: 50%;
			padding: 10px;
		}

		.bubble-tl,
		.bubble-tr,
		.bubble-bl,
		.bubble-br {
			position: absolute;
			z-index: 1;
			width: 20px;
			height: 20px;
			font-size: 0;
			background-image: url('img/round.png');
			background-repeat: no-repeat;
		}

		.bubble-tl,
		.bubble-bl {
			left: 0;
		}

		.bubble-tr,
		.bubble-br {
			right: 0;
			margin-left: -20px;
		}

		.bubble-tr,
		.bubble-tl {
			top: 0;
		}

		.bubble-br,
		.bubble-bl {
			bottom: 0;
		}

		.bubble-text-cont {
			position: relative;
			z-index: 2;
			margin: -10px 0;
			padding: 10px 0;
			background: #82c9ee;
			border-top: #3d87aa 1px solid;
			border-bottom: #3d87aa 1px solid;
		}

		.bubble-text {
			margin: 0 -10px;
			padding: 0 10px;
			background: #82c9ee;
			border-left: #3d87aa 1px solid;
			border-right: #3d87aa 1px solid;
		}
	</style>
</head>

<body>

	<div class="bubble-cont">
		<div class="bubble-tl"></div>
		<div class="bubble-tr"></div>
		<div class="bubble-bl"></div>
		<div class="bubble-br"></div>
		<div class="bubble-text-cont">
			<div class="bubble-text">
				text<br />
				text
			</div>
		</div>
	</div>

</body>
</html>

Работоспособность проверял в:

- IE 6;

- IE 7;

- IE 8;

- Mozilla Firefox 3.5.7;

- Opera 10.10;

- Google Chrome 3.0.195.38;

- Safari 4.0.4;

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

aTei · January 27, 2010

*кхм*

38 статей о создании закругленных углов

Ищите свой

Great Rash · January 27, 2010

Если не трудно ткните пальцем. Ибо я так и не нашел ничего подобного там.

Justnewone · January 27, 2010

Если не трудно ткните пальцем. Ибо я так и не нашел ничего подобного там.

Классный способ. я тож именно так делаю углы, не закрашивая, а натягивая, правда до кружка не допер ) у меня вместо него огроооомный прямоугольник. Ну + кой где падингов и маргинов надо добавлять.

psywalker · January 28, 2010

Great Rash

Спасибо за идею дружище, думаю будет не лишним.

Great Rash · January 28, 2010

Представляю, так сказать, версию номер два:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px Tahoma;
		}

		body {
			margin: 10px;
		}

		.absolute {
			position: absolute;
		}

		.relative {
			position: relative;
		}

		.bubble-cont {
			padding: 0 10px;
		}

		.bubble-tl,
		.bubble-tr,
		.bubble-bl,
		.bubble-br {
			position: absolute;
			z-index: 1;
			width: 20px;
			height: 20px;
			font-size: 0;
			background-image: url('img/round.png');
			bacground-repeat: no-repeat;
		}

		.bubble-tl,
		.bubble-bl {
			left: 0;
		}

		.bubble-tr,
		.bubble-br { /* this is fix for IE6 */
			margin-left: 100%;
			left: -20px;
		}

		.bubble-tr,
		.bubble-tl {
			top: 0;
		}

		.bubble-br,
		.bubble-bl {
			bottom: 0;
		}

		.bubble-text-cont {
			position: relative;
			z-index: 2;
			padding: 10px 0;
			background: #f8f1c5;
			border-top: #bb975d 1px solid;
			border-bottom: #bb975d 1px solid;
		}

		.bubble-text {
			margin: 0 -10px;
			padding: 0 10px;
			background: #f8f1c5;
			border-left: #bb975d 1px solid;
			border-right: #bb975d 1px solid;
		}
	</style>

	<!--[if IE 6]>
		<script type="text/javascript" src="http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js"></script>
		<script type="text/javascript">
			DD_belatedPNG.fix('.png_bg');
		</script>

		<style type="text/css">

			.bubble-bl,
			.bubble-br {
				bottom: expression(parentNode.offsetHeight % 2 ? "-1px" : "0");
			}
		</style>
	<![endif]-->
</head>

<body>

	<div class="bubble-cont absolute" style="top: 50px;">
		<div class="bubble-tl png_bg"></div>
		<div class="bubble-tr png_bg"></div>
		<div class="bubble-bl png_bg"></div>
		<div class="bubble-br png_bg"></div>
		<div class="bubble-text-cont">
			<div class="bubble-text">
				Привет!
			</div>
		</div>
	</div>

	<div class="bubble-cont relative">
		<div class="bubble-tl png_bg"></div>
		<div class="bubble-tr png_bg"></div>
		<div class="bubble-bl png_bg"></div>
		<div class="bubble-br png_bg"></div>
		<div class="bubble-text-cont">
			<div class="bubble-text">
				Привет!
			</div>
		</div>
	</div>

</body>
</html>

Это уже готовый к использованию пример. Все баги ИЕ6 пофиксены (я имею в виду смещение на один пиксель абсолютно позиционированного блока при нечетном значении ширины).

Жаль, что без экспрешна для bottom обойтись не удалось, если кто знает решение отпишитесь пожалуйста.

За фикс бага с позиционированием справа (right: 0;) спасибо Сергею Чикуренку и сайту самизнаетекого.

Картинка для примера в первом посте.

psywalker · January 28, 2010

Блин, экспрешн конеш всю картину портит собака.

dandandan · January 31, 2010

Еще бы выкладывали ссылку не только на картинку, но и на сверстанный макет, чтобы посмотреть можно было.

PoshtarBoba · April 22, 2010

На сколько актуальна тема - подскажите?

Пол-года бордер-радиусами темплейты и вордпрессы делаю, заказчики не возмущаются из-за квадратных углов в ИЕ. В 95% случаев дизайн не портится, узнаваемость остаётся. Бигстокфото выдаёт предупреждение, если заходить на него со старых експлореров (в темплейте у меня жутко бекграунды глючили, видать, ихние программисты тоже не смогли исправить глюки, но это оффтопик - тогда я ещё не скруглял и радиусы у них гифовые). Гугль тоже постоянно напоминает - "Скоро ваш браузер не будет поддерживаться ваще", гугль.спредшит (эксель) глючит, пишет - ошибка сохранения и дико тормозит...

В общем - по каким причинам вы придумываете такие хитрости?

Edited April 22, 2010 by PoshtarBoba

LunatiK · April 23, 2010

На сколько актуальна тема - подскажите?
Пол-года бордер-радиусами темплейты и вордпрессы делаю, заказчики не возмущаются из-за квадратных углов в ИЕ. В 95% случаев дизайн не портится, узнаваемость остаётся. Бигстокфото выдаёт предупреждение, если заходить на него со старых експлореров (в темплейте у меня жутко бекграунды глючили, видать, ихние программисты тоже не смогли исправить глюки, но это оффтопик - тогда я ещё не скруглял и радиусы у них гифовые). Гугль тоже постоянно напоминает - "Скоро ваш браузер не будет поддерживаться ваще", гугль.спредшит (эксель) глючит, пишет - ошибка сохранения и дико тормозит...
В общем - по каким причинам вы придумываете такие хитрости?

Тема будет актуально ещё очень долго ибо углы не ограничиваются закруглёнными и 90градусными. Надо уметь делать всё, что рисует дизайнер.

Great Rash · April 23, 2010

В общем - по каким причинам вы придумываете такие хитрости?

Начальство говорит: "надо!", мы отвечаем: "есть!"

PoshtarBoba · April 23, 2010

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

Great Rash · April 23, 2010

Хороший у вас начальник, повезло вам, цените его

rus · April 27, 2010

Надо уметь делать всё, что рисует дизайнер.

Небольшая оговорочка: дизайнер должен (обязан) знать технология html, иначе будет сложновато заверстать идею "crazy" дезигнера.

slicemasta · April 27, 2010

Минусы:
- блок не может быть резиновым по высоте;

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

Great Rash · April 27, 2010

Если сделаете примерчик буду очень признателен.

Sign In

И снова круглые углы

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information