Border Radius and Round

В следващата 3та версия на CSS ще бъде възможно директното управление на закръгляването на ъглите в даден правоъгълник. Съгласно препоръката на W3 ще се използват допълнителни пропъртита от вида: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius.

Идеята е прекрасна и дава един допълнителен фичър, който доста ще обогати начините на визуализация и разпределение на обемите по документите.

До официалното обявяване на 3та версия на CSS и въвеждането й в енджините на барузърите ще мине още доста време, но първите стъпки вече са направени и част от браузър енджините, вече въведоха собствени емулации и по-конкретно Mozilla Firefox и Safari.

За улеснение в последващото редактиране на файловете със стиловете, при излизане 3та версия на CSS,  двата браузъра добавят пред проъртитата по една кратка абревиатура, съответно:  -moz- за Mozilla Firefox и -webkit- за Safari (всъщност при Mozilla Firefox и самото пропърти за разширено представяне е изменено, освен добавената абревиатура), като крайния резултат е:

Mozilla Firefox
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Safari
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius


Седнах и се заиграх с новите фичъри и създадох един параграф (ще записвам вътрешно стиловете, за да можете да следите директно измененията):

<p style=“width:75px; height:75px; display:block; background:#f0f0f0″>&nbsp;</p>

 

След като го създадох, приложих (в примера само за Mozilla Firefox) новите пропъртита.

<p style=“width:75px; height:75px; display:block; background:#f0f0f0; -moz-border-radius-bottomleft:20px; -moz-border-radius-bottomright:20px; -moz-border-radius-topleft:20px; -moz-border-radius-topright:20px“>&nbsp;</p>

 

Изглежда много готино и става адски лесно.

До тук оформих само закръглянето, но исках в крайния резултат да добавя цветно разделение на бордера, който е на дъното на образуваната фигура. Добавянето също е лесно и реших да използвам пропъртито само за дъното (border-bottom:1px solid #333):

<p style=“width:75px; height:75px; display:block;
background:#f0f0f0; -moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px; -moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px; border-bottom:1px solid #333″>&nbsp;</p>

 

Хубава работа, ‘ма циганска. Много грозно. Изобщо не исках така да е орязано, а плавно да следва извивката. Малко се отчаях и реши да драсна едно писмо и на W3 и на Mozilla Firefox, за да погледнат този бъг или можеби да доразширят правилата за определяне на бордерите. Писах им… Получих отговори няколко дена по късно, но няма сега да Ви занимавам с тях, а ще Ви покажа какво стана на другия ден.

Сядайки пред компа първото нещо, което проверих е дали съм получил отговор – нямаше (все още) и пак отвори малкото примерче да си го по джуркам. Искам да уточня, че не съм правил тестове за Safari.

И о боже мой…

 

Всичко стана, след като измених малко използваното от мен пропърти за бордера на дъното (border-bottom:1px solid #333) с другия му вариант: border-width:0 0 1px 0; border-style:solid; border-color:#333… В крайна сметка праграфа от примера е:

<p style=“width:75px; height:75px; display:block; background:#f0f0f0; -moz-border-radius-bottomleft:20px; -moz-border-radius-bottomright:20px; -moz-border-radius-topleft:20px; -moz-border-radius-topright:20px; border-width:0 0 1px 0; border-style:solid; border-color:#333″>&nbsp;</p>

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

Много приятно и с много възможности за прилагане. С нетърпение очаквам 3та версия на CSS и новите неща, които ще навлязат в мрежата.

 

 

 

И всичко това само през стиловете и без картинки. Жестоко…

2 мнения по „Border Radius and Round

  1. Да вметна, че примерчетата не се виждат в Рийдъра (логично?), та се наложи да се разходя до тук!

Вашият коментар