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

Автор: http://suprabiz.com/

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

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

Мне данный подход очень понравился, но единственное, что сдерживало от применения оной методики - такие углы не выглядят сглаженными (да, вот такой я привередливый :). А этого мне не хватало, поэтому решил пойти до конца, доработав имеющийся вариант.

Итак, моя задача заключалась в реализации с помощью CSS вот такой рамки, абсолютно не используя изображения:

Рамка с закругленными углами с использованием изображений

Увеличенное изображение угла выглядит следующим образом:

Я сделал абсолютно идентичный вариант с помощью CSS. За основу был взят предложенный ранее вариант. Чтобы добавить дополнительные пиксели, которые придадут углам сглаженность, я использовал несколько вложенных тегов, каждый из которых состоит из одной буквы (b, i, q). Это позволяет максимально оптимизировать HTML-код.

HTML

		
				<div
				class="b1"><b></b></div>

				<div
				class="b2"><b><i><q></q></i></b></div>

				<div
				class="b3"><b><i></i></b></div>

				<div
				class="b4"><b></b></div>

				<div
				class="b5"><b></b></div>

				  <div
				class="text">

				CSS - это здорово!

				  </div>

				<div
				class="b5"><b></b></div>

				<div
				class="b4"><b></b></div>

				<div
				class="b3"><b><i></i></b></div>

				<div
				class="b2"><b><i><q></q></i></b></div>

				<div
				class="b1"><b></b></div>

Получилась довольно-таки некрасивая конструкция, что “попахивает” извращением, но я лично готов пожертвовать этим ради возможности обойтись без графики. Если сравнивать размер HTML-кода с “несглаженным” вариантом, то разница не такая уж и значительная.

CSS

		
				.b1, .b2,
				.b3, .b4,
				.b5,

				.b1 i, .b2 i,
				.b3 i, .b4 i,
				.b5 i,

				.b1 b, .b2 b,
				.b3 b, .b4 b,
				.b5 b,

				.b1 q, .b2 q,
				.b3 q, .b4 q,
				.b5 q {

				    height: 1px;

				    font-size: 1px;

				    overflow: hidden;

				    border-style: 
				solid;

				    border-width: 0
				1px;

				    display: block;

				}

				.b1 {

				  margin: 0
				2px;

				    background: 
				#EBEEF0;

				    border: none;

				}

				.b1 b {

				 margin: 0
				1px;

				 background: #B8C3C8;

				 border-color: 
				#CBD3D7;

				}

				.b2 {margin:
				0 1px; border-color:
				#D6DCDF;}

				.b2 b {border-color:
				#B8C3C8;}

				.b2 i {border-color:
				#E4E8EA;}

				.b2 q {border-color:
				#F7F8F9;}

				.b3 {border-color:
				#EBEEEF;}

				.b3 b {border-color:
				#BCC6CB;}

				.b3 i {border-color:
				#F9FAFB;}

				.b4 {border-color:
				#CAD2D6;}

				.b4 b {border-color:
				#E5E9EB;}

				.b5 {border-color:
				#B5C0C6;}

				.b5 b {border-color:
				#FAFBFB;}

				.text {

				    border: 1px
				solid #B0BCC2;

				    border-width: 0
				1px;

				    padding: 0
				12px;

				}

	

Примеры решения

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

Что мы имеем в результате:

валидный код CSS и HTML;
кроссбраузерность кода;
углы закруглены без использования графики;
углы сглажены.

Из минусов данной модели стоит отметить лишь несемантическую верстку и размер кода, который, имхо, не так существенен.

В связи с началом программы Customer Preview Program (CPP) для Windows Vista® Service Pack 2 (SP2) хотелось бы вкратце рассказать об основных особенностях этого пакета, а также призвать вас к его загрузке и тестированию. Windows Vista SP2 представляет собой традиционный пакет сервисных обновлений, включающий все накопительные обновления безопасности, выпущенные с момента релиза SP1 в марте 2008 года. Кроме того, Windows Vista SP2 добавляет поддержку новых типов устройств и развивающихся стандартов, которые обретут популярность уже в ближайшее время, и включает все хотфиксы, обнаруженные через программу улучшения качества ПО (CEIP).

После публикации 29 тестовых версий анонсирован первый стабильный релиз MySQL 5.1, пригодный для промышленной эксплуатации и обеспечивающий увеличение производительности для "тяжелых" SQL запросов, по сравнению с MySQL 5.0, примерно на 15-20%. Главные новшества появившиеся в MySQL 5.1:

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