spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Ernest Sawyer 4.10.2011, článok je súčasťou seriálu CSS triky
Hodnoť článok:
2 0

CSS triky 1: Opacity pozadia divu bez vplyvu na dcérske elementy

Ako spraviť priehľadný element v CSS bez vplyvu na vnorené elementy

Mnohí z grafikov radi využívajú polopriehladné prvky na stránke. Riešení je samozrejme viac, my si predstavíme to najlepšie- riešenie cez CSS.

Rgba definícia

  • IE9+
  • Firefox 3+
  • Google chrome
  • Safari 2+
  • Opera 10+

Rgba definícia je skvelá vec, s ktorou nastavíte opacity pozadia prvku bez toho, aby ste ovplyvnili vnorené/dcérske prvky. Ako to teda vyzerá?

.opacity {
background: rgb(0, 0, 0); /* Prehliadače bez podpory RGBa */
background: rgba(0, 0, 0, 0.8);
}

Ako môžete vidieť v rgba definícii sú prvé tri hodnoty RED GREEN BLUE farby (0,0,0= čierna farba=#000), posledná hodnota je samotný filter, ktorý je v tomto prípade nastavený na 80% opacity.
Problém s rgba je, že ju nepodporuje IE a to ani najnovší.

RGB schémy online

IE filtre

  • IE 5.5+

.opacity {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000); /* Pre IE 5.5 až 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)";/* Pre IE 8 */

Ako môžeme vidieť, IE filter tam má za # 8 znakov. Prvé dva znaky sú definíciou opacity filtra v konvertovaných hex hodnotách. Ostatných 6 znakov je hex definícia farby (biela=ffffff, čierna=000000 atď). Ako si ale vypočítať prvé dva znaky?

Choďte na http://www.calcoolate.com/

Do tejto šikovnej kalkulačky zadajte 0.8*255 a stlačte tlačítko hex. Dostanete výsledok 0xcc. Pre vás sú podstatné posledné dva znaky výslednej hodnoty. Ak by ste chceli zistiť posledné dva znaky pre 70%, musíte do vzorca namiesto 0.8 zadať 0.7, ak by ste chceli 50%, 0.5 atď. Vždy sú pre vás podstatné posledné dva znaky, to sú totiž vo filtri práve tie dva prvé znaky.
}

Všetko dokopy

  • IE 5.5+
  • Firefox 3+
  • Google chrome
  • Safari 2+
  • Opera 10+

Takto teda vyzerá opacity 80% pre farbu #000000 (čierna) fungujúca vo všetkých hore vypísaných prehliadačoch a ich novších verziách:

.opacity {
background: rgb(0, 0, 0); /* Prehliadače bez podpory RGBa */
background: rgba(0, 0, 0, 0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000); /* Pre IE 5.5 až 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)";/* Pre IE 8 */
}

Ako sami vidíte, pri IE ide znova o veľmi temnú mágiu na úrovni Saurona a Voldemorta dokopy. Have a nice day ;)

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)


Hodnoť článok:
2 0

12 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 s7anley 29.10.2011 17:05:11
Ja osobne používam rgba pre moderné prehliadače a pre IE8 a IE7 používam prehľadné png. Jednoduchý kompromis.
0 0 Matúš Koprda 16.10.2011 12:01:38
Pozri na tú CSS triedu .opacity. Tam máš aj background: rgb(0, 0, 0); aj filter. Skús si to v IE a zistíš, že nedostaneš priesvitný, ale úplne čierny element. Na to, aby bol priesvitný potrebuješ mať background: transparent.
0 0 Ernest Sawyer 14.10.2011 23:25:46
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000); /* Pre IE 5.5 až 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)";/* Pre IE 8 */

v tomto nevidím žiaden background a aj popisky sú dosť jasné :)
0 0 Matúš Koprda 14.10.2011 13:13:12
Na to, aby išla priesvitnosť cez gradienty, <b>nemôžeš v IE6-8 nastaviť čiernu farbu cez background</b> a ten riadok s -ms- vôbec netreba. Akurát sa s tým hrám a napadol mi tento článok :)
0 0 Ernest Sawyer 6.10.2011 15:24:36
@zoltán: ja som mal dočinenia aj s klientom ktorému musela tlačiť emaily sekretárka lebo nevedel ani ako spustiť prehliadač =) Všeličo sa pritrafí, ale radšej mám určite klientov ktorí majú aspoň základnú znalosť internetu a toho že IE je zlo =) Už len kvôli bezpečnosti.
0 0 Zoltán Mitlík 6.10.2011 10:18:42
no v prahe google tlaci dost...som tam bol za posledny pol rok dva krat a na kazdom kroku v meste v metre vsade reklama na chrome, to len toto slovensko je nejak pozadu..Jeden moj moj klient ked ide prezerat novu web stranku, tak staru zavre, zavre cele prehliadac a nanovo ho otvori a natuka novu adresu :D :D :D :D

Samozrejme ze IE6 :D
0 0 Zoltán Mitlík 6.10.2011 10:18:39
no v prahe google tlaci dost...som tam bol za posledny pol rok dva krat a na kazdom kroku v meste v metre vsade reklama na chrome, to len toto slovensko je nejak pozadu..Jeden moj moj klient ked ide prezerat novu web stranku, tak staru zavre, zavre cele prehliadac a nanovo ho otvori a natuka novu adresu :D :D :D :D

Samozrejme ze IE6 :D
0 0 Ernest Sawyer 6.10.2011 08:08:10
@zoltán: ja dúfam že google trocha viac zatlačí marketingom na ľudí čo používajú IE aby si nainštalovali chrome. Ale vyzerá to nádejne, IE stále klesá.
0 0 Zoltán Mitlík 6.10.2011 07:42:17
ked je nieco komplikovane tak to ze je to modernejsie riesenie ma neuchlacholi :)...Riesil som to uz 3 krat takto ale 50% priehladnost v IE nebola rovnaka ako 50% v ostatnych normalnych pfehliadacoch :) Tak som sa vratil k png, usetri cas, je to jednoduche a funguje to vsade rovnako :) IE6 uz neoptimalizujem tak problemy s priehladnostou a inymi vecami su fu ...I ked vseobecne by mali IEcka uplne zakazat :) A za pouzivanie tvrde tresty davat :D :D
0 0 Ernest Sawyer 5.10.2011 19:25:06
michal: aj ja som to takto riešil ešte cca pol roka dozadu, že som dával png obrázok. Ale keďže už podpora CSS3 pokročila...treba ísť napred a skúsiť už viac riešiť tie veci cez CSS hodnoty. Ale tým nechcem povedať že png obrázok nie je tiež dobrým riešením (a v podstate aj jednoduchším).
0 0 Michal Chovanec 5.10.2011 18:52:18
jednoducho priehľadný png obrázok do pozadia a funguje to všade aj na IE od 7. verzie
0 0 Ernest Sawyer 5.10.2011 13:09:24
@howlej: lajknuté a stačí spamovať raz =)
Zajtra.sk > Programovanie > CSS/HTML > CSS triky 1: Opacity pozadia divu bez vplyvu na dcérske elementy


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama