Заобляне и засенчване чрез препарати като CSS

Другарчето Коко Данков си играе много майсторски със CSS та рекох малко да се поразровя в кода му и да видя какво мога да си намеря за мене там. Е, попаднах на готини работи, които най-вероятно и на други хора ще са им интересни. CSS не е от нещата, които бих нарекъл силна моя страна, заради което специалистите могат да пропуснат написаното по-долу като нещо, което знаят на изуст.

Пък най-после да сложа и някаква леко техническа приказка в блога.

Заобляне на ръбове (border):

-moz-border-radius: 15px; /* FF1+ */
-webkit-border-radius: 15px; /* Saf3+, Chrome */
border-radius: 15px; /* Opera 10.5, IE 9 */

Сянка на ръбове (и всякакви други обекти):

-moz-box-shadow: 0px 0px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 10px #000; /* Opera 10.5, IE 9.0 */

Както можете да забележите, това са супер-дупер върховни технологии, които не всеки браузър би поддържал.

Използвайте ги съвестно и с повишено внимание!

П.П. Източникът на това безценно знание е ей тоз файл.

2 мнения за “Заобляне и засенчване чрез препарати като CSS”

  1. Интересни са CSS3 нещата ама това е вече доста стара информация. Ако знаеш хората какави красоти правят с тия неща, особено като не им пука за IE.

    Виж тези бутони са изцяло CSS и шрифтове. Няма нито 1 картинка:
    http://lab.simurai.com/css/umbrui/

    А ето и нещо, което може да се използва и в реалния свят:
    http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

    Като цяло е добре човек да разгледа в дълбочина цялата площадка на ZURB:
    http://www.zurb.com/playground

    Ето нещо съвсем прясно, което видях днес (купих си софтуера)
    Какво може да се постигне в днешно време от модерните браузери със собствени шрифтове:
    https://fusionads.net/bundle/

    Появиха се даже интересни софтуери:
    http://www.sencha.com/products/animator/

    Други интересности:
    http://lab.simurai.com/css/buttons/

    Сега… мисля няма нужда да обяснявам, че това е още в сферата на яките ентусиасти и още не се е наложило като стандарт. Интересно е да си играеш на ръба на възможностите на технологиите и тези неща са основно това.

    Мисля няма нужда но все пак да предупредя, че ви трябва модерен браузер за да се насладите на горните линкове. Препоръчвам Safari ако сте на OS X или Chrome

  2. Благодарим за включването, токущо стойността на публикацията се вдигна пет пъти :) Пък аз просто си имах едно старо todo „цъкни инфо за заоблянето и сенките от лекцията на Коко“.

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

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

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *