5. nap

Jelmagyarázat #

• background: Ez a tulajdonság lehetővé teszi, hogy beállítsa egy elem háttérszínét vagy képét. Használhatja az elemek más színű háttérrel való ellátására, vagy egy képet helyezhet azok mögé.
• border-radius: Ez a tulajdonság lehetővé teszi egy elem külső keretének sarkainak lekerekítését. Kerek sarkokat adhat az elemeknek, hogy lágyabbá, vizuálisan vonzóbbá tegye őket.
• display: Ez a tulajdonság határozza meg, hogyan jelenik meg egy elem a weboldalon. Például blokkként jeleníthet meg egy elemet (például egy bekezdést), inline-ként (például szöveg részeként), vagy flex konténerként haladó elrendezési lehetőségekhez.
• font-family, line-height: A font-family lehetővé teszi az elemek szövegének típusának kiválasztását, például Arial, Times New Roman vagy egyéni betűtípus. A line-height meghatározza a szöveg sorai közötti függőleges helyet.
• font-size: Ez a tulajdonság határozza meg a szöveg méretét a webhelyen. A szöveget nagyobbra vagy kisebbre állíthatja az érték módosításával.
• list-style: Ha listák vannak az oldalon (például felsorolások vagy sorszámozott listák), ez a tulajdonság lehetővé teszi, hogy ellenőrizze, hogyan jelennek meg a listaelemek, beleértve, hogy rendelkeznek-e felsorolási jelekkel vagy számozással.
• margin, padding, box-sizing: Ezek a tulajdonságok segítenek az elemek közötti helyszabályozásban a weboldalon. A margin teret hoz létre egy elem körül, a padding teret hoz létre egy elemen belül, a box-sizing pedig meghatározza, hogyan számítódik ki egy elem mérete, beleértve a paddingot és a keretet.
• max-width: Ezzel a tulajdonsággal beállíthatja egy elem maximális szélességét. Biztosítja, hogy az elem ne legyen szélesebb a megadott értéknél, még akkor sem, ha a benne lévő tartalom alapvetően szélesebbé tenné.
• position, top, left, right, z-index, height, width: Ezek a tulajdonságok az elemek pozícionálását és méretét szabályozzák a weboldalon. Használhatja őket az elemek mozgatásához, átfedésükhöz vagy méretének irányításához.
• scroll-behavior: Amikor egy hivatkozásra kattint, és az az oldal egy másik részére visz, ez a tulajdonság szabályozza, hogy az görgetés sima vagy hirtelen legyen.
• text-decoration, color: Ezek a tulajdonságok a hivatkozások ( <a> címkék) stílusának formázására szolgálnak. A text-decoration lehetővé teszi, hogy eltávolítsa az aláhúzást a hivatkozásokról, vagy különböző módon formázza őket, míg a color lehetővé teszi a hivatkozások szövegének színének megváltoztatását.
• text-transform: Ez a tulajdonság lehetővé teszi a szöveg nagybetűvé, kisbetűvé vagy minden szó első betűjének nagybetűvé történő átalakítását.
• transition: Amikor sima átmeneteket szeretne létrehozni az elemek különböző állapotai között (például amikor egy elem felett lebegve megváltoztatja a színét), ezt a tulajdonságot használja a átmenet hatásának időtartamának és típusának meghatározásához.

CSS fájl létrehozása #

A CSS fájl létrehozása hasonlóan egyszerű ahhoz, mint a HTML fájlok létrehozása. Hozzunk létre egy styles.css elnevezésű fájlt a projekt mappájában.

CSS fájl linkelése #

Az újonnan létrehozott fájlt össze kell kapcsolnunk a HTML fájllal, amit linkelés útján tudunk megtenni. Annak érdekében, hogy minden képernyőméreten az elvártak szerint működjenek a méretezések, ezért meg kell adnunk egy meta elemet, amely ezért felelős.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />

Google fonts #

Ahhoz, hogy az alapértelmezettől eltérő betűtípusokat tudjunk használni, azokat először be kell importálnunk. A betűtípusokat itt tudod megtalálni.

Ebben a rövid videóban láthatod, hogy hogyan tudok megszerezni a betűtípushoz szükséges import kifejezést.

@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

Változók beállítása #

A CSS változók lehetővé teszik számunkra, hogy értékeket tároljunk és újrahasználjunk a CSS kódban. Ezek nagyon hasznosak lehetnek, mivel egyszerűvé teszik a stílusok újrafelhasználását.

A var() függvénnyel hivatkozunk a változóra, és az értékét fogjuk használni a stílusok megadásakor.

/* Változók beállítása */
:root {
  /* Színek */
  --primary-color: #ffcd42; /* Fő szín */
  --secondary-color: #ffd35c; /* Másodlagos szín */
  --bg-primary: #ffffff; /* Háttérszín */
  --bg-secondary: #000000; /* Másodlagos háttérszín */
  --text-color: #222222; /* Szövegszín */
  --card-background: #f4f4f4; /* Kártya háttérszíne */

  /* Árnyékok */
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Árnyék beállítása */

  /* Betű vastagságok */
  --font-weight-semibold: 600; /* Félkövér */

  /* Maximális szélességek */
  --width-medium: 1100px; /* Közepes maximális szélesség */
}

/* Sötét mode változók */
[data-theme="dark"] {
  /* Színek */
  --primary-color: #ffcd42; /* Fő szín */
  --secondary-color: #ffd35c; /* Másodlagos szín */
  --bg-primary: #000000; /* Háttérszín */
  --bg-secondary: #ffffff; /* Másodlagos háttérszín */
  --text-color: #ffffff; /* Szövegszín */
  --card-background: #111111; /* Kártya háttérszíne */

  /* Árnyékok */
  --shadow: 0 2px 10px rgba(95, 95, 95, 0.2);
}

Pár alapvető beállítás #

Ez a CSS kód alapvető stílusokat tartalmaz, amelyet általában a weboldalak egységes megjelenésének és funkcióinak biztosítására használnak.

1. Alapvető beállítások: Az html elemre vonatkozó szabályok definiálják az alapvető betűméretet és a görgetés simítását.
2. Univerzális szabályok (*): Az * jelölésű szabályok az összes elemre vonatkoznak, és nullázzák a külső és belső margókat (margin és padding), valamint beállítják a dobozmodellt (box-sizing).
3. Listastílus eltávolítása: Az ul elemekről eltávolítja a listastílust (list-style), ami gyakran hasznos, ha egyedi dizájnt kívánunk készíteni.
4. Linkek stílusának beállítása: Az a elemekre vonatkozó szabályok eltávolítják a link aláhúzását (text-decoration) és beállítják a szövegszínét a --text-color változóval.
5. Test szabályok: A body elemre vonatkozó szabályok beállítják a háttérszínt (background), a szövegszínt (color), a betűtípust (font-family) és a sorok közötti távolságot (line-height). Ezek a beállítások határozzák meg az alapértelmezett megjelenést az egész weboldalon.
6. Konténer stílusok: A .container osztályra vonatkozó szabályok beállítják a maximális szélességet (max-width), a margót (margin) és a belső margót (padding), hogy középre igazítsák és elrendezzék a tartalmat.
7. Kijelölési stílusok: A h1 és h2 címek kijelölési stílusait definiálják, beleértve a szövegszínt és a háttérszínt is, a kijelölési hatások megjelenésének testreszabásához.
8. Gomb stílusok: A .btn osztályra vonatkozó szabályok beállítják a gombok alapértelmezett stílusát, például a háttérszínt, a betűméretet és a kerekítést.
9. Gomb típusok: A .btn-primary és .btn-secondary osztályok további stílusokat definiálnak a gombokhoz, például háttérszíneket és szövegszíneket.
10. Gomb hover hatások: A .btn-primary:hover szabály beállítja a gomb háttérszínét, amikor az egér fölött van, így egy hover hatás jelenik meg.

/* Alapvető beállítások */
html {
  font-size: 100%; /* Alap betűméret */
  scroll-behavior: smooth; /* Görgetés simítása */
}

