Szöveg színének beállítása.
color: magenta;
Szöveg méretének beállítása.
font-size: 18px;
Betűtípus meghatározása.
font-family: Arial, sans-serif;
Sorköz beállítása.
line-height: 1.6;
Szöveg vízszintes igazítása.
text-align: center;
Külső térköz az elem körül.
margin: 20px;
Belső térköz az elem tartalma körül.
padding: 12px;
Keret vastagsága, stílusa és színe.
border: 1px solid #ff2e88;
Sarkok lekerekítése.
border-radius: 12px;
Doboz árnyékának beállítása.
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
Megjelenítési mód beállítása.
display: flex;
Elem pozicionálása a dokumentumban.
position: absolute;
Elem rétegsorrendje más elemekhez képest.
z-index: 10;
Elem átlátszósága.
opacity: 0.7;
Túlcsordulás kezelése.
overflow: hidden;
Rugalmas elrendezés beállítása.
display: flex;
justify-content: center;
align-items: center;
Rácsalapú elrendezés.
display: grid;
grid-template-columns: repeat(3, 1fr);
Átmenet beállítása.
transition: all 0.3s ease;
Elem átalakítása (nagyítás, forgatás, mozgatás).
transform: rotate(45deg);
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;
Háttérkép beállítása.
background-image: url('kep.jpg');
Képi effektek alkalmazása.
filter: blur(4px);
Egérkurzor stílusa.
cursor: pointer;
Szöveg kijelölhetőségének szabályozása.
user-select: none;
Szöveg tördelésének kezelése.
white-space: nowrap;
Képarány beállítása.
aspect-ratio: 16 / 9;
Kép illesztése a keretbe.
object-fit: cover;
Görgetés stílusa.
scroll-behavior: smooth;
Betű vastagságának beállítása.
font-weight: bold;
Szöveg árnyékának beállítása.
text-shadow: 2px 2px 4px #000;
Betűk közötti térköz.
letter-spacing: 2px;
Szavak közötti térköz.
word-spacing: 6px;
Háttérkép méretezése.
background-size: cover;
Háttérkép pozíciója.
background-position: center;
Elem alakzatba vágása.
clip-path: circle(50%);
Háttér elmosása vagy szűrése.
backdrop-filter: blur(6px);
Elem átalakítása (nagyítás, forgatás, mozgatás).
transform: scale(1.2) rotate(15deg);
Átmenet beállítása.
transition: background 0.3s ease;
Animáció beállítása.
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
animation: fade 2s infinite;
Egérkurzor stílusa.
cursor: pointer;
Kattinthatóság engedélyezése vagy tiltása.
pointer-events: none;
Szöveg kijelölhetőségének szabályozása.
user-select: none;
Túlcsorduló szöveg kezelése.
text-overflow: ellipsis;
Szavak törése túlcsordulásnál.
overflow-wrap: break-word;
Képarány beállítása.
aspect-ratio: 16 / 9;
Kép illesztése a keretbe.
object-fit: cover;
Görgetés stílusa.
scroll-behavior: smooth;
Görgetés rögzítése adott pontokon.
scroll-snap-type: x mandatory;
Szöveg átalakítása nagybetűssé, kisbetűssé vagy kezdőbetűssé.
text-transform: uppercase;
Szöveg írásirányának beállítása.
writing-mode: vertical-rl;
Többszörös oszlopos tördelés.
columns: 2;
Oszlopok közötti térköz.
column-gap: 40px;
Szavak automatikus elválasztása.
hyphens: auto;
Grid oszlop/sor minimális és maximális méretének beállítása.
grid-template-columns: repeat(3, minmax(200px, 1fr));
Érték beállítása minimum, ideális és maximum között.
font-size: clamp(14px, 2vw, 20px);
Grid tartalom igazítása vízszintesen és függőlegesen.
place-content: center;
Grid cella kijelölése névvel.
grid-area: header;
Kép pozíciója a kereten belül.
object-position: top center;
Elem színének keverése a háttérrel.
mix-blend-mode: multiply;
Új keverési kontextus létrehozása.
isolation: isolate;
Képi effektek: szürkeárnyalat, invertálás, szépia.
filter: grayscale(100%) invert(1) sepia(0.5);
3D transzformált elem hátlapjának láthatósága.
backface-visibility: hidden;
3D transzformáció mélységének beállítása.
perspective: 800px;
3D transzformációk gyermekekre való alkalmazása.
transform-style: preserve-3d;
Animáció kezdési késleltetése.
animation-delay: 1s;
Animáció ismétlésszáma.
animation-iteration-count: infinite;
Animáció iránya (normál, fordított, váltakozó).
animation-direction: alternate;