11. Színek és háttér

2025. november 23. • 18 perc olvasás • CSS3 alapok

A színek és háttérek kulcsszerepet játszanak a weboldalak vizuális megjelenésében. Ebben a cikkben megismerkedhetsz a különböző színformátumokkal, a háttérszínek és háttérképek beállításával, valamint a modern gradiens hátterekkel.

Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

Ebből a leckéből érettségi anyag:

Színformátumok alapjai (névszínek, HEX, RGB)
color és background-color tulajdonságok
Háttérkép beállítása (background-image)

Bónusz anyag (nem kötelező): HSL színek, gradiensek, opacity részletesen, háttérkép haladó beállítások.

Színformátumok a CSS-ben VEGYES

A CSS többféle módot kínál a színek megadására. Mindegyiknek megvannak az előnyei és a használati területei.

1. Névszínek (Named Colors) EMELT SZINT

A CSS 140+ előre definiált színnevet támogat. Egyszerűek és olvashatóak, de korlátozott a választék.

CSS - Névszínek

/* Alapszínek */
.piros { color: red; }
.kek { color: blue; }
.zold { color: green; }
.sarga { color: yellow; }

/* Semleges színek */
.fekete { color: black; }
.feher { color: white; }
.szurke { color: gray; }

/* Speciális színek */
.narancs { color: orange; }
.rozsaszin { color: pink; }
.lila { color: purple; }
.turkiz { color: turquoise; }
.arany { color: gold; }

/* Árnyalatok */
.sotetszurke { color: darkgray; }
.vilagosszurke { color: lightgray; }
.sotetpiros { color: darkred; }
.vilagoskek { color: lightblue; }

/* Átlátszó */
.atlatszo { color: transparent; }

Élő példa - Névszínek:

Alapszínek:

red blue green yellow

Semleges színek:

black white gray

Speciális színek:

orange pink purple turquoise gold

Árnyalatok:

darkgray lightgray darkred lightblue

Átlátszó:

transparent

2. Hexadecimális (HEX) színek EMELT SZINT

A HEX formátum a leggyakrabban használt módszer. A # jellel kezdődik, és 6 hexadecimális számjegyből áll (vagy 3, ha rövidíthető).

CSS - HEX színek

/* HEX formátum: #RRGGBB */
/* R = vörös (00-FF), G = zöld (00-FF), B = kék (00-FF) */

