Блог Боринца l☯SEO БОГ☯l Рецепты версткиЗакругленные углы по Gmalовски

Закругленные углы по Gmalовски

Закругленные углы по Gmalовски Google давно славиться качеством своих продуктов, подходит к их разработке крайне ответственно и с мыслью о пользователях. И вот в далеком уже для нас 2007ом, задаваясь проблемой закругленных углов, я решил не выдумывать новый способ, а, так сказать, поучиться у профессионалов. И в то время, когда IE еще и не догадывался о существовании .png разработчики Gmail справлялись с этой проблемкой так…

Реализация данного метода довольно таки проста (как и любого хорошего метода). Мы будем использовать тонкие блоки высотой в 1 px, которые при помощи своих отступов и будут создавать визуальный эффект округления. Наглядно это показано на рисунке ниже:Закругленные углы (использование блоков в 1px)
Код тоже достаточно прост. Вот вам первый пример для округления радиусом 2 пикселя:

<b class="rnd">
 <b class="rnd2"></b>
 <b class="rnd1"></b>
</b>
  <div class="inbox">Привет, мир!</div>
<b class="rnd">
 <b class="rnd1"></b>
 <b class="rnd2"></b>
</b>
b.rnd {display:block;}
b.rnd1, b.rnd2, .inbox {background:#C3D9FF;}
b.rnd b {display:block;height:1px;}
b.rnd1 {margin:0 1px;}
b.rnd2 {margin:0 2px;}
.inbox {padding:1em;}

По тому же принципу делаются округления и других радиусов. К примеру, вот так это выглядит для радиуса в 5 пикселей (чтобы это было похоже на окружность используются отступы в 5,3,2,1,1 пикселей соответственно):

<b class="rnd">
 <b class="rnd5"></b>
 <b class="rnd4"></b>
 <b class="rnd3"></b>
 <b class="rnd2"></b>
 <b class="rnd1"></b>
</b>
  <div class="inbox">Привет, мир!</div>
<b class="rnd">
 <b class="rnd1"></b>
 <b class="rnd2"></b>
 <b class="rnd3"></b>
 <b class="rnd4"></b>
 <b class="rnd5"></b>
</b>
b.rnd {display:block;}
b.rnd1, b.rnd2, b.rnd3, b.rnd4, b.rnd5, .inbox {background:#C3D9FF;}
b.rnd b {display:block;height:1px;}
b.rnd1 {margin:0 1px;}
b.rnd2 {margin:0 1px;}
b.rnd3 {margin:0 2px;}
b.rnd4 {margin:0 3px;}
b.rnd5 {margin:0 5px;}
.inbox {padding:1em;}

Да, и если вы все еще обращаете внимание на IE6, то не забудьте добавить в еще такие стили:

b.rnd b {display:block;height:1px; overflow: hidden; font-size:1px;}

На данный момент Gmail округляет свои углы иным способом (используя одно изображение в виде небольшого кружечка), но я уже на стал разбираться, так как слишком хитроумно код написан, да и надо ли оно вам?:)



Оставить комментарий