Vlad Merzhevich

Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne smije postojati jednobojni uzorak, već slika, u ovom slučaju prozirnost postaje vidljiva. Ovaj efekt se postiže na mnogo načina, a ako se sjećate svega, uključujući staromodne metode, onda je ovo korištenje PNG slike kao pozadine, stvaranje kockaste slike i svojstvo neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodnu lošu stranu. Napravit ću kratki pregled kako bi postalo jasno o čemu se radi, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje efekta prozirnosti.

PNG kao pozadinu

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

Riža. 1. Slika za stvaranje 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.

Riža. 2. Postavljanje tapeta

Naslijeđeni preglednik Internet Explorer 6 ne radi s translucencijom u PNG-24, ako iz nekog razloga trebate podržati ovaj preglednik, morat ćete koristiti skripte za njega.

Prikazana metoda ima niz ograničenja. Dakle, kada isključite slike u pregledniku, pozadina će potpuno nestati. Osim toga, nije lako promijeniti boju pozadine i vrijednost prozirnosti, za to ćete morati ponovno urediti sliku.

karirana slika

Ova metoda pripada drevnim načinima implementacije translucencije, kada preglednici "nisu mogli učiniti ništa", a morali ste tražiti rješenja bez predloška. Trik je stvoriti sliku na kojoj se izmjenjuju prozirni i neprozirni pikseli (slika 3). Takva pravilna struktura stvara učinak prozirnosti, u biti ga oponaša.

Riža. 3. Uvećani karirani uzorak

Evo kako to na kraju izgleda (slika 4).

Riža. 4. Imitacija prozirnosti

Nedostaci ove metode usporedivi su s prethodnom, također se mogu pojaviti moire uzorci i dolazi do degradacije teksta.

svojstvo neprozirnosti

Svojstvo neprozirnosti CSS 3 postavlja vrijednost prozirnosti i kreće se od 0 do 1, gdje je nula puna prozirnost elementa, a jedan je, naprotiv, neprozirnost. Svojstvo neprozirnosti ima značajku - prozirnost se distribuira svim podređenim elementima i oni ne mogu premašiti vrijednost prozirnosti svog roditelja. Ispada da na prozirnoj pozadini ne može biti neprozirnog teksta (primjer 2).

Primjer 2: Korištenje neprozirnosti

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. 5.

Riža. 5. Prozirnost teksta i pozadine

U Internet Exploreru do i uključujući verziju 8.0, neprozirnost ne radi, pa se za nju koristi svojstvo filtra specifično za preglednik. Naravno, to rezultira nevažećim CSS kodom.

RGBA

Moderni pristup mnogo je jednostavniji i vizualniji od gore navedenih metoda i sastoji se od korištenja RGBA formata za boju i pozadinu. Prva tri slova poznata su mnogima i označavaju crvenu, zelenu, plavu (crvena, zelena, plava), posljednja simbolizira alfa kanal i postavlja prozirnost elementa. Format zapisa je ovaj.

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

U zagradama se umjesto slova stavlja vrijednost komponente boje, može se vidjeti u bilo kojem grafičkom uređivaču, posljednja vrijednost postavlja prozirnost i odgovara vrijednosti svojstva neprozirnosti.

Ne podržavaju svi preglednici ovaj format: Internet Explorer od verzije 9, Opera od verzije 10, Firefox od 3, Safari od 3.2. Ali općenito, moderni preglednici ispravno prikazuju transparentnost. Za starije verzije IE-a možete posebno odrediti boju u uobičajenom formatu, dok, naravno, neće biti prozirnosti. Ili ponovno upotrijebite svojstvo filtera, ali tada se morate pomiriti s činjenicom da će transparentnost također utjecati na tekst (primjer 3). Za provedbu važećeg CSS koda koristio sam uvjetne komentare.

Primjer 3: Korištenje RGBA

HTML5 CSS3 IE Cr Op Sa Fx

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

