Vlad Merzhevich

Učinak prozirnosti elementa jasno je vidljiv na pozadini i postao je široko rasprostranjen u različitim operativnim sistemima jer izgleda elegantno i lijepo. U web dizajnu se prozirnost također primjenjuje i postiže pomoću svojstva neprozirnosti ili RGBA formata boje koji je postavljen za pozadinu.

Blok nagiba

Napravite blok prikazan na sl. 1. Blok sadrži poluprozirni gradijentni okvir sa pozadinom gradijenta ispod naslova i malim pokazivačem. Pozadina na stranici prikazana je samo radi jasnoće efekta prozirnosti, možete navesti bilo koju svoju sliku. Minimalna visina bloka je 100 piksela.

Kako da napravim sloj poluproziran?

Da biste promijenili neprozirnost elementa, upotrijebite svojstvo stila neprozirnosti s vrijednošću od 0 do 1, gdje 0 odgovara potpunoj transparentnosti, a 1, naprotiv, neprozirnosti objekta. Ovo svojstvo ne radi u Internet Exploreru, pa morate koristiti filter posebno za njega, svojstvo koje nije dio CSS specifikacije. Primjer 1 pokazuje kako postaviti transparentnost sloja za sve preglednike.

Prozirna pozadina

Vlad Merzhevich

Djelomična transparentnost, ako 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 transparentnost postaje vidljiva. Taj se učinak postiže na različite načine, a ako se sjetite svega, uključujući i staromodne metode, tada koristite PNG sliku kao pozadinu, stvarajući kariranu sliku i svojstvo neprozirnosti. No, čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodnu stranu. Napravit ću kratak pregled kako bi bilo jasno o čemu je riječ, kao i za one čitatelje koji nisu upoznati s nekonvencionalnim opcijama za stvaranje efekta prozirnosti.

Kako mogu postaviti stol da bude poluproziran, ali neke ćelije nisu?

Da bi se promijenila transparentnost elementa u CSS3, osigurano je svojstvo neprozirnosti, njegova vrijednost može varirati od 0 do 1. Nula odgovara potpunoj transparentnosti elementa, a jedna, naprotiv, neprozirnosti. Moderni preglednici rade sasvim ispravno s ovim svojstvom, s izuzetkom Internet Explorera, pa za to morate koristiti posebno svojstvo filtra s alfa vrijednošću (Opacity = X), gdje X može varirati od 0 do 100.

U ovoj lekciji ćemo analizirati takve CSS nekretnine - neprozirnost i RGBA... Property Opacity odgovoran je samo za transparentnost elemenata i funkcije RGBA- za boju i prozirnost, ako navedete vrijednost prozirnosti alfa kanala.

CSS Opacity

Numerička vrijednost za neprozirnost specificirano u rasponu od 0,0 do 1,0, gdje je nula potpuna transparentnost, a jedan, naprotiv, apsolutna neprozirnost. Na primjer, da biste vidjeli transparentnost od 50%, morate postaviti vrijednost na 0,5. Mora se imati na umu da neprozirnost proteže se na svu djecu roditelja. To znači da će i tekst na prozirnoj pozadini biti proziran. A ovo je već vrlo značajan nedostatak, tekst se ne ističe tako dobro.

Na snimku ekrana jasno možete vidjeti da je crni tekst postao isto proziran kao i plava pozadina.

Div (
pozadina: url (images / yourimage.jpg); / * Pozadinska slika * /
širina: 750px;
visina: 100px;
margina: auto;
}
.blue (
pozadina: # 027av4; / * Poluprozirna boja pozadine * /
neprozirnost: 0,3; / * Vrijednost prozirnosti u pozadini * /
visina: 70px;
}
h1 (
padding: 6px;
porodica fontova: Arial Black;
font-weight: bold;
font-veličina: 50px;
}

CSS transparentnost u RGBA formatu

Format za snimanje u boji RGBA, modernija je alternativa vlasništvu neprozirnost. R (crveno), G (zeleno), B (plavo)- znači: crvena, zelena, plava. Poslednje pismo A- znači alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Opacity ne utiče na djecu.

Pogledajmo sada naš primjer korištenja RGBA... Zamijenimo ove redove u stilovima.

Pozadina: ## 027av4; /* Boja pozadine */
neprozirnost: 0,3; / * vrijednost prozirnosti u pozadini * /

do sljedećeg reda

Pozadina: rgba (2, 127, 212, 0.3);

