Vlad Merzhevich

Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne postoji jednobojni uzorak, već slika, u ovom slučaju prozirnost postaje primjetna. Ovaj efekat se postiže na različite načine, a ako se sjećate svega, uključujući i staromodne metode, onda se koristi PNG slika kao pozadina, kreiranje karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodnu lošu stranu. Napravit ću mali pregled kako bi postalo jasno o čemu se radi, kao i za one čitatelje koji nisu upoznati s nekonvencionalnim opcijama za stvaranje efekta translucencije.

PNG kao pozadina

U grafičkom uređivaču se prethodno priprema jednobojni polutransparentni crtež koji se pohranjuje u PNG-24 formatu (slika 1). Karakteristika ovog formata je podrška za 256 nivoa transparentnosti, ili, jednostavno rečeno, može prikazati prozirne slike.

Rice. 1. Slika za kreiranje pozadine

Zatim dodajemo sliku kao pozadinu kroz svojstvo pozadine, kao što je prikazano u primjeru 1.

Primjer 1. Korištenje prozirnog uzorka

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 3.

Rice. 2. Nanošenje pozadine

Zastarjeli pretraživač Internet Explorer 6 ne radi sa translucencijom u PNG-24, ako iz nekog razloga trebate podržati ovaj pretraživač, morat ćete koristiti skripte za njega.

Ova metoda ima niz ograničenja. Dakle, kada isključite slike u pretraživaču, pozadina će potpuno nestati. Osim toga, nije tako lako promijeniti boju pozadine i vrijednost prozirnosti, za to ćete morati ponovo urediti sliku.

Karirana slika

Ova metoda spada u vrlo drevne načine implementacije translucencije, kada pretraživači "ništa nisu mogli" i morali su tražiti nekonvencionalna rješenja. Trik je u stvaranju slike koja se mijenja između prozirnih i neprozirnih piksela (slika 3). Ova pravilna struktura stvara proziran efekat, u suštini ga imitirajući.

Rice. 3. Uvećani karirani uzorak

Ovako to izgleda na kraju (slika 4).

Rice. 4. Simulacija translucencije

Nedostaci ove metode su uporedivi s prethodnom; može se pojaviti i moiré uzorak i tekst se pogoršava.

Svojstvo neprozirnosti

Svojstvo opacity CSS 3 postavlja vrijednost neprozirnosti i kreće se od 0 do 1, gdje je nula puna transparentnost elementa, a jedan neproziran. Svojstvo neprozirnosti ima posebnu karakteristiku - transparentnost je proširena na svu djecu i ne mogu premašiti vrijednost transparentnosti svog roditelja. Ispostavilo se da na prozirnoj pozadini ne može biti neprozirnog teksta (primjer 2).

Primjer 2. Upotreba neprozirnosti

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. 5.

Rice. 5. Translucencija teksta i pozadine

U Internet Exploreru do i uključujući 8.0, neprozirnost ne radi, tako da koristi svojstvo filtera specifično za pretraživač. Naravno, to rezultira nevažećim CSS-om.

RGBA

Savremeni pristup je mnogo jednostavniji i jasniji od gore navedenih metoda i sastoji se u korištenju RGBA formata za boju i pozadinu. Prva tri slova su poznata mnogima i označavaju crvenu, zelenu, plavu (crvenu, zelenu, plavu), potonje simbolizira alfa kanal i postavlja transparentnost elementa. Format snimanja je sljedeći.

boja pozadine: rgba (r, g, b, a);

Vrijednost komponente boje stavlja se u zagrade umjesto slova, može se vidjeti u bilo kojem grafičkom uređivaču, zadnja vrijednost postavlja transparentnost i poklapa se sa vrijednošću svojstva neprozirnosti.

Ne podržavaju svi pretraživači ovaj format: Internet Explorer od verzije 9, Opera od verzije 10, Firefox od verzije 3, Safari od verzije 3.2. Ali općenito, moderni pretraživači ispravno prikazuju transparentnost. Za starije verzije IE-a možete zasebno odrediti boju u uobičajenom formatu, dok, naravno, neće biti transparentnosti. Ili opet, koristite svojstvo filtera, ali tada morate da se pomirite i sa transparentnošću teksta (primjer 3). Da bih održao validan CSS, koristio sam uslovne komentare.

Primjer 3. Korištenje RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat primjera može se vidjeti na sl. 6.

Rice. 6. Polu-transparentna pozadina sa neprozirnim tekstom

Uporedite sliku sa prethodnom, slova su svetlija i jasnija.

U Internet Explorer-u 7 pronađena je greška pri kombinovanju boje pozadine sa različitim vrijednostima. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano ispod, pozadina u IE7 se uopće neće prikazati.

Div (boja pozadine: crvena; / * Ne primjenjuje se u IE7 * / boja pozadine: rgba (255, 0, 0, 0.5);)

Ovo se rješava zamjenom svojstva background-color sa pozadinom.

Div (pozadina: crvena; / * I ovo radi * / pozadina: rgba (255, 0, 0, 0.5);) Međutim, postoji jedno upozorenje. CSS validator „psuje“ u pozadinu ako mu je data vrijednost u RGBA formatu. Ali u isto vrijeme ispravno se odnosi na boju pozadine. Općenito, kao i uvijek, morate birati između pretraživača i valjanosti.

Kako postaviti transparentnu boju u css? Trenutno postoje 3 načina da se to uradi.

Metoda 1 - transparentna vrijednost

Ako vrijednost teksta ili boje pozadine postavite na transparentnu, tada će boja biti potpuno prozirna, odnosno nevidljiva. primjer:

Boja: transparentna;

Takav tekst neće biti vidljiv na stranici.

Metoda 2 - rgba režim boja

A ovo je već css3 inovacija. Ranije u web razvoju nije postojao takav način rada, postojao je samo rgb. Vjerovatno znate kako napisati boju u ovom formatu. Da biste to učinili, u zagradama morate navesti tri vrijednosti od 0 do 255, što ukazuje na zasićenost jedne od tri primarne boje (crvena, zelena, plava). Na primjer:

Pozadina: rgb (230, 121, 156);

Rgba format se ne razlikuje, dodaje se samo četvrta vrijednost - stepen transparentnosti elementa od 0 do 1. Generalno, ovaj format notacije se uglavnom koristi za specifikaciju poluprozirne boje, a ne potpuno transparentne. Da biste postigli potpunu transparentnost, samo trebate napisati 0 kao četvrtu vrijednost.

Pozadina: rgba (0, 0, 0, 0);

U ovom slučaju, preostale 3 znamenke ne igraju posebnu ulogu.

Poluprovidna boja se može postaviti ako je četvrti parametar postavljen na vrijednost od 0,01 do 0,99. Već sam malo pisao o postavljanju translucencije pozadine, možete pročitati ako vas zanima.

Metoda 3 - neprozirnost

Još jedno svojstvo iz css3 tehnologije. Ali želim da vas odmah upozorim da radi malo drugačije. Opacity se koristi za postavljanje neprozirnosti na cijeli blok na koji se primjenjuje. Tako se čitljivost teksta i percepcija slika pogoršavaju. Dakle, vidim smisao primjene svojstva samo za blokove u kojima nema teksta ili bilo koje druge informacije. Vrijednosti se mogu podesiti od 0 do 1, kao što je slučaj sa četvrtim parametrom kada se specificira boja u rgba formatu.

Općenito, trenutno su to svi načini za postavljanje transparentne boje u css-u. Zašto je to potrebno, drugo je pitanje. Ono što je ispod se vidi kroz providnu pozadinu. Ponekad se to mora uraditi dizajnom. Općenito, tehnika sa translucencijom je danas vrlo uobičajena.