.szin1 { color: #ff0000; }  /* Tiszta piros */
.szin2 { color: #00ff00; }  /* Tiszta zöld */
.szin3 { color: #0000ff; }  /* Tiszta kék */

.szin4 { color: #ffffff; }  /* Fehér */
.szin5 { color: #000000; }  /* Fekete */
.szin6 { color: #808080; }  /* Szürke (50%) */

/* Gyakori webes színek */
.primary { color: #007bff; }   /* Bootstrap kék */
.success { color: #28a745; }   /* Sikeres zöld */
.danger { color: #dc3545; }    /* Hiba piros */
.warning { color: #ffc107; }   /* Figyelmeztetés sárga */

/* Rövidített HEX (ha minden pár azonos) */
.szin7 { color: #f00; }     /* = #ff0000 (piros) */
.szin8 { color: #0f0; }     /* = #00ff00 (zöld) */
.szin9 { color: #fff; }     /* = #ffffff (fehér) */
.szin10 { color: #333; }    /* = #333333 (sötétszürke) */

/* HEX átlátszósággal (8 számjegy) */
.szin11 { color: #ff000080; }  /* 50% átlátszó piros */
.szin12 { color: #007bff33; }  /* 20% átlátszó kék */

Élő példa - HEX színek:

Tiszta színek (RGB alapszínek):

#ff0000 #00ff00 #0000ff

Semleges színek:

#ffffff #000000 #808080

Gyakori webes színek:

#007bff #28a745 #dc3545 #ffc107

Rövidített HEX:

#f00 #0f0 #fff #333

HEX átlátszósággal (8 számjegy):

#ff000080 #007bff33

HEX értékek magyarázata

00: Az adott színcsatorna minimuma (0%)
FF: Az adott színcsatorna maximuma (100%)
80: Középérték (50%)
#RRGGBBAA: 8 jegyű HEX az átlátszósággal (Alpha)

3. RGB és RGBA színek EMELT SZINT

Az RGB formátum decimális számokkal adja meg a színcsatornákat (0-255). Az RGBA az átlátszóságot is tartalmazza.

CSS - RGB és RGBA

/* RGB formátum: rgb(vörös, zöld, kék) */
/* Értékek: 0-255 */

.szin1 { color: rgb(255, 0, 0); }      /* Piros */
.szin2 { color: rgb(0, 255, 0); }      /* Zöld */
.szin3 { color: rgb(0, 0, 255); }      /* Kék */
.szin4 { color: rgb(255, 255, 255); }  /* Fehér */
.szin5 { color: rgb(0, 0, 0); }        /* Fekete */
.szin6 { color: rgb(128, 128, 128); }  /* Szürke */

/* RGBA formátum: rgba(vörös, zöld, kék, átlátszóság) */
/* Átlátszóság (alpha): 0 = teljesen átlátszó, 1 = teljesen látható */

.szin7 { color: rgba(255, 0, 0, 1); }     /* Piros, nem átlátszó */
.szin8 { color: rgba(255, 0, 0, 0.5); }   /* Piros, 50% átlátszó */
.szin9 { color: rgba(255, 0, 0, 0.25); }  /* Piros, 75% átlátszó */
.szin10 { color: rgba(0, 0, 0, 0); }      /* Teljesen átlátszó */

/* Gyakori használat: árnyékok, overlay-ek */
.overlay {
  background: rgba(0, 0, 0, 0.7);  /* 70% fekete overlay */
}

.kartya-arnyek {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Élő példa - RGB és RGBA színek:

RGB alapszínek:

rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255)

Semleges RGB színek:

rgb(255, 255, 255) rgb(0, 0, 0) rgb(128, 128, 128)

RGBA átlátszóság (0-1 érték):

alpha: 1 alpha: 0.75 alpha: 0.5 alpha: 0.25

Gyakori használat - Overlay:

rgba(0, 0, 0, 0.7) overlay

4. HSL és HSLA színek BÓNUSZ

A HSL (Hue, Saturation, Lightness) formátum intuitívabb, mert a színt, telítettséget és világosságot külön állíthatod.

CSS - HSL és HSLA

/* HSL formátum: hsl(árnyalat, telítettség, világosság) */
/* Árnyalat (Hue): 0-360 fok (színkör) */
/* Telítettség (Saturation): 0-100% */
/* Világosság (Lightness): 0-100% */

/* Színkör fok értékek */
.piros { color: hsl(0, 100%, 50%); }      /* 0° = Piros */
.narancs { color: hsl(30, 100%, 50%); }   /* 30° = Narancs */
.sarga { color: hsl(60, 100%, 50%); }     /* 60° = Sárga */
.zold { color: hsl(120, 100%, 50%); }     /* 120° = Zöld */
.turkiz { color: hsl(180, 100%, 50%); }   /* 180° = Türkiz */
.kek { color: hsl(240, 100%, 50%); }      /* 240° = Kék */
.lila { color: hsl(270, 100%, 50%); }     /* 270° = Lila */
.magenta { color: hsl(300, 100%, 50%); }  /* 300° = Magenta */

/* Világosság változtatása (ugyanaz a szín) */
.sotet { color: hsl(210, 100%, 20%); }    /* Sötét kék */
.normal { color: hsl(210, 100%, 50%); }   /* Normál kék */
.vilagos { color: hsl(210, 100%, 80%); }  /* Világos kék */

/* Telítettség változtatása */
.telitett { color: hsl(210, 100%, 50%); }    /* Élénk kék */
.halvany { color: hsl(210, 50%, 50%); }      /* Halványabb kék */
.szurkes { color: hsl(210, 0%, 50%); }       /* Szürke (nincs telítettség) */

/* HSLA átlátszósággal */
.atlatszo-kek { color: hsla(210, 100%, 50%, 0.5); }

/* HSL előnye: könnyű variációkat készíteni */
:root {
  --primary-hue: 210;
  --primary: hsl(var(--primary-hue), 100%, 50%);
  --primary-light: hsl(var(--primary-hue), 100%, 70%);
  --primary-dark: hsl(var(--primary-hue), 100%, 30%);
}

Élő példa - HSL és HSLA színek:

Színkör (Hue: 0°-360°):

0° 30° 60° 120° 180° 240° 270° 300°

Világosság (Lightness) - ugyanaz a szín (210°):

20% 35% 50% 65% 80%

Telítettség (Saturation) - ugyanaz a szín (210°):

100% 75% 50% 25% 0%

HSLA átlátszóság:

alpha: 1 alpha: 0.75 alpha: 0.5 alpha: 0.25

Színformátumok összehasonlítása

Formátum	Szintaxis	Előny	Használat
Névszín	`red`	Olvasható	Gyors prototípus
HEX	`#ff5500`	Kompakt, elterjedt	Legtöbb esetben
RGB/RGBA	`rgba(255,85,0,0.5)`	Átlátszóság kezelése	Overlay, árnyékok
HSL/HSLA	`hsl(20,100%,50%)`	Intuitív variációk	Színsémák, témák

Szöveg- és háttérszín EMELT SZINT

A két leggyakrabban használt szín tulajdonság a color (szövegszín) és a background-color (háttérszín).

CSS - color és background-color

/* Szöveg színe */
h1 {
  color: #333;  /* Sötétszürke szöveg */
}

p {
  color: #666;  /* Világosabb szürke bekezdések */
}

a {
  color: #007bff;  /* Kék linkek */
}

/* Háttérszín */
body {
  background-color: #f5f5f5;  /* Világosszürke háttér */
}

header {
  background-color: #333;  /* Sötét fejléc */
  color: white;            /* Fehér szöveg a fejlécben */
}

.kartya {
  background-color: white;
  color: #333;
}

/* Hover effekt */
.gomb {
  background-color: #007bff;
  color: white;
}

.gomb:hover {
  background-color: #0056b3;  /* Sötétebb kék hover-re */
}

/* Kijelölés színe */
::selection {
  background-color: #007bff;
  color: white;
}

Élő példa - Szöveg- és háttérszín:

Szöveg színe (color):

Címsor - color: #333

Bekezdés szövege - color: #666

Link szöveg - color: #007bff

Háttérszín (background-color):

body: #f5f5f5

header: #333 + fehér szöveg

.kartya: white

Hover effekt (vidd fölé az egeret):

::selection (jelöld ki ezt a szöveget):

Jelöld ki ezt a szöveget az egérrel, hogy lásd a ::selection hatását!

Kontraszt és olvashatóság

WCAG ajánlás: Minimum 4.5:1 kontraszt arány normál szöveghez
Nagy szöveg: Minimum 3:1 kontraszt (18px+ vagy 14px+ félkövér)
Eszközök: WebAIM Contrast Checker, Chrome DevTools
Tipp: Kerüld a tiszta feketét (#000) fehér háttéren - túl erős kontraszt

Háttérképek BÓNUSZ

A CSS lehetővé teszi képek háttérként való használatát, részletes kontrollt biztosítva a méret, pozíció és ismétlődés felett.

Idézőjelek használata CSS-ben

A CSS-ben az url() függvényen belül az útvonalat egyszeres idézőjelbe (') tesszük, nem dupla idézőjelbe ("). Ez azért fontos, mert ha a CSS-t HTML attribútumban (pl. style="") írjuk, a dupla idézőjel ütközne a HTML szintaxissal.

Helyes: background-image: url('images/kep.jpg');

background-image - Háttérkép beállítása

CSS - background-image

/* Alapvető háttérkép */
.hero {
  background-image: url('images/hero-bg.jpg');
}

/* Relatív útvonal */
.section {
  background-image: url('../images/pattern.png');
}

/* Abszolút URL */
.banner {
  background-image: url('https://example.com/image.jpg');
}

/* Több háttérkép (rétegezve) */
.layered {
  background-image:
    url('images/overlay.png'),      /* Felső réteg */
    url('images/background.jpg');   /* Alsó réteg */
}

Élő példa - background-image:

background-image: url('...')

Gradiens overlay
+ háttérkép

background-size - Háttérkép mérete

CSS - background-size

/* Automatikus (eredeti méret) */
.bg1 {
  background-size: auto;
}

/* Fix méret */
.bg2 {
  background-size: 200px 100px;  /* szélesség magasság */
}

/* Százalékos méret */
.bg3 {
  background-size: 50% 50%;
}

/* cover - Kitölti a teljes területet (levághat) */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;  /* Leggyakrabban használt nagy képekhez */
}

/* contain - Teljes kép látható (üres hely maradhat) */
.logo-bg {
  background-image: url('logo.png');
  background-size: contain;
}

Élő példa - background-size:

auto

cover

contain

background-position - Háttérkép pozíciója

CSS - background-position

/* Kulcsszavakkal */
.bg1 { background-position: top left; }
.bg2 { background-position: top center; }
.bg3 { background-position: top right; }
.bg4 { background-position: center left; }
.bg5 { background-position: center center; }  /* vagy csak: center */
.bg6 { background-position: center right; }
.bg7 { background-position: bottom left; }
.bg8 { background-position: bottom center; }
.bg9 { background-position: bottom right; }

/* Százalékkal */
.bg10 { background-position: 50% 50%; }  /* Középen */
.bg11 { background-position: 0% 0%; }    /* Bal felső */
.bg12 { background-position: 100% 100%; } /* Jobb alsó */

/* Pixelekkel */
.bg13 { background-position: 20px 30px; }  /* 20px balról, 30px fentről */

/* Kombinálva */
.bg14 { background-position: right 20px bottom 10px; }

Élő példa - background-position:

top left

top center

top right

center left

center

center right

bottom left

bottom center

bottom right

background-repeat - Háttérkép ismétlődése

CSS - background-repeat

/* Ismétlődés mindkét irányba (alapértelmezett) */
.pattern {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

/* Nincs ismétlődés */
.hero {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
}

/* Csak vízszintesen */
.divider {
  background-image: url('line.png');
  background-repeat: repeat-x;
}

/* Csak függőlegesen */
.sidebar-bg {
  background-image: url('stripe.png');
  background-repeat: repeat-y;
}

/* Space - egyenletes elosztás levágás nélkül */
.spaced {
  background-repeat: space;
}

/* Round - méretezve, hogy pontosan kitöltse */
.rounded {
  background-repeat: round;
}

Élő példa - background-repeat:

repeat

no-repeat

repeat-x

repeat-y

background-attachment - Háttér rögzítése

CSS - background-attachment

/* Görget a tartalommal (alapértelmezett) */
.normal {
  background-attachment: scroll;
}

/* Rögzített háttér (parallax effekt) */
.parallax {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* Rögzített az elem belsejéhez */
.local {
  background-attachment: local;  /* Textarea-nál hasznos */
}

background - Rövidített forma

CSS - background shorthand

/* Rövidített szintaxis */
/* background: color image position/size repeat attachment; */

/* Teljes hero szekció egy sorban */
.hero {
  background: #333 url('hero.jpg') center/cover no-repeat fixed;
}

/* Egyszerűbb változat */
.kartya {
  background: white url('icon.png') 10px center no-repeat;
}

/* Csak szín */
.section {
  background: #f5f5f5;
}

/* Több réteg rövidítve */
.layered {
  background:
    url('overlay.png') center/cover no-repeat,
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('photo.jpg') center/cover no-repeat;
}

Gradiens hátterek BÓNUSZ

A CSS gradiensek színátmeneteket hoznak létre képek nélkül. Két fő típus létezik: lineáris és radiális.

linear-gradient() - Lineáris gradiens

CSS - linear-gradient

/* Alapvető gradiens (fentről lefelé) */
.gradient1 {
  background: linear-gradient(#ff5500, #007bff);
}

/* Irány megadása */
.gradient2 {
  background: linear-gradient(to right, #ff5500, #007bff);  /* Balról jobbra */
}

.gradient3 {
  background: linear-gradient(to bottom right, #ff5500, #007bff);  /* Átlós */
}

/* Fokkal megadott irány */
.gradient4 {
  background: linear-gradient(45deg, #ff5500, #007bff);   /* 45 fokos szög */
}

.gradient5 {
  background: linear-gradient(90deg, #ff5500, #007bff);   /* Vízszintes */
}

.gradient6 {
  background: linear-gradient(180deg, #ff5500, #007bff);  /* Függőleges (alapértelmezett) */
}

/* Több szín */
.rainbow {
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    purple
  );
}

/* Színek pozíciója megadva */
.gradient7 {
  background: linear-gradient(
    90deg,
    #ff5500 0%,      /* Narancs az elején */
    #ff5500 30%,     /* Narancs 30%-ig */
    #007bff 70%,     /* Kék indul 70%-nál */
    #007bff 100%     /* Kék a végén */
  );
}

/* Éles átmenet (csíkok) */
.stripes {
  background: linear-gradient(
    90deg,
    #ff5500 50%,
    #007bff 50%
  );
}

Élő példa - Lineáris gradiensek:

radial-gradient() - Radiális (körkörös) gradiens

CSS - radial-gradient

/* Alapvető radiális gradiens (középről) */
.radial1 {
  background: radial-gradient(#ff5500, #007bff);
}

/* Alakzat megadása */
.radial2 {
  background: radial-gradient(circle, #ff5500, #007bff);  /* Kör */
}

.radial3 {
  background: radial-gradient(ellipse, #ff5500, #007bff); /* Ellipszis (alapértelmezett) */
}

/* Pozíció megadása */
.radial4 {
  background: radial-gradient(circle at top left, #ff5500, #007bff);
}

.radial5 {
  background: radial-gradient(circle at 30% 70%, #ff5500, #007bff);
}

/* Méret */
.radial6 {
  background: radial-gradient(circle closest-side, #ff5500, #007bff);
}

.radial7 {
  background: radial-gradient(circle farthest-corner, #ff5500, #007bff);
}

/* Spotlight effekt */
.spotlight {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
}

Élő példa - Radiális gradiensek:

Gradiensek kombinálása

CSS - Gradiens kombinációk

/* Gradiens + kép overlay */
.hero-overlay {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url('hero.jpg') center/cover;
}

/* Gradiens szövegszínként */
.gradient-text {
  background: linear-gradient(90deg, #ff5500, #007bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Ismétlődő gradiens (csíkok) */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #ff5500,
    #ff5500 10px,
    #007bff 10px,
    #007bff 20px
  );
}

/* Modern gomb gradiens */
.fancy-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fancy-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

Opacity - Átlátszóság EMELT SZINT

Az opacity tulajdonság a teljes elem átlátszóságát állítja (0-1 között).

CSS - opacity

/* Opacity értékek */
.elem1 { opacity: 1; }      /* Teljesen látható (alapértelmezett) */
.elem2 { opacity: 0.75; }   /* 75% látható */
.elem3 { opacity: 0.5; }    /* 50% látható */
.elem4 { opacity: 0.25; }   /* 25% látható */
.elem5 { opacity: 0; }      /* Teljesen átlátszó (de helyet foglal!) */

/* Hover effekt */
.kartya {
  opacity: 0.8;
  transition: opacity 0.3s;
}

.kartya:hover {
  opacity: 1;
}

/* Letiltott elem */
.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

Élő példa - Opacity értékek:

opacity: 1

100% látható

opacity: 0.75

75% látható

opacity: 0.5

50% látható

opacity: 0.25

25% látható

opacity: 0

0% (rejtett)

opacity vs rgba - Fontos különbség!

opacity: A teljes elem (és gyerekei) átlátszóak lesznek
rgba/hsla: Csak az adott szín átlátszó, a tartalom nem
Tipp: Háttérszín átlátszóságához használj rgba-t, ne opacity-t!

CSS - opacity vs rgba különbség

/* ❌ ROSSZ: opacity - a szöveg is átlátszó lesz */
.overlay-rossz {
  background-color: black;
  opacity: 0.5;
  color: white;  /* Ez is 50% átlátszó lesz! */
}

/* ✅ JÓ: rgba - csak a háttér átlátszó */
.overlay-jo {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;  /* Ez 100% látható marad */
}

Élő példa - opacity vs rgba különbség:

❌ opacity: 0.5

Ez a szöveg is halvány!
A teljes elem átlátszó

✅ rgba(0,0,0,0.5)

Ez a szöveg élesen látszik!
Csak a háttér átlátszó

Gyakorlati példa: Hero szekció EMELT SZINT

Alkalmazzuk az eddig tanultakat egy modern hero szekció létrehozásához:

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero szekció példa</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="hero">
    <div class="hero-content">
      <h1>Üdvözlünk az Elit Hardvernél!</h1>
      <p>Prémium számítógép alkatrészek egy helyen</p>
      <a href="#" class="hero-btn">Termékek böngészése</a>
    </div>
  </section>
</body>
</html>

style.css

/* Hero szekció */
.hero {
  /* Háttérkép fekete overlay-jel */
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url('images/hero-bg.jpg') center/cover no-repeat;

  /* Méret és elrendezés */
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Hero tartalom */
.hero-content {
  color: white;
  max-width: 600px;
  padding: 20px;
}

/* Főcím - opacity használata a szövegen */
.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.95;  /* Enyhén átlátszó szöveg */
}

/* Alcím - még halványabb */
.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.8;  /* Halványabb szöveg */
}

/* Gomb */
.hero-btn {
  display: inline-block;
  background: white;
  color: #333;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* Gomb hover - átlátszó háttér */
.hero-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

Élő példa - Hero szekció:

Üdvözlünk az Elit Hardvernél!

Prémium számítógép alkatrészek egy helyen

Termékek böngészése

Összefoglalás

Ebben a cikkben megismerkedtél a CSS színek és hátterek kezelésével:

Színformátumok: névszínek, HEX, RGB/RGBA, HSL/HSLA
Szöveg és háttérszín: color, background-color
Háttérképek: background-image, size, position, repeat, attachment
Gradiensek: linear-gradient(), radial-gradient()
Átlátszóság: opacity vs rgba különbsége

Példák a weboldalunkon

Nézd meg, hogyan használjuk a színeket és háttereket:

Főoldal - Hero szekció gradiens overlay-jel
Processzor oldal - Termékkártyák háttérszínnel és árnyékkal
Blog oldal - Info-boxok színes háttérrel

Következő lépések

Kísérletezz a színekkel: próbálj ki különböző gradiens kombinációkat, és figyeld meg a kontraszt hatását az olvashatóságra!

Következő cikk: Szövegformázás - Ismerd meg a betűtípusokat, a font tulajdonságokat és a szöveg stílusozás lehetőségeit!