Вход | регистрация
Закругленные углы по Gmalовски
Google давно славиться качеством своих продуктов, подходит к их разработке крайне ответственно и с мыслью о пользователях. И вот в далеком уже для нас 2007ом, задаваясь проблемой закругленных углов, я решил не выдумывать новый способ, а, так сказать, поучиться у профессионалов. И в то время, когда IE еще и не догадывался о существовании .png разработчики Gmail справлялись с этой проблемкой так…
Реализация данного метода довольно таки проста (как и любого хорошего метода). Мы будем использовать тонкие блоки высотой в 1 px, которые при помощи своих отступов и будут создавать визуальный эффект округления. Наглядно это показано на рисунке ниже:
Код тоже достаточно прост. Вот вам первый пример для округления радиусом 2 пикселя:
<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.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="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.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, то не забудьте добавить в еще такие стили:
На данный момент Gmail округляет свои углы иным способом (используя одно изображение в виде небольшого кружечка), но я уже на стал разбираться, так как слишком хитроумно код написан, да и надо ли оно вам?:)