Riža. 6. Poluprozirna pozadina s neprozirnim tekstom

Usporedite sliku s prethodnom, slova su postala svjetlija i jasnija.

U Internet Exploreru 7 otkrivena je pogreška pri kombiniranju boje pozadine s različitim vrijednostima. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano u nastavku, pozadina u IE7 uopće neće biti prikazana.

Div (boja pozadine: crvena; /* Nije primjenjivo u IE7 */ boja pozadine: rgba(255, 0, 0, 0.5); )

Ovo se rješava zamjenom svojstva background-color s background.

Div ( background: red; /* I ovo radi */ background: rgba(255, 0, 0, 0.5); ) Međutim, postoji jedno upozorenje. Validator CSS-a "psuje" pozadinu kada mu je dana RGBA vrijednost. Ali u isto vrijeme, ispravno se odnosi na boju pozadine. Općenito, kao i uvijek, morate birati između preglednika i valjanosti.

Kako postaviti transparentnu boju u css? Trenutno postoje 3 načina za to.

Metoda 1 - transparentna vrijednost

Ako postavite boju teksta ili pozadine na prozirnu, boja će biti potpuno prozirna, tj. nevidljiva. Primjer:

boja: prozirna;

Takav tekst neće biti vidljiv na stranici.

Metoda 2 - način boje rgba

A ovo je već inovacija css3. Ranije nije postojao takav način rada u web razvoju, postojao je samo rgb. Sigurno znate kako pisati boju u ovom formatu. Da biste to učinili, trebate navesti tri vrijednosti u zagradama od 0 do 255, označavajući zasićenost jedne od tri osnovne boje (crvena, zelena, plava). Na primjer:

Pozadina: rgb(230, 121, 156);

Format rgba se ne razlikuje, dodaje se samo četvrta vrijednost - stupanj prozirnosti elementa od 0 do 1. Općenito, ovaj format notacije uglavnom se koristi za postavljanje poluprozirne boje, a ne potpuno prozirne. 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.

Prozirna boja može se postaviti ako je četvrti parametar postavljen na vrijednost od 0,01 do 0,99. O je već napisao nešto o postavljanju prozirnosti za pozadinu u , možete to pročitati ako vas zanima.

Metoda 3 - neprozirnost

Još jedno svojstvo iz css3 tehnologije. Ali želim vas odmah upozoriti da radi malo drugačije. Uz neprozirnost, prozirnost je postavljena na cijeli blok na koji se primjenjuje. Stoga se pogoršava čitljivost teksta i percepcija slika. Dakle, vidim smisao korištenja svojstva samo za blokove u kojima nema teksta i nekih drugih informacija. Vrijednosti se mogu postaviti od 0 do 1, kao u slučaju četvrtog parametra kada se navodi boja u rgba formatu.

Općenito, trenutno su to svi načini za koje znam postavljanje prozirne boje u css-u. Zašto je to potrebno, drugo je pitanje. Kroz prozirnu pozadinu može se vidjeti što je ispod. Ponekad to treba tako napraviti prema dizajnu. Općenito, tehnika s translucencijom danas je vrlo česta.

Prozirna pozadina (pozadina)

Kao što možda znate, pozadina je svojstvo CSS-a koje vam omogućuje postavljanje boje pozadine ili učitavanje slike koja će služiti kao pozadina.

Postavite transparentnost za CSS pozadinu

Dakle, sve se to radi vrlo jednostavno zahvaljujući takvom formatu snimanja u boji kao što je rgba. Ako radite s grafičkim urednicima, onda vjerojatno znate da se rgb način boja dekodira na sljedeći način: udio crvene (crvene), udio zelene (zelene) i plave (plave). Dakle, rgba je gotovo ista, samo je dodan još jedan parametar - transparentnost. Napisano je ovako:

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

