Preglednost CSS in njena uporaba za različne elemente

Elemente za oblikovanje na vaši spletni strani lahko nedvomno imenujemo ena najpomembnejših nalog, s katerimi se sooča spletni mojster. Tukaj, kot v življenju, se srečajte na oblačilih. Edinstven slog, lepota in hkrati enostaven in intuitiven dizajn ne bo samo pomagal narediti prvi vtis, ampak tudi pritegnil nove bralce, stranke ali stranke, odvisno od smeri strani.

Preglednost vsebine

Ustvarjanje sredstev CSS-transparentnosti vsebin, za začetek je vredno razumeti, kako je potrebno predpisati samo obliko. Seveda v tem gradivu v standardnih oznakah za programiranje strani spletnega mesta na splošno ne bo nobenih vdolbin. Za ponazoritveni primer se bomo osredotočili na pravokotno območje, barvno monotono polnilo. Če ga želite prikazati, boste morali ustvariti preprosto datoteko s slogom CSS s poznejšo vezavo ali jo postaviti neposredno na stran html dokumenta. Ko ste predpisali potrebne višine, širine, barve in parametre orisa za pravokotni blok, morate v slog dodati kodo, ki vam omogoča, da objekt CSS postane pregleden. Za to je odgovoren parameter »motnost: 0.X«, ker je to raven vidljivosti. Čim bližje je njegova vrednost enemu, tem objekt postane neviden. Ta slog bo pravilno deloval v brskalnikih s podporo za CSS3. Skoraj vsi moderni spletni brskalniki imajo taka navodila.

Povečajte univerzalnost kod

Če želi programer optimizirati svojo vsebino za starejše aplikacije, se bo moral naučiti dodatne sloge.

Za Internet Explorer različice 5.5 in novejše, je zaznana koda zelo dolga in grda vrstica - »filter: progid: DXImageTransform.Microsoft.Alpha (opacity = X)«, kjer je treba parameter preglednosti določiti ne v delcih enega, temveč v stotinah. Njegova najvišja vrednost, pri kateri postane preglednost barve CSS objekta polna, je 100.

Za manj priljubljene brskalnike obstaja lastna koda. Eden od teh je Konqueror, ki je bolje znan uporabnikom namizja KDE na sistemih, podobnih Unixu. Za to morate nastaviti preglednost CSS s parametrom “-khtml-opacity: 0.X”.

Za popolno zaupanje v optimizacijo kode lahko dodate vrstico, ki nudi podporo za eno od prvih različic brskalnikov Mozilla: “-moz-opacity: 0.X”.

Z izvajanjem te optimizacije lahko spletni skrbnik doseže pravilen prikaz njihove vsebine na večini uporabniških naprav.

Aktivnost pri lebdenju

Ker je preglednost CSS najpogosteje uporabljena kot zasnova elementov s hiperpovezavami, lebdenje postane ena izmed primarnih nalog. Na primer, upoštevajte isti pravokotnik. Recimo, da je treba, ko se premikate na bloku, preglednost spremeni od 0 do vrednosti 0,5. Za pridobitev takšne priložnosti bo treba dodati le že obstoječi slog, ki je odgovoren za preglednost v okviru dodatnega Parameter hover css Ta lastnost se uporablja tudi za dodajanje učinkov, kot je spreminjanje barve in oblike predmetov med lebdenjem. To vam omogoča, da naredite potrebna področja vizualno aktivna in privabite pozornost obiskovalcev na povezave ali vsebino.

Vloga za slike

V primeru, da je proces, opisan zgoraj, jasen, bo dodajanje preglednosti slik s CSS enostavno. Sploh ni potrebno spreminjati same kode slog. Lahko ostane nespremenjena. Boste morali delati samo s postavitvijo slik v samem html-dokumentu. Če v prejšnjih primerih vstavite element uporabljene oznake «div», jih morate zamenjati le z «img», ki ustreza tej vrsti vsebine. Slog za slike je enak kot za bloke. Seveda, z uporabo CSS, opisanega na začetku članka, boste morali spremeniti parametre višine, širine in robov za harmoničen videz vstavljene slike.

Preglednost besedila in ozadja

Primer besedila je podoben vstavljanju slik. Ustvarite preglednost v CSS ločeno tudi ni potrebno. V tem primeru bo treba zamenjati oznake s tistimi, ki se uporabljajo za postavitev besedilnih polj. To so »p« in »span«.

Ko je besedilo napisano v telesu html dokumenta brez uporabe posebnih oznak, bo dodajanje preglednosti zelo težko in dolgotrajno. Zato ta možnost ni smiselna.

V primeru, da je spletna stran potrebna, da bo ozadje pregledno, bo CSS tukaj najboljša možnost. Ker je ozadje v bistvu enaka slika ali oblika, jo morate le pripisati v glavno kodo spletnega vira.