Transparentna pozadina

Kao što verovatno znate, pozadina je css svojstvo koje vam omogućava da postavite boju pozadine ili učitate sliku koja će delovati kao pozadina.

Postavite transparentnost za css pozadinu

Dakle, sve je ovo vrlo jednostavno zahvaljujući rgba formatu za označavanje boja. Ako radite sa grafičkim uređivačima, vjerovatno znate da se rgb režim boja dešifruje na sljedeći način: udio crvene (crvene), proporcije zelene (zelene) i plave (plave). Dakle, rgba je praktično isti, samo se dodaje još jedan parametar - transparentnost. Napisano je ovako:

Boja pozadine: rgba (173, 57, 22, 0.5)

Prvo, eksplicitno ukazujemo da postavljamo boju u rgba modu. Zatim specificiramo vrijednosti zasićenosti tri primarne boje od 0 do 255, gdje je 255 najveća zasićenost. Četvrti parametar je naša transparentnost. Ovdje je upisana vrijednost od 0 do jedan. 1 je potpuno neproziran, a 0 potpuno transparentan. Shodno tome, ako ga postavite na 0, boja pozadine uopće neće biti vidljiva.

Sada znate kako postaviti transparentnost za svojstvo pozadine u css-u. Da biste to učinili, trebate koristiti rgba način boje. Postoji i svojstvo neprozirnosti, ali se primjenjuje na cijeli element u cjelini. To jest, kada se primeni neprozirnost, transparentnost se takođe može primeniti na tekst, čineći ga nečitljivim.

Prozirna pozadina na primjer

Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer, imamo opću pozadinu za stranicu. Ovako bi blok izgledao da mu je data puna crna boja:

A sada ćemo postaviti istu crnu boju za blok, ali je označiti koristeći rgba format boje, specificirajući posljednju vrijednost u 0.7, na primjer. Ispada ovako:

Sada je pozadina bloka vidljiva kroz nju i kroz nju možete vidjeti pozadinsku sliku. Ova slika i pozadina služe samo u svrhu ilustracije. Kao što možete zamisliti, prozirnost u css pozadini može biti korisna kada vam je potrebna pozadina ugniježđenog elementa da se vidi kroz nju bez prikrivanja drugih pozadina koje se nalaze u drugim slojevima.

Nije teško podesiti samu boju koristeći rgba. Kao što je već spomenuto - prva tri slova označavaju tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Propisivanjem različitih vrijednosti možete dobiti milione različitih boja, a prozirnost će vam omogućiti da smislite mnogo lijepih efekata za stranicu, ako je potrebno.

Želite li naučiti kako kreirati stranice s originalnim i živopisnim modernim dizajnom? Upotreba prozirnih elemenata može vam pomoći u rješavanju ovog teškog zadatka. Danas ćemo pogledati glavne praktične načine postavljanja transparentnosti strukturnih elemenata.

Kako da podesim transparentnost?

Ako ovu temu razmotrimo kroz prizmu istorijskog razvoja web tehnologija, onda se mogu razlikovati sljedeći pristupi:

• Nekretnina neprozirnost.
• Upotreba PNG slika-slike
• Sistemski format RGBA
• I na kraju, antičke ili karirane slike.

CSS svojstvo Prozirnost

Aplikacija za styling CSS svojstva neprozirnost omogućava vam da postavite transparentnost elementa na koji se primjenjuje. Vrijednosti koje se mogu koristiti kao argument su u rasponu od 0 do 1.
Pogledajmo primjer.

< html> < head> < title>TODO dostaviti naslov < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Biće dosta vašeg teksta

/ * Pozadina za tijelo stranice * /). prozračen (dopuna: 10px; / * Uvlačenje teksta * / pozadina: tamnotirkizna; / * Postavite boju pozadine * / margina: 0 auto; / * Centrirajte blok * /širina: 50%; / * Postavite širinu bloka * / neprozirnost: 0,7; / * Postavite transparentnost * / font: 48px / 64px Times New Roman; text-align: justify; )