Prvo, eksplicitno označavamo da boju postavljamo u rgba modu. Zatim označavamo 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 vrijednost zapisana od 0 do jedan. 1 je potpuno neproziran element, a 0 je potpuno proziran element. Sukladno tome, ako je 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, morate koristiti rgba način rada u boji. Postoji i svojstvo neprozirnosti, ali ono se odnosi na cijeli element kao cjelinu. Odnosno, kada se primjenjuje neprozirnost, prozirnost se također može primijeniti na tekst, što će ga učiniti nečitljivim.

Primjer prozirne pozadine

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

A sada postavimo istu crnu boju za blok, ali je odredimo pomoću rgba formata boja, navodeći posljednju vrijednost kao 0,7, na primjer. Ispast će ovako:

Sada je pozadina bloka prozirna i kroz nju se vidi pozadinska slika. Ova slika i pozadina služe samo za ilustraciju. Kao što razumijete, prozirnost pozadine u css-u može biti korisna kada vam je potrebna pozadina ugniježđenog elementa da se vidi bez zaklanjanja drugih pozadina smještenih u drugim slojevima.

Samu boju nije teško postaviti pomoću 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). Postavljanjem različitih vrijednosti možete dobiti milijune različitih boja, a prozirnost će vam omogućiti da, ako je potrebno, smislite puno lijepih efekata za web mjesto.

Želite li naučiti kako izraditi stranice s originalnim i upečatljivim modernim dizajnom? Korištenje 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 postaviti transparentnost?

Promatramo li ovu temu kroz prizmu povijesnog razvoja web tehnologija, možemo razlikovati sljedeće pristupe:

• Vlasništvo neprozirnost.
• Korištenje PNG-Slike
• Format sustava RGBA
• Pa, i na kraju, antičke ili kockaste slike.

CSS Opacity svojstvo

Primjena stila css Svojstva neprozirnost omogućuje postavljanje prozirnosti elementa na koji se primjenjuje. Vrijednosti koje se mogu koristiti kao argument kreću se od 0 do 1.
Razmotrite 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 " >Bit će puno vašeg teksta

/* Pozadina za tijelo stranice */) . prozirno (ispod: 10px; /*Uvlake za tekst*/ pozadina: tamnotirkizna; /* Postavi boju pozadine */ margina: 0 auto; /* Centrirajte blok */širina: 50%; /* Postavite širinu bloka */ neprozirnost: 0,7 /* Postavi transparentnost */ font: 48px/ 64px Times New Roman; poravnanje teksta: poravnanje; )

Kao rezultat, dobili smo proziran blok:

Važno!!!

1. Neprozirnost uzima vrijednosti iz raspona: 0 (puna prozirnost) - 1 (neprozirnost).
2. Cross browser. NA tj do uključivo sedme verzije Neprozirnost Nije podržano. Za postizanje istog prikaza elementa pomoći će sljedeći redak:

   filtar: alfa(Neprozirnost= 70 ) ;

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

   • s apsolutnim pozicioniranjem ( pozicija: apsolutna)
   • s fiksnom linearnom veličinom ( visine ili širine).
3. Stupanj transparentnosti nasljeđuju podređeni elementi, pri čemu podređeni element može povećati transparentnost, ali ne manje. Odnosno, na prozirnoj pozadini se ne može napraviti NEPROZIRAN tekst.

Radi boljeg razumijevanja materijala posljednjeg paragrafa, u prethodnom primjeru boju teksta postavite na bijelu

boja: bijela;

i pregledajte ga pod mikroskopom:

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

Korištenje PNG slike

Zanimljiva značajka formata PNG je da ima 256 razina transparentnosti. Mislim da ste uhvatili tok misli i zasigurno ste već izgradili algoritam za ovaj pristup. Samo to moram izraziti.

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

Važno!!!

