От известно време ме глождеше въпросът дали готиния ефект на полупрозрачен заоблен контур, който използват за AJAX функционалностите във Facebook, може да се постигне само със CSS. Намерих малко свободно време и набързо спретнах малък експеримент, който освен това разкри някои особености на използването на RGBa цветове за контури.

Като начало избрах някакъв пейзаж, върху който да личи прозрачността на контура и го сложих за фон на документа. После позиционирах в средата един div елемент и се опитах да му задам контур и бял фон. Както можете да видите, резултата не е това, което се очаква. Въпреки, че съм задал цветът на контура като rgba(90,90,90,0.5), т.е. да е 50% просрачен, той излиза плътен. Това се дължи на факта, че е зададен плътен фон на елемента. Ако елемента няма фон или фонът също е полу-прозрачен, тогава и контурът е полу-прозрачен.

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

С помощта на jQuery е много лесно да се създаде изскачащ прозорец, който да показва съдържание, заредено от сървъра. За нуждите на експеримента ще направя следно:

• При зареждане на документа добавяме към него двата div елемента, описващи изскачащия прозорец.
• Създаваме една функция, която да се изпълнява при активиране на връзка и да зарежда резултата от заявката в прозореца и да го показва
• Дефинираме още една функция, която да затваря прозореца, и я прикачаме към всички бутони, наследници на основния div на изскачащия прозорец чрез метода live.

Това е минимално необходимото, за да работи нашия изскачащ прозорец. Естествено, за да имаме всичката нужна функционалност, ще трябва доста повече да се постараем, но това е достатъчно, за да демонстрираме възможностите на CSS3. Вижте крайния вариант, в който съм добавил малко съдържание, което да наподобява съобщение от Facebook. Естествено, не бихте искали вашия сайт да бъде имитация, но пък не пречи да почерпите идеи от другите, нали?

И така, кои са нещата, които карат изкачащия прозорец да изглежда както изглежда?

• Комбинацията от border-radius и дебелина на контура, равна на радиуса, правят контура заоблен отвън и с прав ъгъл отвътре. Всъщност това си е описано в спецификацията, където можете да намерите и други интересни примери за използването на заоблени ъгли.
• Можем да използваме RGBa, за да направим контура полу-прозрачен, но само ако елемента няма фон. Ако има зададен фон, то контурът става толкова прозрачен, колкото и фонът.

И накаря да не пропусна, ако искате да имате изскачащи блокчета като във Facebook, но не ви се занимава да си пишете всичко сами, можете да се възползвате от facebox – разширение за jQuery с всичко необходимо.

Етикети: border-radius, CSS, CSS3, facebook, lightbox, RGBa