Kategóriák

8. nap

Tartalomjegyzék
  1. Jelmagyarázat
  2. CSS átírása SCSS-re
  3. Extra olvasnivaló

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.

Az előző napon a CSS-szel ismerkedtünk meg. Létezik egy másik technológia, amely felgyorsítja és megkönnyíti a CSS kód írását, azzal, hogy egymásba lehet ágyazni a különböző elemeket, lehet változókat használni és még sok más. Ez az SCSS. A következő példában jól látható, hogy lerövidíti a kódot és elsőre lehet, hogy furcsa a felépítése, de hosszútávon felgyorsítja a fejlesztést. Példa:

CSS verzió:

.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 */
}

SCSS verzió:

.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 */

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

Ahhoz, hogy használni tudjuk az SCSS-t el kell végeznünk pár alapvető lépést.

  1. Node.js telepítése: Látogass el a hivatalos Node.js weboldalra, és töltsd le a számítógéped operációs rendszerének megfelelő telepítőt, majd telepítsd.
  2. Parancssor megnyitása: Navigálj a projekt főmappájába a Visual Studio Code fájlkezelőjében. Nyisd meg a beépített terminált a Visual Studio Code-ban. Ezt megteheted a felső menüből a Terminal > New Terminal kiválasztásával, vagy a Ctrl + ` billentyűkombinációval.
  3. Npm inicializálása és eszközök telepítése: Az első parancs (npm init -y) egy új Node.js projektet inicializál az alapértelmezett beállításokkal. A második parancs telepíti a Gulp-hoz és az SCSS fordításhoz szükséges eszközöket. A terminálban futtasd az alábbi parancsokat: 
npm init -y
npm install --save-dev gulp gulp-sass sass gulp-rename
  1. Styles mappa létrehozása: Hozz létre egy új mappát a projekt gyökérkönyvtárában, és nevezd el "styles"-nak.
  2. A styles.css fájl áthelyezése a styles mappába és átnevezése main.scss-re: Keresd meg a styles.css fájlt a projekt gyökérkönyvtárában, majd helyezd át ezt a fájlt az újonnan létrehozott styles mappába. Nevezd át a fájlt main.scss-re.
  3. Gulpfile.js beállítása: Hozz létre egy új fájlt a projekt gyökérkönyvtárában, és nevezd el gulpfile.js-nek. Ez a fájl tartalmazni fogja a Gulp feladatok konfigurációját. A Gulp segítségével automatizálhatunk folyamatokat és könnyedén futtathatjuk az ismétlődő feladatokat. Nyisd meg a gulpfile.js fájlt a Visual Studio Code-ban, és másold be az alábbi kódot: 
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const rename = require("gulp-rename");

// SCSS fájlok fordítása CSS fájlokká
gulp.task("sass", function () {
  return gulp
    .src("styles/main.scss") // Az SCSS fájl elérési útvonala
    .pipe(sass().on("error", sass.logError))
    .pipe(rename("style.css")) // A kimeneti CSS fájl neve
    .pipe(gulp.dest("./")); // Kimeneti könyvtár
});

// Figyelés a SCSS fájlok változásaira
gulp.task("watch", function () {
  gulp.watch("styles/**/*.scss", gulp.series("sass"));
});

// Alapértelmezett feladat
gulp.task("default", gulp.series("sass", "watch"));
  • Gulp futtatása: Ez a parancs fordítani fogja a main.scss fájlt CSS-be, és a style.css fájlba elmenti:
npx gulp

Mostantól, amikor módosításokat hajtasz végre a main.scss fájlban, a Gulp automatikusan lefordítja CSS-re. Tartsd nyitva a terminált a munka közben, és a Gulp figyelni fogja a változásokat, és az SCSS fájlokat ennek megfelelően lefordítja.

CSS átírása SCSS-re

Léteznek olyan kódrészletek, amelyeknél nem szükségszerű a kód átírása, így ezeket most át fogom ugrani.

Az első ilyen szituáció, ahol van értelme az átírásnak az a h1 és h2 elemeket érinti. Az SCSS-ben a & jelöli a szülőválasztót, amely jelen esetben hivatkozik az h1 és h2 elemekre. Ezután használjuk a &::selection módot, hogy a kijelölésre (selection) vonatkozó stílusokat állítsuk be. Ez az átalakítás megőrzi a CSS kód funkcionalitását, de SCSS formába rendezi azt.

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 */
}
h1,
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 */
  }
}

A következő ilyen elemeink a gombok.

.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 */
}
.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 */

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

    &:hover {
      background: var(
        --secondary-color
      ); /* Gomb háttérszín beállítása változóval */
    }
  }

  &-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 */
  }
}

A következő ilyen elemünk a navigáció.

/* 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 */
}
/* 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 */

  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 */

  &,
  .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 */
  }

  .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 */
  }

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

A következő ilyen elemünk a hero szekció.

/* 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 */
}
/* 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 */

  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 */
  }

  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 */
  }
}

A következő ilyen részünk a blog szekció.

#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 */
}
#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 */

  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 */

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

  .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 */
    }

    &-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 */

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

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

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

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

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

A következő ilyen elemünk a lábléc.

#footer {
  background: #111; /* 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;
}
#footer {
  background: #111; /* 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 */

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

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

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

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

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

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

Majd a legvégén a témaváltó.

/* 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/sun.svg) center center/cover; /* Háttérkép beállítása */
}

#switch:checked + .toggle-icons span {
  background: url(./assets/moon.svg) center center/cover; /* Háttérkép beállítása */
}
/* Dark mode kapcsoló */
#switch {
  display: none; /* Megjelenítés kikapcsolása */

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

  &:checked + .toggle-icons span {
    background: url(./assets/moon.svg) center center/cover; /* Háttérkép beállítá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 */

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

Extra olvasnivaló

Az alábbi oldalon találhatsz további információkat ezzel kapcsolatban.

Ezek is értékesek lehetnek