1. Za razliku od imovine neprozirnost prozirnost je postavljena samo za pozadinu
2. Cross browser. Radi u gotovo svim preglednicima, što je plus. Ali transparentnost PNG nije podržano u IE6. Ako optimizirate svoje web mjesto za takvu starinu, morat ćete koristiti druge metode ili skripte.
3. Kada isključite prikaz slika, vaša pozadina će nestati (imajte to na umu kada optimizirate prikaz na mobilnim uređajima, jer neograničeni internet nije uvijek pri ruci).
4. Za promjenu boje i/ili stupnja prozirnosti morate izraditi novu sliku i ponovno je učitati na poslužitelj.

Format sustava RGBA

Jedna od najmodernijih metoda promjene prozirnosti pozadine je korištenje sustava RGBA.

RGBA– sustav predstavljanja boja koji koristi tri standardna kanala RGB(crvena, zelena, plava), i četvrta, tzv Alfa-kanal koji karakterizira stupanj prozirnosti.

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

U nama već poznatom primjeru zamijenit ćemo sadržaj u css datoteku na sljedeće:

tijelo ( pozadina: url(./ vaden- pro - logo. png) ); /* Pozadinska slika */) . prozrachen ( padding: 10px; background: rgba(0 , 206 , 209 , 0.7 ) ; margin: 0 auto; width: 50%; font: 48px/ 64px Times New Roman; color: white; text-align: justify; )

Važno!!!

1. Za razliku od imovine neprozirnost prozirnost je postavljena samo na pozadinu
2. Za razliku od metode PNG slike, da bismo promijenili boju ili stupanj prozirnosti, samo trebamo promijeniti vrijednosti rgba.
3. Cross browser. Radi u svim modernim preglednicima (počevši od IE9, Op10, Fx3,Sf3.2). Za starije preglednike morat ćete ili žrtvovati transparentnost ili primijeniti neprozirnost, png metode.

Karirane slike, ili s poštovanjem prema povijesti

Ova metoda je bila na početku web dizajna, i vidjela je stare, stare preglednike koji zapravo nisu znali kako. Sastoji se od stvaranja kockaste pozadine u kojoj se obojeni kvadrati izmjenjuju s prozirnim.

Kao rezultat primjene takve slike kao pozadine, dobivena je pseudoprozirna pozadina.

Važno!!!

1. Kada gledate tekst na takvoj pozadini, oči se mogu brzo umoriti (osobito mreškanje prilikom listanja).
2. Inače, značajke aplikacije slične su metodi "PNG-slike".

Sažeti?

• Ispod prozirnog bloka trebala bi biti svijetla, a ne monotona slika. Na običnoj pozadini gubi se vrhunac prozirnosti.
• Prilikom odabira konkretnog praktičnog pristupa vodite se preglednicima koje vaša ciljana publika koristi. Kompatibilnost s različitim preglednicima je važna.

Razred 1 Razred 2 Razred 3 Razred 4 Razred 5

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

Stvaranje prozirne pozadine u HTML-u i CSS-u (neprozirnost i RGBA efekti)

efekt prozirnosti Element je jasno vidljiv na pozadinskoj slici i postao je raširen u različitim operativnim sustavima jer izgleda elegantno i lijepo. Glavna stvar je da ispod prozirnih blokova nema monokromatskog uzorka, već slike, u ovom slučaju prozirnost postaje vidljiva.

Taj se učinak postiže na razne načine, uključujući staromodne tehnike kao što je korištenje PNG slike kao pozadine, stvaranje kockaste slike i korištenje 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 značajka ovog svojstva je da vrijednost prozirnosti utječe na sve podređene elemente unutar, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni. Razinu prozirnosti možete povećati promjenom naredbe neprozirnosti s 0,1 na 1.

HTML 5 CSS 3 IE 9

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

Obično bi u dizajnu samo pozadina elementa trebala biti prozirna, a tekst bi trebao biti neproziran kako bi ostao čitljiv. Svojstvo neprozirnosti ne odgovara ovdje jer će tekst unutar elementa također biti djelomično proziran. Najbolje je koristiti RGBA format, čiji je dio i alfa kanal, odnosno vrijednost prozirnosti. Vrijednost je napisana rgba, zatim su vrijednosti crvene, plave i zelene komponente boje navedene u zagradama odvojenim zarezima. Posljednja dolazi transparentnost, koja je postavljena od 0 do 1, pri čemu je 0 potpuno prozirno, a 1 neprozirno, sintaksa za primjenu rgba.

Poluprozirna pozadina HTML 5 CSS 3 IE 9

Vrijednost neprozirnosti pozadine postavljena je na 90% - prozirna pozadina i neproziran tekst.

Transparentnost u CSS-u prilično je moderna tehnika u posljednje vrijeme, što uzrokuje poteškoće u implementaciji na više preglednika. Do sada ne postoji univerzalna metoda koja bi omogućila implementaciju transparentnosti za sve preglednike. Međutim, situacija se znatno popravila posljednjih godina.

Ovaj članak opisuje postojeće pristupe i pruža primjere koda i objašnjenja koja će vam pomoći da postignete isti rezultat u svim preglednicima uz minimalan napor.

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

stari pristup

U starijim verzijama Firefoxa i Safarija morate primijeniti svojstvo ovako:

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

Svojstvo -khtml-opacity korišteno je u starijim verzijama webkit preglednika. 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 vjerojatno.

Sljedeći redak koristi svojstvo -moz-opacity, koje je radilo na vrlo ranim verzijama Mozilla motora. Firefox ga je prestao podržavati u verziji 0.9.

CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi

Za većinu modernih preglednika dovoljno je koristiti sljedeće svojstvo:

#myElement ( neprozirnost: .7; )

U gornjem primjeru, element je postavljen na 70% neprozirnosti (30% prozirnosti). To jest, ako vrijednost postavimo na jedan, tada će element biti neproziran i, prema 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 je to jedva vidljivo.

CSS transparentnost za Internet Explorer

Kao i obično, Internet Explorer nije prijateljski raspoložen prema drugim preglednicima. Osim toga, sada imamo tri verzije ovog preglednika u prilično širokoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatne napore da se dobije pozitivan rezultat.

#myElement (filtar: alpha(opacity=40); )

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

Drugi način postavljanja transparentnosti pomoću CSS-a u IE8 je korištenje sljedećeg pristupa (obratite pozornost na komentare):

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

Prvi redak će raditi u svim trenutno korištenim verzijama, drugi - samo u IE8. Imajte na umu da drugi redak koristi prefiks -ms-, a vrijednost je unutar navodnika.

Postavljanje i mijenjanje transparentnosti CSS-a s JavaScriptom ili jQueryjem

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

Document.getElementById("myElement").style.opacity = ".4"; // za većinu preglednika document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // za IE

Naravno, u ovom slučaju mnogo je lakše koristiti jQuery, a također će raditi u svim preglednicima:

$("#myElement").css(( neprozirnost: .4 )); // radi u svim preglednicima

Možete animirati ovo svojstvo:

$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animacija dovršena; ovaj kod radi u svim preglednicima. ));

RGBA funkcija

CSS3 planira podržati alfa kanal s rgba funkcijom. Ova značajka radi u Firefoxu 3+, Operi 10.1+, Chromeu 2+, Safariju 3.1+. Koristi se ovako:

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

U ovom slučaju posljednji parametar označava razinu neprozirnosti.

HSLA funkcija

Kao i prethodna funkcija, CSS3 također omogućuje postavljanje prozirne boje pomoću HSLA funkcije, čiji parametri znače nijansu (Hue), zasićenost (Saturation), svjetlinu (Lightness) i alfa kanal (Alpha).

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

Važna točka pri korištenju funkcija rgba i hsla jest da se postavka transparentnosti ne odnosi na podređene elemente, dok se korištenje svojstva neprozirnosti nasljeđuje.