Kao što vidite, vrijednost transparentnosti 0,3 je ista za obje metode.

Rezultat primjera sa RGBA:

Drugi snimak ekrana izgleda mnogo bolje od prvog.

Igrajući se s prozirnošću pozadine blokova, možete postići zanimljive efekte na web mjestu. Važno je da ti prozirni blokovi prelaze raznoliki dizajn, poput fotografije. Samo u ovom slučaju učinak će biti primjetan. Ova tehnika se dugo koristila u dizajnu, čak i prije pojave bilo koje CSS3, implementirano je isključivo u grafičke programe.

Ako kupac zahtijeva da izgled izgleda dobro u starijim verzijama preglednika Internet Explorer zatim dodajte svojstvo filter i ne zaboravite komentirati kako se ne bi utjecalo na valjanost koda.

Zaključak

Format RGBA podržavaju svi moderni preglednici osim Internet Explorer... Takođe je veoma važno da RGBA fleksibilan, djeluje samo na određeni određeni element, bez utjecaja na djecu. Jasno je da je to prikladnije za dizajnera izgleda. Moj izbor očigledno ide u prilog formatu RGBA primiti transparentnost u CSS -u.

Za bolje učvršćivanje materijala i veću jasnoću, predlažem da prođete kroz to.

Opacity CSS svojstvo je odgovorno za transparentnost elemenata (slike, tekst, blokovi) u html -u.

Sintaksa neprozirnosti CSS -a

Gdje vrijednost može poprimiti stvarne vrijednosti u rasponu od 0,0 do 1,0. Vrijednost 1,0 znači da nema transparentnosti (zadano).

Primjer # 1. Transparentna slika u html -u

Prva slika se prikazuje bez transparentnosti, druga sa 0,5 prozirnosti

Prozirnost elemenata

Postavljanje slike poluprozirnom pri lebdenju!

DemoDownload izvor

Hvala vam na pažnji!

Sledeći članak
Kako stvoriti pomični div blok?

Napravite transparentnu pozadinu u HTML -u i CSS -u (zatamnjenje i RGBA efekti)

Efekt prozirnosti element je jasno vidljiv na pozadini i postao je rasprostranjen u različitim operativnim sistemima jer izgleda elegantno i lijepo. Glavna stvar nije imati monokromatski uzorak ispod prozirnih blokova, već sliku, u ovom slučaju transparentnost postaje vidljiva.

Ovaj se učinak postiže na različite načine, uključujući staromodne tehnike, poput korištenja PNG slike kao pozadine, stvaranja karirane slike i svojstva neprozirnosti. No, čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodne nedostatke.

Razmislite o prozirnosti teksta i pozadine - kako ga pravilno 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 neprozirnosti sa 0,1 na 1.

HTML 5 CSS 3 IE 9

Izrada i promocija web stranica na Internetu

U web dizajnu primjenjuje se i djelomična transparentnost koja se postiže putem RGBA formata boje, 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 se održala č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 je zapisana rgba, zatim su vrijednosti komponenti crvene, plave i zelene boje navedene u zagradama odvojene zarezima. Posljednja je transparentnost, koja je postavljena od 0 do 1, pri čemu je 0 potpuna transparentnost, a 1 neprozirna boja za sintaksu rgba.

Prozirna pozadina HTML 5 CSS 3 IE 9

Izrada i promocija web stranica na Internetu.

Opacity Background je postavljen na 90% - Poluprozirna pozadina i neproziran tekst.

CSS 3 svojstvo neprozirnost omogućuje vam da jedan ili drugi element web stranice učinite transparentnim.

Transparentnost elementa određena je vrijednošću od 0 prije 1 gdje 0 - potpuno transparentno a 1 - uopće neprozirno .. Tako, na primjer, vrijednost 0.5 svojstva neprozirnost primijenjeno na sliku znači da bi ta slika trebala biti prozirna.

Transparentnost u IE

Preglednik Internet Explorer ne podržava svojstva neprozirnost do devete verzije, međutim, ima svoj filter s kojim možete postaviti stupanj transparentnosti:

filter: alfa (neprozirnost = 50)

Značenje neprozirnost za Internet Explorer filter preglednika može varirati od 0 - potpuno transparentno za 100 - neproziran

Blokovi ovog menija bit će poluprozirni i pri lebdenju u IE-u !!

glavni
karta lokacije
Kupi slona
Prodajte slona
Unajmite slona

Prefiksi.