* {
  margin: 0; /* Margó nullázása */
  padding: 0; /* Belső margó nullázása */
  box-sizing: border-box; /* Box model beállítása */
}

ul {
  list-style: none; /* Lista stílusának eltávolítása */
}

a {
  text-decoration: none; /* Link aláhúzásának eltávolítása */
  color: var(--text-color); /* Szövegszín beállítása változóval */
}

body {
  background: var(--bg-primary); /* Háttérszín beállítása változóval */
  color: var(--text-color); /* Szövegszín beállítása változóval */
  font-family: "Raleway", sans-serif; /* Betűtípus beállítása */
  line-height: 1.5; /* Sorok közötti távolság */
}

.container {
  max-width: var(--width-medium); /* Maximális szélesség beállítása változóval */
  margin: 0 auto; /* Margó beállítása középre */
  padding: 1rem 2rem; /* Belső margó beállítása */
}

h1::selection,
h2::selection {
  color: #111; /* Kijelölés szövegszíne */
  background: var(--primary-color); /* Kijelölés háttérszín beállítása változóval */
}

.btn {
  display: inline-block; /* Gomb blokkra állítása */
  padding: 0.75rem 1.9rem; /* Belső margó beállítása */
  border-radius: 30px; /* Gomb kerekítése */
  text-transform: uppercase; /* Szöveg nagybetűvé alakítása */
  font-size: 0.82rem; /* Betűméret beállítása */
  transition: 0.3s; /* Átmenet beállítása */
}

.btn-primary {
  background: var(--primary-color); /* Gomb háttérszín beállítása változóval */
  color: #000000; /* Szövegszín */
}

.btn-secondary {
  margin: 5px 0; /* Margó beállítása */
  background-color: var(--bg-secondary); /* Gomb háttérszín beállítása változóval */
  color: var(--bg-primary); /* Szövegszín beállítása változóval */
}

/* Hover hatás a gombhoz */
.btn-primary:hover {
  background: var(--secondary-color); /* Gomb háttérszín beállítása változóval */
}

Navigáció #

Ez a CSS kód a navigációs sáv (navbar) stílusát definiálja.

1. Navigációs sáv (navbar) alapvető stílusai:
   • A .navbar osztályra vonatkozó szabályok beállítják a navigációs sáv pozícióját (position: fixed), hogy az mindig látható legyen a lap tetején, és kitöltse a teljes szélességet (top, left, right, width).
   • A z-index tulajdonság beállítása biztosítja, hogy a navigációs sáv előrébb legyen a tartalom többi részéhez képest.
   • A háttérszín (background) beállítása a --bg-primary változó segítségével, amelyet a dokumentum más részeiben lehet definiálni.
   • A Flexbox elrendezés (display: flex) beállítása lehetővé teszi az elemek könnyű elrendezését a navigációs sávban.
2. Menüelemek (nav-menu):
   • A .nav-menu osztályra vonatkozó szabályok beállítják a menüelemek elrendezését a navigációs sávban, hasonlóan a .navbar osztályhoz.
   • A háttérszín (background) beállítása ugyanazzal a változóval történik, mint a navigációs sávnál.
3. Menüelemek (nav-link):
   • A .nav-link osztályra vonatkozó szabályok beállítják a menüelemek megjelenését a navigációs sávban.
   • A margó (margin) beállítása szükséges a menüelemek közötti tér létrehozásához.
   • A betűméret (font-size) beállítása az elemek szövegméretének állításához.
   • A betű vastagsága (font-weight) változó segítségével van beállítva, ami egy előredefiniált változó (--font-weight-semibold) értékét veszi fel.
