CSS transparentnost i njezina primjena za različite elemente

Elementi za oblikovanje na vlastitoj web-lokaciji, bez sumnje, mogu se nazvati jednim od najvažnijih zadataka s kojima se suočava web-master. Ovdje, kao u životu, susreću se na odjeći. Jedinstven stil, ljepota i istovremeno jednostavan i intuitivan dizajn ne samo da će pomoći da se napravi prvi dojam, nego i privuče nove čitatelje, kupce ili kupce, ovisno o smjeru stranice.

Transparentnost sadržaja

Stvarajući sredstva CSS-a transparentnost sadržaja, za početak vrijedi shvatiti kako je potrebno propisati sam obrazac. Naravno, u ovom materijalu neće biti uvlačenja u standardnim oznakama za programiranje stranice stranice u cjelini. Ilustrativan primjer, usredotočit ćemo se na pravokutno područje, obojeno monotono ispunjenje. Da biste ga prikazali, morat ćete stvoriti jednostavnu CSS datoteku sa sljedećim povezivanjem ili postaviti kôd izravno na stranicu HTML dokumenta. Nakon što ste propisali potrebne parametre visine, širine, boje i konture pravokutnog bloka, morate dodati kôd stilu koji vam omogućuje da učinite CSS objekt transparentnim. Za to je odgovoran parametar “neprozirnost: 0.X”, jer je to razina vidljivosti. Što je bliža vrijednost jednoj, objekt postaje nevidljiv. Ovaj stil će ispravno raditi u preglednicima s podrškom za CSS3. Gotovo svi moderni web-preglednici sada imaju takve upute.

Povećajte univerzalnost koda

Ako programer želi optimizirati svoj sadržaj za starije aplikacije, morat će naučiti dodatne stilove.

Za Internet Explorer verzije 5.5 i više, percipirani kod je vrlo duga i ružna linija - “filter: progid: DXImageTransform.Microsoft.Alpha (neprozirnost = X)”, gdje parametar transparentnosti treba specificirati ne u dijelovima jedan, nego u stotinama. Njegova maksimalna vrijednost, na kojoj je transparentnost boje CSS objekta puna, je 100.

Za manje popularne preglednike postoji vlastiti kod. Jedan od njih je Konqueror, poznatiji korisnicima KDE radne površine na sustavima sličnim UNIX-u. Za to trebate postaviti transparentnost CSS-a s parametrom "-khtml-opacity: 0.X".

Za potpuno povjerenje u optimiziranje koda, možete dodati liniju koja pruža podršku za jednu od prvih verzija Mozilla preglednika: "-moz-opacity: 0.X".

Izvođenjem ove optimizacije webmaster može postići ispravan prikaz svog sadržaja na većini korisničkih uređaja.

Aktivnost lebdenja

Budući da se transparentnost CSS-a najčešće koristi kao dizajn elemenata s hiperlinkovima, lebdeća aktivnost postaje jedan od primarnih zadataka. Primjerice, razmotrite isti pravokutnik. Pretpostavimo da je potrebno da kada se zadržite na bloku, transparentnost promijeni od 0 do vrijednosti od 0,5. Da bi se dobila takva prilika, bit će potrebno dodati već postojeći stil odgovoran za transparentnost pod dodatnim Parametar hover css Ovo se svojstvo također koristi za dodavanje efekata kao što je promjena boje i oblika objekata tijekom lebdenja. To vam omogućuje da vizualno aktivirate potrebna područja, privlačeći pozornost posjetitelja na veze ili sadržaj.

Aplikacija za slike

U slučaju da je gore opisani proces jasan, dodavanje transparentnosti slikama s CSS-om će biti lako. Nije potrebno čak ni mijenjati sam stilski kod. Može se ostaviti nepromijenjenim. Morat ćete raditi samo s izgledom slika u samom html dokumentu. Ako je u prethodnim slučajevima za umetanje elementa korišten tag «div», ovdje ih samo trebate zamijeniti s «img», prikladnim za ovu vrstu sadržaja. Stil za slike je isti kao i za blokove. Naravno, primjenom CSS-a opisanog na početku članka, trebat ćete promijeniti parametre visine, širine i rubova za skladan izgled umetnute slike.

Transparentnost teksta i pozadine

Primjer teksta sličan je umetanju slika. Kreirajte transparentnost u CSS-u zasebno također nije potrebno. U tom slučaju bit će potrebno zamijeniti oznake oznakama koje se koriste za raspored tekstualnih polja. To su "p" i "span".

Kada se tekst piše u tijelu HTML dokumenta bez korištenja posebnih oznaka, dodavanje transparentnosti bit će vrlo teško i dugotrajno. Stoga, ova opcija nema smisla razmatrati.

U slučaju da je web stranica potrebna kako bi pozadina bila transparentna, CSS bi ovdje bio najbolja opcija. Budući da je pozadina u suštini ista slika ili obrazac, samo trebate priložiti naš stil u glavnom kodu web resursa.