RGBA színmód - félátlátszó színek

Egy új CSS kóddal akárhol ahol színeket adunk meg beállíthatjuk a szín átlátszóságát is. Ezzel háttérkép használata nélkül lehet félig átlátszó háttérszínt tenni a dobozokra.

A CSS kódokban eddig a színeket alapvetően 2 féle képpen tudtuk megadni, HEX és RGB kódokkal, ezek így néznek ki: HEX:  #FF0000 RGB:  rgb(255,0,0) Az RGBA használatával a színhez hozzáadhatjuk azt is hogy mennyire legyen átlátszó, ez hasonlóan működik az opacity, tulajdonsághoz, viszont az RGBA-val egy elemre külön be tudjuk állítani hogy mennyire legyen átlátszó a szövegszín, a háttérszín, a keretszín, vagy akármi más. Az opacity viszont az egész elem átlátszóságát ugyanúgy változtatta. Példa: rgba(255,0,0,0.5) Piros rész: ez a színkód, ugyanúgy működik mint az rgb-nél, az első számjegy a pirosat, a második a zöldet, a harmadik pedig a kéket adja meg, így lehet kikeverni 16 millió színt a red-green-blue arányok megadásával. Példák: fekete: 0,0,0 fehér:255,255,255 piros:255,0,0 narancssárga: 255,128,0 sárga:255,255,0 zöld:0,255,0 kék:0,0,255 rózsaszín:255,0,128 lila:170,0,200 Zöld rész: az átlátszóság, ugyanúgy kell alkalmazni mint az opacity esetében, 0 és 1 között kell megadni egy számot tizedes tört alakban, a 0 teljes átlátszóság (az elem eltűnik), 1-nél egyáltalán nem látszik át, tehát nem látni rajta változást. 0.3-nál pl erősen átlátszik, 0.8-nál pedig csak gyengén. fekete szín 1-es átlátszósággal, kódja: color: rgba(0,0,0,1); fekete szín 0.5-es átlátszósággal, kódja: color: rgba(0,0,0,0.5); fekete szín 0.3-es átlátszósággal, kódja: color: rgba(0,0,0,0.3); naracssárga szín 1-es átlátszósággal, kódja: color: rgba(255,128,0,1); naracssárga szín 0.5-es átlátszósággal, kódja: color: rgba(255,128,0,0.5); naracssárga szín 0.3-es átlátszósággal, kódja: color: rgba(255,128,0,0.3); kék szín 1-es átlátszósággal, kódja: color: rgba(0,0,255,1); kék szín 0.5-es átlátszósággal, kódja: color: rgba(0,0,255,0.5); kék szín 0.3-es átlátszósággal, kódja: color: rgba(0,0,255,0.3); Idáig ez ugyanolyan kinézetre mintha opacity-vel lenne, amire igazán érdemes használni az a háttér vagy keretszínek megadása, a keret megadásánál nem csak a megszokott border-t használhatjuk, hanem az outline-t is, ez szinte ugyanolyan mint a border, és azon kívül van, tehát olyan mintha dupla keret lenne csak: egyszerű doboz, semmi sem átlátszó csak a háttér átlátszó (0.5), kódja: background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,1); border: 5px solid rgba(0,0,0,1); csak a háttér átlátszó (0.2), kódja: background-color: rgba(255,255,255,0.2); color: rgba(0,0,0,1); border: 5px solid rgba(0,0,0,1); csak a szöveg átlátszó, kódja: background-color: rgba(255,255,255,1); color: rgba(0,0,0,0.5); border: 5px solid rgba(0,0,0,1); a háttér és a keret átlátszó, kódja: background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,1); border: 5px solid rgba(0,0,0,0.5); csak a körvonal átlátszó, kódja: background-color: rgba(255,255,255,1); color: rgba(0,0,0,1); border: 2px solid rgba(0,0,0,1); outline: 15px solid rgba(0,0,0,0.5); a körvonal és a háttér átlátszó, kódja: background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,1); border: 3px solid rgba(0,0,0,1); outline: 14px solid rgba(0,0,0,0.5); Ezekeben a kódokban 4 féle helyen állíthatod be a különböző színezést: background-color: háttérszín color: szövegszín border: keretszín outline: körvonal színe (ami a kereten kívül van) Ezt az rgba színmódot akárhol használhatod, akármilyen kódban ahol színkódot kell megadni, hex kódot (#FF0000) is lecserélhetsz rgba-ra, de vigyázz hogy a kettőskereszt # ne maradjon ott. Ha egy színkódnál nem állítasz be átlátszóságot, tehát az utolsó számnak 1-et írsz akkor, a helyett nyugottan írhatsz megszokott HEx (#FF0000) kódot is, az eredmény ugyanaz.