Time bi se u načelu moglo završiti poglavlje o transparentnosti, ali htio bih vam reći više o tzv prefiksi dobavljača.. ovi drugovi nemaju poseban odnos prema ovom poglavlju, međutim, dalje u toku učenja CSS3, sve češće će nailaziti na njih i negdje morate o njima govoriti - pa ću vam ovdje reći.

Dakle, prefiksi dobavljača su posebni prefiksi svojstava CSS -a koje pretraživači koriste za eksperimentalna svojstva koja službeno nisu dio CSS specifikacije.

Sjećamo se da se specifikacija CSS 3 još uvijek razvija i formalno svojstva opisana u ovom vodiču ne postoje u prirodi, ali ih preglednici već aktivno koriste na vlastitu odgovornost i rizik.

Zašto na vlastitu odgovornost i rizik? Da, jer postoji mogućnost da se, kada je specifikacija CSS 3 službeno odobrena, svojstva opisana u njoj po svom djelovanju razlikuju od svojstava s istim imenom koje već koriste preglednici. Pa, evo brenda, recimo da programeri specifikacije CSS 3 označe svojstvo neprozirnost ne kao stupanj transparentnosti bloka, već na primjer kao njegovo zasjenjivanje ili treperenje (naravno pišem besmislice), koje će tada prikazati milioni instaliranih preglednika za koje neprozirnost je li to transparentnost!?

Ili recimo da su programeri preglednika došli do svoje vlastite imovine - inovacije koju nitko i nigdje nema, ali dokument s takvim svojstvom ne prolazi provjeru valjanosti jer takvo svojstvo ne postoji u specifikaciji.

Iz ovih i drugih razloga, preglednici koriste prefikse na početku svojstava koja nisu dio službene specifikacije. Svaki preglednik ima svoj prefiks koji počinje znakom "-", ovaj znak na početku svojstva, kao i ovaj znak "_", prema specifikaciji CSS 2.1, znači da je svojstvo rezervirano za CSS ekstenzije određenih pretraživači.

Evo najpopularnijih preglednika i njihovih prefiksa:

Pretraživač	Prefiks
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 i noviji	-gospođa-
Safari do verzije 3, Konqueror	-khtml-
Safari 3 i noviji, Google Chrome	-webkit-

Vrlo je jednostavno koristiti prefikse, dovoljno je uzeti neko CSS svojstvo i zamijeniti ga potrebnim prefiksom, na primjer, u svojstvo neprozirnost zamjena -moz- ispada: -moz-neprozirnost

Iako je moj izraz zapravo „ koristite prefikse„Nije u redu! u stvari, nigdje ništa nije zamijenjeno, samo vlasništvo neprozirnost, je li tu -moz-neprozirnost a to su dvije različite nekretnine koje ne moraju raditi istu stvar !! - ovo treba shvatiti ..

Također treba shvatiti da određeni preglednici do određenih verzija mogu podržavati CSS svojstva samo s vlastitim prefiksima (opet, pogrešno izražavam svoja svojstva - CSS proširenja preglednika), ili se u početku mogu osloniti na čak razvijene specifikacije. - U ovom udžbeniku ćemo razmotriti svaki poseban slučaj.

Što se tiče ovog poglavlja o transparentnosti, valja napomenuti da Firefox 3.5 i starije verzije koriste svoje vlasništvo -moz-neprozirnost, a preglednik Safari prije verzije 1.1 koristi svoje svojstvo -khtml-neprozirnost .

Dakle, kako bismo naš primjer učinili potpuno preglednim, moramo dodati još nekoliko redaka kodu:

Kao što vidite, prefiksi značajno rastežu kôd i njihova upotreba nije uvijek opravdana ako su verzije preglednika koji žele raditi s određenim svojstvima samo koristeći svoje prefikse dovoljno stare, kao što je slučaj sa svojstvom neprozirnost, onda ih ne možete navesti .. - iako je to naravno loš savjet ..

E pa sad nekoliko korisnih savjeta ..

Uvijek koristite prefikse (osim ako, naravno, određeni preglednik ne može bez njih) u slučajevima kada korištena svojstva mogu uvelike utjecati na performanse, čitljivost i upotrebljivost web stranice. Jedna je stvar kada neke sitnice u dizajnu web stranice neće funkcionirati, a potpuno je drugačije kada, na primjer, meni web stranice ne radi ili je nemoguće pročitati tekst na web stranici zbog činjenice da preglednik ne podržava neka svojstva i umjesto toga koristi vlastito slično.