Színek használata CSS segítségével (CSS colors)
A CSS használatával lehetőségünk van különböző elemek beszínezésére. A paletta közel végtelen. A színezési lehetőségek sora sem rövidebb. Ha bármit is szeretnénk beszínezni, először el kell döntenünk, hogy a színek nevét milyen módon szeretnénk megadni. Több módszer is a lehetőségünkre áll:
Ezekről a módszerekről itt olvashatsz bővebben. De azért érintőlegesen ebben a cikkben is szó lesz az összes módszerről.
Színmegadási módszerek
Pár mondatban nézzük át a fontosabb színmegadási módszereket. A színek hexadecimális, RGB és HSL megadásában ez a színkód generátorunk segít.
Szín megadás névvel
Ebben az esetben elég a színre az angol nevével hivatkozni.
Például: red, green, blue.
Szín megadás RGB kóddal
Ebben az esetben egy RGB kódot kell megadnunk.
Az RGB szó a Red, Green, Blue színekre utal. Ezek keverékéből áll össze egy szín.
Például egy teljesen piros színt így lehet RGB kóddal leírni: RGB(255,0,0), a fekete így néz ki: RGB(0,0,0).
>> HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső) <<
Szín megadás RGBA kóddal
Ez a megoldás szinte egy az egyben az előző, csak itt kiegészül egy A betűvel, ami az Alpha szóra utal.
Az Alpha értékének 0.0 és 1.0 között kell lennie és ez határozza meg, hogy mennyire lesz átlátszó a szín. A 0 jelenti a teljesen átlátszót, míg az 1 a semennyire átlátszót.
Így néz ki egy RGBA kód: RGBA(255,255,0,0.3)
Szín megadás HEX kóddal
Ilyenkor a színt egy hexadecimális kóddal adjuk meg. A hexadecimális kód hat darab számjegyből áll.
Ahol az első két szám a pirosra, a második kettő a zöldre, az utolsó kettő pedig a kékre utal. A felvehető értékek 00-tól 99-ig terjednek, majd aa-tól ff-ig.
Így fest a piros szín: #FF0000, így a fekete: #000000.
>> HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső) <<
Szín megadás HSL kóddal
A HSL kifejezés az angol “Hue”, “Saturation” és “Lightness” szóból ered. Mely magyarul színárnyalatot, telítettséget és fényességet jelent. Ezzel a három tulajdonsággal egy konkrét színt vagyunk képesek meghatározni.
A “Hue” értékhez egy 0 és 360 közötti számot kell megadnunk. Ahol a 0 a piros, a 120 a zöld és a 240 a kék. A “Saturation”-hoz egy 0% és 100% közötti értéket kell megadnunk, ahol a 0% a szürke árnyalatát jelenti és a 100% pedig a teljes színt. A “Lightness”-hez szintúgy egy 0% és 100% közötti értéket kell megadni, ahol a 0% a fekete és a 100% a fehér.
Például a pirost így határozhatjuk meg: HSL(0,100%,50%), a feketét így: HSL(0,0%,0%).
>> HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső) <<
Szín megadás HSLA kóddal
Ahogy az RGBA esetében, itt is egy Alpha csatornával egészül ki az előző kód.
Ugyanúgy ahogy ott, itt az átlátszóságot fogja meghatározni az Alpha értéke. Most is egy 0.0 és egy 1.0 közötti értéket vehet fel, ahol a 0.0 a teljesen átlátszó, míg az 1.0 egyáltalán nem átlátszó.
A nem átlátszó piros így néz ki: HSLA(0,100%,50%,1), az egy kicsit átlátszó sárga így fest: HSLA(60,29%,99%,0.3).
Mit kezdhetünk a színekkel?
Mint említettem a felhasználási területnek csak a képzelet tud határt szabni, de azért most adunk pár ötletet. Ezek az ötletek a leggyakrabban felhasznált megoldások.
- beállíthatjuk, hogy milyen színű legyen egy szöveg
- beállíthatunk háttérszínt a weboldalnak
- bekeretezett dolgok keretének a színét is módosíthatjuk
Szövegszín beállítása CSS segítségével
Már a neve is nagyon árulkodó, szóval könnyen kitalálható, hogy ennek segítségével a weboldalon előforduló szövegek színét tudjuk módosítani. Beállíthatjuk egy p-nek, egy h1-nek vagy bármilyen szövegtípusú elemnek a színét.
Példa
CSS kód
p {
color: red;
}
h1 {
color: pink;
}
Code language: CSS (css)>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Háttérszín beállítása CSS segítségével
Nem csak a szöveget, de még a hátteret is beszínezhetjük kedvünkre. Ezt is használhatjuk szinte bármin: szövegeken, például egy p-n, egy div-en, vagy akár a <body>-n is.
Példa
CSS kód
p {
background-color: red;
}
h1 {
background-color: pink;
}
Code language: CSS (css)>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Keretszín beállítása CSS segítségével
Volt már róla szó, hogy bekeretezhetjük a szövegeket, vagy táblázatokat is. A keretezésre a border utasítás szolgál, mely után meg adjuk a keret, szegély vastagságát, a vonal típusát, majd színét.
Példa
CSS kód
p {
border: 2px solid red;
}
h1 {
border: 1px solid red
}
Code language: CSS (css)>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
