Mahabang naisin ng mga taga-disenyo ng Web na mas kontrol ang mga pahinang nililikha nila kapag na-hit ng CSS3 ang eksena. Ang mga bagong estilo na ipinakilala sa CSS3 ay nagbigay sa mga propesyonal sa web ng kakayahang magdagdag ng mga epekto ng Photoshop sa kanilang mga pahina. Kasama dito ang mga pag-aari tulad ng drop shadows at glows, bilugan na sulok, at higit pa. Ipinakilala din ng CSS3 ang mga epekto ng animation na maaaring magamit upang lumikha ng magandang interactivity sa mga site.
Isang napakagandang epekto sa visual na maaari mong idagdag sa mga elemento sa iyong website gamit ang CSS3 ay upang mapukaw ang mga ito sa loob at labas gamit ang isang kumbinasyon ng mga katangian para sa opacity at paglipat. Ito ay isang madaling at mahusay na suportado na paraan upang gawing mas interactive ang iyong mga pahina sa pamamagitan ng paglikha ng mga kupas na mga lugar na nakatuon sa focus kapag ang isang site ng bisita ay isang bagay, tulad ng pagpasada sa ibabaw na elemento.
Tingnan natin kung gaano kadali idagdag ang nakikitang visual na epekto sa iba't ibang elemento sa iyong mga web page.
Baguhin ang Opacity sa Hover
Magsisimula kami sa pamamagitan ng pagtingin sa kung paano baguhin ang opacity ng isang imahe kapag ang isang customer ay pagpasada sa sangkap na iyon. Para sa halimbawang ito (ang HTML ay ipinapakita sa ibaba) gumagamit kami ng isang imahe na may katangian ng klase ng
greydout.
Upang gawing greyed out, idaragdag namin ang sumusunod na mga panuntunan sa estilo sa aming CSS stylesheet: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;opacity: 0.25;}
Ang mga setting ng opacity ay isinasalin sa 25%. Ang ibig sabihin nito ay ipapakita ang imahe bilang 1/4 ng normal na transparency nito. Ang ganap na maliwanag na walang transparency ay magiging 100% habang 0% ay magiging ganap na transparent. Susunod, upang gawing malinaw (o mas tumpak ang larawan, upang maging ganap na hindi maliwanag) kapag ang mouse ay hovered sa ibabaw nito, idaragdag mo ang : hoverpseudo-class:. greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;opacity: 1;}
Mapapansin mo na, para sa mga halimbawang ito, ginagamit namin ang prefix na mga bersyon ng patakaran ng vendor upang matiyak ang pabalik na pagkakatugma para sa mas lumang mga bersyon ng mga browser na iyon. Habang ito ay isang mahusay na kasanayan, ang katotohanan ay na ang opacity tuntunin ay ngayon suportado ng mabuti ng mga browser at ito ay medyo ligtas na drop ang mga vendor prefixed linya. Gayunpaman, wala ring dahilan upang hindi isama ang mga prefix na ito kung nais mong tiyakin ang suporta para sa mas lumang mga bersyon ng browser. Tiyaking sundin ang natanggap na pinakamahusay na kasanayan sa pagtatapos ng deklarasyon sa normal, un-prefix na bersyon ng estilo. Kung inilagay mo ito sa isang site, makikita mo na ang pagsasaayos ng opacity ay isang biglang pagbabago. Una, ito ay kulay-abo at pagkatapos ay hindi ito, na walang pansamantalang estado sa pagitan ng dalawang iyon. Ito ay tulad ng isang ilaw switch - on o off. Ito ay maaaring kung ano ang gusto mo, ngunit maaari mo ring nais na mag-eksperimento sa isang pagbabago na mas unti-unti. Upang magdagdag ng isang talagang magandang epekto at gumawa ng ito fade unti-unti, gusto mong idagdag ang paglipat
ari-arian sa .greydoutklase: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;opacity: 0.25;-webkit-transition: lahat ng 3s kadalian;-moz-transition: lahat ng 3s kadalian;-mga paglipat: lahat ng 3s kadalian;-o-transition: lahat ng 3s kadalian;paglipat: lahat ng 3s kadalian;}