Kao rezultat, dobili smo prozirni blok:

Bitan!!!

1. Opacity uzima vrijednosti iz raspona: 0 (puna prozirnost) - 1 (neprozirno).
2. Kompatibilnost među pretraživačima. V IE zaključno sa sedmom verzijom Opacity nije podržan. Sljedeći red će pomoći da se postigne isti prikaz elementa:

   filter: alfa (Neprozirnost = 70);

   Treba uzeti u obzir da je nekretnina filter odsutan u html specifikacije, mijenja vrijednosti od 1 do 100 i može se primijeniti samo na elemente:

   • sa apsolutnim pozicioniranjem ( pozicija: apsolutna)
   • sa fiksnom linearnom dimenzijom ( visina ili širina).
3. Stepen transparentnosti nasljeđuju djeca, pri čemu se transparentnost djetetu može povećati, ali se ne može smanjiti. Odnosno, na prozirnoj pozadini nemojte praviti JASAN tekst.

Za bolje razumijevanje materijala posljednje tačke, u prethodnom primjeru, tekst postavite na bijelo.

boja: bijela;

i razmotrite to pod mikroskopom:

Kao što vidite, sadržaj našeg bloka (tekst) je također postao proziran. Ali šta ako vas u praksi ne zanima transparentnost sadržaja, već samo transparentnost pozadine? U tom slučaju idite na sljedeću tačku.

Korištenje PNG slika

Zanimljiva karakteristika formata PNG slika je da ima 256 nivoa transparentnosti. Mislim da ste uhvatili tok misli i vjerovatno ste već izgradili algoritam za rad ovog pristupa. Samo moram to izgovoriti.

Kao rezultat, dobili smo blok s prozirnom pozadinom i neprozirnim sadržajem:

Bitan!!!

1. Za razliku od imovine neprozirnost transparentnost je postavljena samo za pozadinu
2. Kompatibilnost među pretraživačima. Radi u skoro svim pretraživačima i to je plus. Ali transparentnost PNG slika nije podržano u IE6... Ako optimizirate svoju stranicu za takvu starinu, morat ćete koristiti druge metode ili skripte.
3. Kada isključite prikaz slika, vaša pozadina će nestati (uzmite to u obzir prilikom optimizacije prikaza na mobilnim uređajima, jer neograničeni internet nije uvijek pri ruci).
4. Da biste promijenili boju i/ili prozirnost, trebate kreirati novu sliku i ponovo je učitati na server.

RGBA sistemski format

Jedna od najmodernijih metoda za promjenu transparentnosti pozadine je korištenje sistema RGBA.

RGBA- sistem predstavljanja boja pomoću tri standardna kanala RGB(crvena, zelena, plava), a četvrta, tzv Alpha-kanal koji karakteriše stepen transparentnosti.

pozadina: rgba (r, g, b, a);

U primjeru koji već poznajemo, zamijenimo sadržaj CSS datoteku na sljedeće:

tijelo (pozadina: url (./ vaden- pro- logo. png); / * Pozadina * /). prozračen (podstava: 10px; pozadina: rgba (0, 206, 209, 0.7); margina: 0 auto; širina: 50%; font: 48px / 64px Times New Roman; boja: bijela; poravnanje teksta: justify;)

Bitan!!!

