Блогът на Гонзо

Упражнение по стил: Изскачащи блокчета а ла Facebook

От известно време ме глождеше въпросът дали готиния ефект на полупрозрачен заоблен контур, който използват за 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 с всичко необходимо.

Етикети: , , , , ,

2 коментара

Leave a comment

XHTML: Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>