Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Faceboku Introwertyczka na Google Plus Introwertyczka na Google Plus Introwertyczka na Twitterze Introwertyczka na Tumblr Introwertyczka na Youtube Introwertyczka na Pinterest Kanał RSS bloga Introwertyczka na Bloglovin Mail Introwertyczka na Disqus Introwertyczka na We heart it

Opacity - co to jest i czemu takie fajne?

Opacity - jest to właściwość języka CSS, za pomocą której możemy ustalić stopień przezroczystości danego elementu HTML. Opacity możemy wykorzystać na blogu m. in. w obrazkach, przyciskach społecznościowych, na skrypcie cookies [przeczytaj więcej informacji na temat skryptów cookies].

Jak konkretnie wygląda obiekt na blogu z efektem opacity?

To zależy, bowiem efektu opacity można użyć na trzy zupełnie różne sposoby:
  • jako tło przed najechaniem myszką (img)
  • jako tło po najechaniu myszką (img:hover
  • jako tło statycznie

Możemy np. sprawić, aby dany element był przezroczysty cały czas - dokładnie tak, jak skrypty cookies na moich skromnych blogach:

CSS - Opacity na blogu

CSS - Opacity na blogu

CSS - Opacity na blogu

CSS - Opacity na blogu

CSS - Opacity na blogu

CSS - Opacity na blogu

Przy okazji na drugim screenie mamy szansę zaobserwować przyciski społecznościowe z efektem opacity po najechaniu na obiekt myszką, zaś na dwóch ostatnich screenach widzimy efekt opacity przed najechaniem na obiekt myszką.

W jaki konkretnie sposób efekt opacity zmienia zdjęcia? Właśnie w taki:

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

CSS - Opacity na zdjęciach

W celu ułatwienia znalezienia niuansów w ramkach żółtych znajdują się zdjęcia przed najechaniem myszką, natomiast w ramkach czerwonych - już po najechaniu myszką (img:hover).

Jak ustawić wartość opacity? Należy przede wszystkim pamiętać, że im wyższa wartość po zerze, tym mniejsza przezroczystość. Analogicznie im mniejsza wartość po zerze, tym większa przezroczystość. Innymi słowy, średnia przezroczystość obiektu wynosi opacity: 0.5, natomiast maksymalna przezroczystość wynosi opacity: 0.1. Dla skryptów cookies na moich blogach przezroczystość wynosi opacity: 0.8. Przezroczystość wynosząca 1.0 jest neutralna i można ją ustawić wtedy, gdy chce się zmienić wartość na neutralną po najechaniu myszką.

O tym, w jaki sposób konkretnie dodać właściwość opacity do bloga, będzie można przeczytać już niedługo w Poradach CSS. Stamtąd również będzie można skopiować gotowe kody. Niektóre już można skopiować, ale akurat te dotyczące opacity dodam trochę później (w końcu czasami trzeba wstać od tego kompa, żeby korzeni nie zapuścić).

Jak widać na powyższych screenach, właściwość opacity stanowi miłe urozmaicenie i piękną ozdobę dla elementów bloga. Warto więc dołączyć ową ozdobą również na swój blog, chociażby w celu przełamania szablonowej rutyny. :)
Kopiowanie treści jest zabronione. Wszelkie prawa zastrzeżone.

Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Faceboku Introwertyczka na Google Plus Introwertyczka na Google Plus Introwertyczka na Twitterze Introwertyczka na Tumblr Introwertyczka na Youtube Introwertyczka na Pinterest Kanał RSS bloga Introwertyczka na Bloglovin Mail Introwertyczka na Disqus Introwertyczka na We heart it