1. Za razliku od imovine neprozirnost transparentnost je postavljena samo za pozadinu
2. Za razliku od metode PNG slika slike, da bismo promenili boju ili stepen transparentnosti, samo treba da promenimo vrednosti rgba.
3. Kompatibilnost među pretraživačima. Radi u svim modernim pretraživačima (počevši od IE9, Op10, Fx3,Sf3.2 Stariji pretraživači će morati ili žrtvovati transparentnost ili koristiti neprozirnost, png metode.

Karirane slike ili poštovanje istorije

Ova metoda je bila na početku web dizajna, a vidjela je stare stare pretraživače koji zaista ništa nisu znali da rade. Sastoji se od stvaranja karirane pozadine u kojoj se obojeni kvadrati izmjenjuju s prozirnim.

Kao rezultat primjene takve slike, kao pozadina je dobivena pseudotransparentna pozadina.

Bitan!!!

1. Kada gledate tekst na takvoj pozadini, oči se mogu brzo umoriti (naročito mreškanje pri pomicanju pritisnite dolje).
2. Ostale karakteristike aplikacije su slične metodi "PNG-slike".

Hajde da sumiramo?

• Ispod prozirnog bloka trebala bi biti svijetla, a ne monotona slika. Na običnoj pozadini gubi se polet transparentnosti.
• Prilikom odabira konkretnog praktičnog pristupa vodite se pretraživačima koje vaša ciljna publika koristi. Kompatibilnost među pretraživačima je važna.

Razred 1 Razred 2 Razred 3 Razred 4 Razred 5

Detalji Kategorija: Web dizajner Autor: SEO & WEB - KELL4

Napravite transparentnu pozadinu u HTML i CSS (prozirnost i RGBA efekti)

Efekat translucencije element je jasno vidljiv na pozadinskoj slici i postao je široko rasprostranjen u različitim operativnim sistemima, jer izgleda elegantno i lijepo. Glavna stvar nije monokromatski uzorak ispod prozirnih blokova, već slika, u tom slučaju prozirnost postaje vidljiva.

Ovaj efekat se postiže na različite načine, uključujući staromodne tehnike kao što je korištenje PNG slike kao pozadine, kreiranje karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodne nedostatke.

Razmotrite prozirnost teksta i pozadine - kako to ispravno koristiti u dizajnu web stranice:

Glavna karakteristika ovog svojstva je da vrijednost transparentnosti utječe na svu djecu unutra, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni. Nivo transparentnosti možete povećati promjenom naredbe za neprozirnost sa 0,1 na 1.

HTML 5 CSS 3 IE 9

U web dizajnu se također primjenjuje djelomična transparentnost koja se postiže kroz RGBA format boja, koji se postavlja samo za pozadinu elementa.

Obično u dizajnu samo pozadina elementa treba da bude prozirna, a tekst treba da bude neproziran da bi se održao čitljivost. Svojstvo neprozirnosti je ovdje neprikladno jer će tekst unutar elementa također biti djelomično transparentan. Najbolje je koristiti RGBA format, čiji je dio alfa kanal, ili drugim riječima vrijednost transparentnosti. Vrijednost se piše rgba, a zatim su vrijednosti komponente crvene, plave i zelene boje navedene u zagradama odvojene zarezima. Posljednja je transparentnost, koja je postavljena od 0 do 1, pri čemu je 0 puna transparentnost, a 1 neprozirna boja za rgba sintaksu.

Prozirna pozadina HTML 5 CSS 3 IE 9

Prozirnost pozadine je postavljena na 90% - Poluprozirna pozadina i neproziran tekst.

Transparentnost u CSS-u je prilično trendi tehnika u posljednje vrijeme i uzrokuje poteškoće u implementaciji među pretraživačima. Do sada, ne postoji jedinstvena metoda za implementaciju transparentnosti u svim pretraživačima. U posljednje vrijeme, međutim, situacija se značajno popravila.

Ovaj članak daje detaljan pregled postojećih pristupa i pruža primjere koda i objašnjenja koja će vam pomoći da postignete isti rezultat u svim pretraživačima uz minimalan napor.

Još jedna stvar koju vrijedi spomenuti je da iako transparentnost postoji već nekoliko godina, ona nikada nije bila dio CSS standarda. Ovo je nestandardno svojstvo i trebalo bi da bude deo CSS3 specifikacije.

Stari pristup

U starijim verzijama Firefoxa i Safarija, morate primijeniti svojstvo na sljedeći način:

#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)

Svojstvo -khtml-opacity se koristilo u starijim verzijama webkit pretraživača. Ovo svojstvo je zastarjelo i više nije potrebno osim ako niste sigurni da značajan dio prometa vaše stranice dolazi od posjetitelja koji koriste Safari 1.x, što je naravno malo vjerovatno.

Sljedeća linija koristi svojstvo -moz-opacity koje je radilo na vrlo ranim verzijama Mozilla motora. Firefox je prekinuo podršku za njega u verziji 0.9.

CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi

Za većinu modernih pretraživača dovoljno je sljedeće svojstvo:

#myElement (prozirnost: .7;)

U gornjem primjeru, element je postavljen na vrijednost neprozirnosti od 70% (30% neprozirnosti). Odnosno, ako postavimo vrijednost na jedan, tada će element biti neproziran i, shodno tome, postavljanje ove vrijednosti na nulu učinit će ga nevidljivim.

Svojstvo neprozirnosti obrađuje 2 decimalne znamenke. Odnosno, vrijednost ".01" će se razlikovati od vrijednosti ".02", iako to nije mnogo primjetno.

CSS transparentnost za Internet Explorer

Kao i obično, Internet Explorer nije u prijateljskim odnosima sa drugim pretraživačima. Osim toga, sada imamo tri verzije ovog pretraživača u prilično širokoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatne napore za postizanje pozitivnog rezultata.

#myElement (filter: alfa (prozirnost = 40);)

Ovaj primjer koristi svojstvo filtera, koje radi u verzijama 6-8, ali postoji jedno ograničenje za verzije 6 i 7: element mora imati svojstvo hasLayout postavljeno na true. Ovo svojstvo je prisutno samo u IE i više o njemu možete pročitati, na primjer, na Habré-u.

Drugi način da postavite transparentnost koristeći CSS u IE8 je korištenje sljedećeg pristupa (obratite pažnju na komentare):

#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (prozirnost = 40); / * radi u IE6, IE7 i IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (prozirnost = 40)"; / * samo IE8 * /)

Prva linija će raditi u svim verzijama koje se trenutno koriste, druga samo u IE8. Imajte na umu da drugi red koristi -ms- prefiks i vrijednost je navedena u navodnicima.

Postavljanje i promjena CSS transparentnosti koristeći JavaScript ili jQuery

Za postavljanje transparentnosti možete koristiti sljedeći kod:

Document.getElementById ("myElement"). Style.opacity = ".4"; // za većinu pretraživača document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"; // za IE

Naravno, u ovom slučaju je mnogo lakše koristiti jQuery, osim toga, on će raditi u svim pretraživačima:

$("# myElement").css ((prozirnost: .4)); // radi u svim pretraživačima

Ovu nekretninu možete animirati:

$ ("# myElement"). animate ((prozirnost: .4), 1000, funkcija () (// Animacija je završena; ovaj kod radi u svim pretraživačima.));

RGBA funkcija

Planirano je da se podrži alfa kanal u CSS3 koristeći rgba funkciju. Ova funkcija radi u Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Koristi se ovako:

#rgba (pozadina: rgba (98, 135, 167, .4);)

U ovom slučaju, posljednji parametar pokazuje nivo neprozirnosti.

HSLA funkcija

Slično prethodnoj funkciji, CSS3 vam takođe omogućava da postavite poluprozirnu boju koristeći HSLA funkciju, čiji su parametri Hue, Saturation, Lightness i Alpha kanal.

#hsla (pozadina: hsla (207, 38%, 47%, .4);)

Važna stvar kada se koriste funkcije rgba i hsla je da se postavka neprozirnosti ne primjenjuje na podređene elemente, dok je svojstvo neprozirnosti naslijeđeno.