4. Logó stílus (#logo img):
   • Az #logo img szelektort használják a logó elem formázásához.
   • Itt beállítják a logó blokkra állítását (display: block), valamint a szélességét (width), hogy megfelelően jelenjen meg a navigációs sávban.

/* Navigáció */
.navbar {
  position: fixed; /* Fix pozíció beállítása */
  top: 0; /* Felső peremtől való távolság */
  left: 0; /* Bal peremtől való távolság */
  right: 0; /* Jobb peremtől való távolság */
  z-index: 20; /* Z-index beállítása */
  background: var(--bg-primary); /* Háttérszín beállítása változóval */

  display: flex; /* Flexbox elrendezés beállítása */
  align-items: center; /* Elemek középre igazítása */
  justify-content: space-between; /* Elemek egyenletes elosztása */
  height: 80px; /* Magasság beállítása */
  width: 100%; /* Szélesség beállítása */
}

.navbar .nav-menu {
  display: flex; /* Flexbox elrendezés beállítása */
  align-items: center; /* Elemek középre igazítása */
  background: var(--bg-primary); /* Háttérszín beállítása változóval */
}

.navbar .nav-link {
  margin: 0 1rem; /* Margó beállítása */
  font-size: 0.8rem; /* Betűméret beállítása */
  font-weight: var(--font-weight-semibold); /* Betű vastagság beállítása változóval */
}

.navbar #logo img {
  display: block; /* Elem blokkra állítása */
  width: 40px; /* Szélesség beállítása */
}

Hero #

Ez a CSS kód egy hero szekció stílusát definiálja.

1. Hero szekció (#hero):
   • Az #hero azonosítóra vonatkozó szabályok beállítják a hero szekció alapvető tulajdonságait.
   • A display: flex beállítás segítségével a hero szekcióban lévő elemeket flexbox elrendezésben helyezi el.
   • A flex-direction: column tulajdonság azt jelenti, hogy a gyermek elemek oszlopokban helyezkednek el egymás alatt.
   • A height: 100% beállítás segítségével a hero szekció magassága teljesen kitölti a rendelkezésre álló helyet.
2. Profilkép (profile-image):
   • A .profile-image osztályra vonatkozó szabályok beállítják a profilkép szélességét (width) és kerekítését (border-radius), hogy egy kerek profilképet hozzanak létre.
3. Fejléc konténer (header-container):
   • A .header-container osztályra vonatkozó szabályok beállítják a fejléc konténer alapvető tulajdonságait.
   • A display: flex és flex-direction: column beállítások segítségével a gyermek elemek oszlopokban helyezkednek el egymás alatt, középre igazítva őket.
   • Az align-items: center és justify-content: center tulajdonságok a gyermek elemeket középre igazítják mind vízszintesen, mind függőlegesen.
   • A margin-top beállítás segítségével egy margót állít be a fejléc konténer felső részére, hogy elhelyezze azt a megfelelő távolságban a hero szekciótól.
   • A padding tulajdonság egy belső margót állít be a fejléc konténer körül.
4. Tartalom szöveg (content-text):
   • A .content-text osztályra vonatkozó szabályok beállítják a tartalom szövegének formázását.
   • A text-align: center beállítás középre igazítja a szöveget.
   • A margin-bottom és margin-top tulajdonságok beállítják az alsó és felső margót a szöveg körül.
   • A transition tulajdonság segítségével egy átmenetet hoz létre a szöveg stílusainak változásaihoz.
5. Címsor (content-text h2):
   • A .content-text h2 szabályok beállítják a címsor betűméretét (font-size) és sorok közötti távolságát (line-height).
6. Bekezdés (content-text p):
   • A .content-text p szabályok beállítják a bekezdések formázását, például a belső margót (padding), a maximális szélességet (max-width) és a margót (margin), hogy középre igazítsák azokat.

/* Hero */
#hero {
  display: flex; /* Flexbox elrendezés beállítása */
  flex-direction: column; /* Elrendezés beállítása oszlopokra */
  height: 100%; /* Magasság beállítása */
}

.profile-image {
  width: 150px; /* Szélesség beállítása */
  border-radius: 50%; /* Kerekítés beállítása */
}

.header-container {
  display: flex; /* Flexbox elrendezés beállítása */
  flex-direction: column; /* Elrendezés beállítása oszlopokra */
  align-items: center; /* Elemek középre igazítása */
  justify-content: center; /* Elemek középre igazítása */
  margin-top: 8rem; /* Margó beállítása */
  padding: 1rem; /* Belső margó beállítása */
}

