← Vissza

color

Szöveg színének beállítása.

color: magenta;

font-size

Szöveg méretének beállítása.

font-size: 18px;

font-family

Betűtípus meghatározása.

font-family: Arial, sans-serif;

line-height

Sorköz beállítása.

line-height: 1.6;

text-align

Szöveg vízszintes igazítása.

text-align: center;

margin

Külső térköz az elem körül.

margin: 20px;

padding

Belső térköz az elem tartalma körül.

padding: 12px;

border

Keret vastagsága, stílusa és színe.

border: 1px solid #ff2e88;

border-radius

Sarkok lekerekítése.

border-radius: 12px;

box-shadow

Doboz árnyékának beállítása.

box-shadow: 0 4px 12px rgba(0,0,0,0.5);

display

Megjelenítési mód beállítása.

display: flex;

position

Elem pozicionálása a dokumentumban.

position: absolute;

z-index

Elem rétegsorrendje más elemekhez képest.

z-index: 10;

opacity

Elem átlátszósága.

opacity: 0.7;

overflow

Túlcsordulás kezelése.

overflow: hidden;

flex

Rugalmas elrendezés beállítása.

display: flex;
justify-content: center;
align-items: center;

grid

Rácsalapú elrendezés.

display: grid;
grid-template-columns: repeat(3, 1fr);

transition

Átmenet beállítása.

transition: all 0.3s ease;

transform

Elem átalakítása (nagyítás, forgatás, mozgatás).

transform: rotate(45deg);

animation

Animáció beállítása.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
animation: pulse 2s infinite;

background-image

Háttérkép beállítása.

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

filter

Képi effektek alkalmazása.

filter: blur(4px);

cursor

Egérkurzor stílusa.

cursor: pointer;

user-select

Szöveg kijelölhetőségének szabályozása.

user-select: none;

white-space

Szöveg tördelésének kezelése.

white-space: nowrap;

aspect-ratio

Képarány beállítása.

aspect-ratio: 16 / 9;

object-fit

Kép illesztése a keretbe.

object-fit: cover;

scroll-behavior

Görgetés stílusa.

scroll-behavior: smooth;

font-weight

Betű vastagságának beállítása.

font-weight: bold;

text-shadow

Szöveg árnyékának beállítása.

text-shadow: 2px 2px 4px #000;

letter-spacing

Betűk közötti térköz.

letter-spacing: 2px;

word-spacing

Szavak közötti térköz.

word-spacing: 6px;

background-size

Háttérkép méretezése.

background-size: cover;

background-position

Háttérkép pozíciója.

background-position: center;

clip-path

Elem alakzatba vágása.

clip-path: circle(50%);

backdrop-filter

Háttér elmosása vagy szűrése.

backdrop-filter: blur(6px);

transform

Elem átalakítása (nagyítás, forgatás, mozgatás).

transform: scale(1.2) rotate(15deg);

transition

Átmenet beállítása.

transition: background 0.3s ease;

animation

Animáció beállítása.

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
animation: fade 2s infinite;

cursor

Egérkurzor stílusa.

cursor: pointer;

pointer-events

Kattinthatóság engedélyezése vagy tiltása.

pointer-events: none;

user-select

Szöveg kijelölhetőségének szabályozása.

user-select: none;

text-overflow

Túlcsorduló szöveg kezelése.

text-overflow: ellipsis;

overflow-wrap

Szavak törése túlcsordulásnál.

overflow-wrap: break-word;

aspect-ratio

Képarány beállítása.

aspect-ratio: 16 / 9;

object-fit

Kép illesztése a keretbe.

object-fit: cover;

scroll-behavior

Görgetés stílusa.

scroll-behavior: smooth;

scroll-snap-type

Görgetés rögzítése adott pontokon.

scroll-snap-type: x mandatory;

text-transform

Szöveg átalakítása nagybetűssé, kisbetűssé vagy kezdőbetűssé.

text-transform: uppercase;

writing-mode

Szöveg írásirányának beállítása.

writing-mode: vertical-rl;

columns

Többszörös oszlopos tördelés.

columns: 2;

column-gap

Oszlopok közötti térköz.

column-gap: 40px;

hyphens

Szavak automatikus elválasztása.

hyphens: auto;

minmax()

Grid oszlop/sor minimális és maximális méretének beállítása.

grid-template-columns: repeat(3, minmax(200px, 1fr));

clamp()

Érték beállítása minimum, ideális és maximum között.

font-size: clamp(14px, 2vw, 20px);

place-content

Grid tartalom igazítása vízszintesen és függőlegesen.

place-content: center;

grid-area

Grid cella kijelölése névvel.

grid-area: header;

object-position

Kép pozíciója a kereten belül.

object-position: top center;

mix-blend-mode

Elem színének keverése a háttérrel.

mix-blend-mode: multiply;

isolation

Új keverési kontextus létrehozása.

isolation: isolate;

filter

Képi effektek: szürkeárnyalat, invertálás, szépia.

filter: grayscale(100%) invert(1) sepia(0.5);

backface-visibility

3D transzformált elem hátlapjának láthatósága.

backface-visibility: hidden;

perspective

3D transzformáció mélységének beállítása.

perspective: 800px;

transform-style

3D transzformációk gyermekekre való alkalmazása.

transform-style: preserve-3d;

animation-delay

Animáció kezdési késleltetése.

animation-delay: 1s;

animation-iteration-count

Animáció ismétlésszáma.

animation-iteration-count: infinite;

animation-direction

Animáció iránya (normál, fordított, váltakozó).

animation-direction: alternate;