.content-text {
  text-align: center; /* Szöveg igazítása középre */
  margin-bottom: 1.5rem; /* Alsó margó beállítása */
  margin-top: 1rem; /* Felső margó beállítása */
}

.content-text h2 {
  font-size: 3rem; /* Betűméret beállítása */
  line-height: 1.2; /* Sorok közötti távolság */
  transition: 0.2s ease-in-out; /* Átmenet beállítása */
}

.content-text p {
  padding: 0.5rem; /* Belső margó beállítása */
  margin: 0 auto; /* Margó beállítása */
  max-width: 700px; /* Maximális szélesség beállítása */
}

Blogok #

/* Blogok */
#blogs {
  display: flex; /* Flexbox elrendezés beállítása */
  flex-direction: column; /* Elrendezés beállítása oszlopokra */
  margin: 2rem auto 5rem; /* Margó beállítása */
}

.blogs-container {
  display: grid; /* Grid elrendezés beállítása */
  grid-template-columns: 1fr; /* Egy oszlop beállítása */
  grid-auto-rows: minmax(250px, auto); /* Sorok magasságának beállítása */
  grid-gap: 0.9rem; /* Rések beállítása */
}

.card {
  padding: 1rem; /* Belső margó beállítása */
  background: var(--card-background); /* Háttérszín beállítása változóval */
  color: #ffffff; /* Szövegszín */
  border-radius: 5px; /* Kerekítés beállítása */
  transition: 0.4s ease-in-out; /* Átmenet beállítása */
  cursor: pointer; /* Kurzor beállítása */
}

.card a {
  color: #ffffff; /* Szövegszín */
  transition: 0.25s ease-in-out; /* Átmenet beállítása */
  font-size: 1.1rem; /* Betűméret beállítása */
  margin-right: 0.3rem; /* Jobb margó beállítása */
}

.card a:hover {
  color: var(--primary-color); /* Szövegszín beállítása változóval hover esetén */
}

.card:hover {
  box-shadow: inset 0 100px 1000px 10px rgba(0, 0, 0, 0.8); /* Árnyék beállítása hover esetén */
}

.card:hover .blog-info {
  opacity: 1; /* Átlátszóság beállítása hover esetén */
}

.card .blog-bio p {
  font-size: 0.83rem; /* Betűméret beállítása */
}

.card .blog-bio h3 {
  font-size: 0.9rem; /* Betűméret beállítása */
}

.blog-info {
  display: flex; /* Flexbox elrendezés beállítása */
  justify-content: space-between; /* Elemek egyenletes elosztása */
  opacity: 0; /* Átlátszóság beállítása */
  position: relative; /* Relatív pozíció beállítása */
  transition: 0.5s ease-in-out; /* Átmenet beállítása */
}

.blog-bio {
  display: flex; /* Flexbox elrendezés beállítása */
  flex-direction: column; /* Elrendezés beállítása oszlopokra */
  justify-content: flex-end; /* Elemeket az aljára igazít */
  position: relative; /* Relatív pozíció beállítása */
  top: 160px; /* Felső távolság beállítása */
  left: 10px; /* Bal távolság beállítása */
}

.card#blog-1 {
  background: url(./assets/blogs/blog-1.png) center center/cover; /* Háttérkép beállítása */
}

Lábléc #

Ez a CSS kód a weboldal láblécének stílusát definiálja.

1. Lábléc (#footer):
   • Az #footer azonosítóra vonatkozó szabályok beállítják a lábléc alapvető tulajdonságait.
   • A background tulajdonság beállítja a háttérszínt a láblécnek.
   • A display: flex és flex-direction: column tulajdonságok segítségével a gyermek elemek oszlopokban helyezkednek el egymás alatt.
   • Az align-items: center és justify-content: center tulajdonságok középre igazítják a gyermek elemeket mind vízszintesen, mind függőlegesen.
   • A color tulajdonság beállítja a szövegszínét a láblécnek.
   • A min-height tulajdonság beállítja a lábléc minimális magasságát, hogy az mindig megfelelő méretű legyen.
   • A text-align: center tulajdonság középre igazítja a szöveget a láblécen belül.
2. Lábléc linkek (#footer a):
   • Az #footer a szelektorral beállítják a láblécben lévő linkek formázását.
   • A font-size tulajdonság beállítja a linkek betűméretét.
   • A color tulajdonság beállítja a linkek szövegszínét.
   • A :hover pszeudó osztállyal beállítják a linkek átlátszóságát, amikor föléjük húzod az egeret.
3. Társadalmi hálózatok (#footer .social):
   • Az #footer .social szelektorral beállítják a láblécben lévő társadalmi hálózatok rész formázását.
   • A margin tulajdonság beállítja a társadalmi hálózatok közötti margót.
4. Társadalmi hálózatok logói (#footer .social img):
   • Az #footer .social img szelektorral beállítják a társadalmi hálózatok logóinak méretét.
5. Társadalmi hálózatok linkek (#footer .social a):
   • Az #footer .social a szelektorral beállítják a társadalmi hálózatok linkeinek formázását.
6. Szöveg (#footer p):
   • Az #footer p szelektorral beállítják a láblécben lévő szöveg formázását, például a betűméretet.

#footer {
  background: #111111; /* Háttérszín beállítása */
  display: flex; /* Flexbox elrendezés beállítása */
  flex-direction: column; /* Elrendezés beállítása oszlopokra */
  align-items: center; /* Elemek középre igazítása */
  justify-content: center; /* Elemek középre igazítása */
  color: #ffffff; /* Szövegszín */
  min-height: 160px; /* Minimális magasság beállítása */
  text-align: center; /* Szöveg igazítása középre */
}

#footer a {
  font-size: 0.8rem; /* Betűméret beállítása */
  color: #fff; /* Szövegszín */
}

#footer a:hover {
  opacity: 0.6; /* Átlátszóság beállítása hover esetén */
}

#footer .social {
  margin: 0.9rem 0; /* Margó beállítása */
}

#footer .social img {
  width: 20px; /* Szélesség beállítása */
  height: 20px; /* Magasság beállítása */
}

#footer .social a {
  margin: 0 0.5rem; /* Margin beállítása */
}

#footer p {
  font-size: 0.8rem;
}

Sötét mód kapcsoló #

Ez a CSS kód egy sötét mód kapcsoló stílusát definiálja.

1. Dark mode kapcsoló (#switch):
   • Az #switch azonosítóra vonatkozó szabályok beállítják a sötét mód kapcsoló alapvető tulajdonságait.
   • A display: none tulajdonság eltávolítja a kapcsolót a látható területről, így nem jelenik meg a weboldalon.
2. Kapcsoló ikonok (toggle-icons):
   • A .toggle-icons osztályra vonatkozó szabályok beállítják a kapcsoló ikonok elrendezését.
   • A display: flex tulajdonság beállítja a flexbox elrendezést, amely lehetővé teszi az elemek rugalmas elhelyezését.
   • A justify-content: space-between tulajdonság egyenletesen osztja el az ikonokat a konténerben.
   • Az align-items: center tulajdonság középre igazítja az ikonokat függőlegesen.
   • A cursor: pointer tulajdonság megváltoztatja az egér kurzorát, hogy kattinthatóvá tegye az ikonokat.
3. Kapcsoló ikonok háttere (toggle-icons span):
   • Az ikonok méretét és formázását beállító szabályok.
   • A width és height tulajdonságok meghatározzák az ikonok méretét.
4. Sötét mód ikon (#switch + .toggle-icons span):
   • Az #switch:checked + .toggle-icons span szelektor segítségével azt állítjuk be, hogy ha a kapcsoló be van kapcsolva (checked), akkor a kapcsoló ikon hátterének a moon.svg fájl legyen.
   • A background tulajdonság beállítja a hátteret a megfelelő képre és a megfelelő formázásra.
5. Világos mód ikon (#switch:checked + .toggle-icons span):
   • Az #switch:checked + .toggle-icons span szelektor segítségével azt állítjuk be, hogy ha a kapcsoló ki van kapcsolva, akkor a kapcsoló ikon hátterének a sun.svg fájl legyen.
   • A background tulajdonság beállítja a hátteret a megfelelő képre és a megfelelő formázásra.

/* Dark mode kapcsoló */
#switch {
  display: none; /* Megjelenítés kikapcsolása */
}

.toggle-icons {
  display: flex; /* Flexbox elrendezés beállítása */
  justify-content: space-between; /* Elemek egyenletes elosztása */
  align-items: center; /* Elemek középre igazítása */
  cursor: pointer; /* Kurzor beállítása */
}

.toggle-icons span {
  width: 30px; /* Szélesség beállítása */
  height: 30px; /* Magasság beállítása */
}

#switch + .toggle-icons span {
  background: url(./assets/moon.svg) center center/cover; /* Háttérkép beállítása */
}

#switch:checked + .toggle-icons span {
  background: url(./assets/sun.svg) center center/cover; /* Háttérkép beállítása */
}

Animáció #

Ez a CSS kód egy animációt definiál a profilképhez.

1. Profilkép animáció (profile-image):
   • Az .profile-image osztályra vonatkozó szabályok beállítják az animációt a profilkép elemre.
   • Az animation tulajdonság beállítja az animáció nevét (bounce), az animáció időtartamát (1s vagyis 1 másodperc), a végtelen ismétlődést (infinite), valamint azt, hogy az alternatív ciklusokban az állapotok váltakozzanak (alternate).
2. Animációs kulcsszavak (@keyframes bounce):
   • Az @keyframes szabály egy kulcsszó, amely egy animációt definiál egy saját nevű animációs sorozatban (bounce).
   • A from blokkban meghatározzuk az animáció kezdeti állapotát, amelyben a transzformáció azt mondja, hogy a profilképet ne mozdítsa el függőlegesen (translateY(0px)).
   • A to blokkban meghatározzuk az animáció végállapotát, amelyben a transzformáció azt mondja, hogy mozdítsa el a profilképet felfelé -10 pixelt (translateY(-10px)).

/* Animáció */
.profile-image {
  animation: bounce 1s infinite alternate; /* Animáció beállítása */
}

@keyframes bounce {
  from {
    transform: translateY(0px); /* Transzformáció beállítása */
  }

  to {
    transform: translateY(-10px); /* Transzformáció beállítása */
  }
}

Reszponzivitás #

A CSS médialekérdezéseket (media queries) használ a weboldal tartalmának megjelenítésének módosítására különböző képernyőméretek esetén.

1. 600px-es szélesség esetén:
   • Ha a böngészőablak szélessége legalább 600 pixel, akkor a .blogs-container osztályú elem formázása változik.
   • Az @media (min-width: 600px) médialekérdezés azonosítja azt a képernyőméretet, amelynél az alábbi szabályok érvényesek lesznek.
   • A .blogs-container osztályra vonatkozó szabályok a CSS Grid grid-template-columns tulajdonságát állítják be, hogy a tartalom két oszlopban jelenjen meg egyenlően elosztva (repeat(2, 1fr)).
2. 1000px-es szélesség esetén:
   • Ha a böngészőablak szélessége legalább 1000 pixel, akkor a .blogs-container osztályú elem formázása változik.
   • Az @media (min-width: 1000px) médialekérdezés azonosítja azt a képernyőméretet, amelynél az alábbi szabályok érvényesek lesznek.
   • A .blogs-container osztályra vonatkozó szabályok a CSS Grid grid-template-columns tulajdonságát állítják be, hogy a tartalom három oszlopban jelenjen meg egyenlően elosztva (repeat(3, 1fr)).

/* Reszponzivitás */
@media (min-width: 600px) {
  .blogs-container {
    grid-template-columns: repeat(2, 1fr); /* Oszlopok számának beállítása */
  }
}

@media (min-width: 1000px) {
  .blogs-container {
    grid-template-columns: repeat(3, 1fr); /* Oszlopok számának beállítása */
  }
}

Extra olvasnivaló #

Alapjában véve elég sok mindent megtudtunk a CSS-ről, amennyiben szeretnél még többet megtudni róla, akkor ezen az oldalon találhatsz még információkat.