Web programiranje → HTML, CSS i JavaScript → Projekat Logo kreator: sopstveni stilovi i responzivnost

Projekat Logo kreator: sopstveni stilovi i responzivnost

Lekcija 15 od 17 · HTML, CSS i JavaScript

Bootstrap je dao raspored, ali sajt još liči na svaki drugi. U ovoj lekciji pišemo css/main.css: boje sajta na jednom mestu, pozadinsku sliku sa slojem boje, efekte kada je miš iznad elementa i proveru na telefonu. To je deo po kome se tvoj sajt razlikuje od ostalih.

Pre nego što počneš: potrebno predznanje – naslovna strana projekta, box model i pozadine.
Kako da učiš: zadatke na kraju prvo uradi sam/a u svom editoru; uputstvo i rešenje otvori tek posle toga. Svaki primer ima kod i živi rezultat ispod njega; kod prekucaj u svoj fajl i menjaj ga.

1. Boje na jednom mestu: CSS promenljive

/* ===== css/main.css – Logo Kreator ===== */

/* 1. boje sajta na jednom mestu (CSS promenljive) */
:root {
  --lk-crvena: #dd0022;
  --lk-tamna: #1f2a44;
  --lk-svetla: #fff5f6;
}

body { font-family: "Segoe UI", system-ui, Arial, sans-serif; }

Promenljiva se definiše u :root (ceo dokument) sa dve crtice, a koristi se kao var(--lk-crvena). Ako kasnije želiš plavi sajt, menjaš jedan red umesto dvadeset. Prefiks lk- (Logo Kreator) sprečava sudar sa Bootstrap-ovim promenljivama (--bs-...).

2. Pozadina glavnog dela

/* 2. glavni deo: slika u pozadini + providan sloj boje preko nje */
.hero {
  background:
    linear-gradient(135deg, rgba(31, 42, 68, 0.9), rgba(221, 0, 34, 0.75)),
    url("../images/pozadina.jpg") center / cover no-repeat;
  min-height: 60vh;                 /* bar 60% visine ekrana */
  display: flex;
  align-items: center;              /* sadržaj vertikalno u sredini */
}
.hero h1 { text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); }
SvojstvoŠta radi
dve pozadine odvojene zarezomprva (providan prelaz boja) je iznad druge (slike) – tekst je čitljiv na svakoj fotografiji
center / cover no-repeatslika je centrirana, pokriva ceo prostor i ne ponavlja se
min-height: 60vhglavni deo zauzima bar 60% visine ekrana – bez fiksne visine u pikselima
display: flex; align-items: centersadržaj vertikalno u sredini (lekcija Flexbox)

3. Traka, galerija i efekti

/* 3. traka sa koracima */
.traka { background: linear-gradient(90deg, var(--lk-crvena), #ff6b81); }
.korak {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.25rem;
  height: 100%;
  transition: transform 0.2s, background 0.2s;
}
.korak:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.22); }

/* 4. galerija */
#primeri { background: var(--lk-svetla); max-width: none; }
.logo-primer {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s;
}
.logo-primer:hover { transform: scale(1.05); }

transition kaže da se promena ne desi naglo nego za 0,2 sekunde, a transform: translateY(-4px) i scale(1.05) blago podižu i uvećavaju element kada je miš iznad. Mali efekti čine sajt „živim“; previše efekata ga čini napornim.

4. Podnožje i dugme u boji sajta

/* 5. podnožje */
.podnozje { background: var(--lk-tamna); }
.podnozje a { color: #ffd6dc; text-decoration: none; }
.podnozje a:hover { color: #fff; text-decoration: underline; }

/* 6. dugme u boji sajta (Bootstrap 5.3 promenljive dugmeta) */
.btn-danger {
  --bs-btn-bg: var(--lk-crvena);
  --bs-btn-border-color: var(--lk-crvena);
  --bs-btn-hover-bg: #b0001b;
  --bs-btn-hover-border-color: #b0001b;
}

Bootstrap-ovo crveno dugme (btn-danger) dobija tačno našu crvenu menjanjem njegovih promenljivih – kao u lekciji Bootstrap komponente.

5. Telefon i pristupačnost

/* 7. telefon: manji glavni deo i naslov */
@media (max-width: 575.98px) {
  .hero { min-height: auto; }
  .hero h1 { font-size: 2.2rem; }
}

/* 8. korisnici koji ne žele animacije (podešavanje sistema) */
@media (prefers-reduced-motion: reduce) {
  .korak, .logo-primer { transition: none; }
}

Raspored kolona već prilagođava Bootstrap, pa sopstveni media upit treba samo za ono što Bootstrap ne zna – ovde manji naslov i glavni deo na telefonu. Upit prefers-reduced-motion isključuje animacije za korisnike kojima smetaju (podešavanje u sistemu).

Provera: F12 → Ctrl+Shift+M → izaberi telefon (npr. iPhone SE, širina 375px) i prođi kroz celu stranu: da li se sve čita, da li meni radi, da li postoji vodoravno pomeranje?

Kompletan main.css i rezultat

/* ===== css/main.css – Logo Kreator ===== */

/* 1. boje sajta na jednom mestu (CSS promenljive) */
:root {
  --lk-crvena: #dd0022;
  --lk-tamna: #1f2a44;
  --lk-svetla: #fff5f6;
}

body { font-family: "Segoe UI", system-ui, Arial, sans-serif; }

/* 2. glavni deo: slika u pozadini + providan sloj boje preko nje */
.hero {
  background:
    linear-gradient(135deg, rgba(31, 42, 68, 0.9), rgba(221, 0, 34, 0.75)),
    url("../images/pozadina.jpg") center / cover no-repeat;
  min-height: 60vh;                 /* bar 60% visine ekrana */
  display: flex;
  align-items: center;              /* sadržaj vertikalno u sredini */
}
.hero h1 { text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); }

/* 3. traka sa koracima */
.traka { background: linear-gradient(90deg, var(--lk-crvena), #ff6b81); }
.korak {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.25rem;
  height: 100%;
  transition: transform 0.2s, background 0.2s;
}
.korak:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.22); }

/* 4. galerija */
#primeri { background: var(--lk-svetla); max-width: none; }
.logo-primer {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s;
}
.logo-primer:hover { transform: scale(1.05); }

/* 5. podnožje */
.podnozje { background: var(--lk-tamna); }
.podnozje a { color: #ffd6dc; text-decoration: none; }
.podnozje a:hover { color: #fff; text-decoration: underline; }

/* 6. dugme u boji sajta (Bootstrap 5.3 promenljive dugmeta) */
.btn-danger {
  --bs-btn-bg: var(--lk-crvena);
  --bs-btn-border-color: var(--lk-crvena);
  --bs-btn-hover-bg: #b0001b;
  --bs-btn-hover-border-color: #b0001b;
}

/* 7. telefon: manji glavni deo i naslov */
@media (max-width: 575.98px) {
  .hero { min-height: auto; }
  .hero h1 { font-size: 2.2rem; }
}

/* 8. korisnici koji ne žele animacije (podešavanje sistema) */
@media (prefers-reduced-motion: reduce) {
  .korak, .logo-primer { transition: none; }
}

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Logo Kreator – napravi svoj logo</title>
  <meta name="description" content="Besplatan generator jednostavnih logoa: upiši naziv, izaberi boju i oblik i preuzmi sliku.">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!-- 1. MENI -->
  <nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="naslovna.html">LOGO KREATOR</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#meni" aria-label="Otvori meni">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="meni">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="naslovna.html">Naslovna</a></li>
          <li class="nav-item"><a class="nav-link" href="#koraci">Kako radi</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Primeri</a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#primeri">Poslovni</a></li>
              <li><a class="dropdown-item" href="#primeri">Edukacija</a></li>
              <li><a class="dropdown-item" href="#primeri">Sport</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 2. GLAVNI DEO (hero): naslov i forma -->
  <header class="hero text-center text-white">
    <div class="container py-5">
      <h1 class="display-4 fw-bold">Logo Kreator</h1>
      <p class="lead mb-4">Napravi jednostavan logo za minut – besplatno.</p>
      <form class="row g-2 justify-content-center" action="generator.html" method="get">
        <div class="col-12 col-sm-8 col-md-6">
          <label for="naziv" class="visually-hidden">Naziv logoa</label>
          <input type="text" class="form-control form-control-lg" id="naziv" name="naziv"
                 placeholder="Upiši naziv, npr. Sekcija Pupin" maxlength="20" required>
        </div>
        <div class="col-12 col-sm-auto">
          <button type="submit" class="btn btn-danger btn-lg w-100">Kreiraj logo</button>
        </div>
      </form>
    </div>
  </header>

  <main>
    <!-- 3. TRAKA SA KORACIMA -->
    <section id="koraci" class="traka text-white text-center">
      <div class="container py-4">
        <div class="row g-3">
          <div class="col-md-4"><div class="korak"><h2 class="h4">1. Upiši naziv</h2><p class="mb-0">Ime, škola ili klub.</p></div></div>
          <div class="col-md-4"><div class="korak"><h2 class="h4">2. Izaberi stil</h2><p class="mb-0">Boja, oblik i font.</p></div></div>
          <div class="col-md-4"><div class="korak"><h2 class="h4">3. Preuzmi</h2><p class="mb-0">Slika u formatu PNG ili SVG.</p></div></div>
        </div>
      </div>
    </section>

    <!-- 4. PRIMERI LOGOA -->
    <section id="primeri" class="container py-5 text-center">
      <h2 class="mb-4">Primeri kreiranih logoa</h2>
      <div class="row g-4 justify-content-center">
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo1.png" class="img-fluid rounded logo-primer" alt="Crveni okrugli logo sa slovima SP"></div>
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo2.png" class="img-fluid rounded logo-primer" alt="Plavi četvrtasti logo sa slovima IT"></div>
        <div class="col-6 col-md-4 col-lg-3"><img src="images/logo3.png" class="img-fluid rounded logo-primer" alt="Zeleni okrugli logo sa slovima FK"></div>
      </div>
    </section>
  </main>

  <!-- 5. PODNOŽJE -->
  <footer class="podnozje text-white">
    <div class="container py-4">
      <div class="row text-center text-md-start g-3">
        <div class="col-md-4"><h3 class="h6 text-uppercase">Logo Kreator</h3><p class="small mb-0">Projekat iz kursa HTML, CSS i JavaScript.</p></div>
        <div class="col-md-4"><h3 class="h6 text-uppercase">Učenje</h3>
          <a href="https://svetprogramiranja.com">Svet programiranja</a><br><a href="https://petlja.org">Petlja</a></div>
        <div class="col-md-4"><h3 class="h6 text-uppercase">Alati</h3>
          <a href="https://getbootstrap.com">Bootstrap</a><br><a href="https://developer.mozilla.org/sr/">MDN</a></div>
      </div>
      <p class="text-center small mt-3 mb-0">&copy; 2026 Logo Kreator</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Rezultat:

U rezultatu nema prave pozadinske fotografije, pa se vidi samo prelaz boja – sa tvojom slikom images/pozadina.jpg izgled je bogatiji.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

ZADATAK 01Težina: lako

Druga tema u dva reda

Promeni boje sajta u plavu temu (glavna boja #1f6feb, tamna #0d1b2a) menjajući samo promenljive u :root. Šta još mora da se promeni da bi i traka bila plava?

ZADATAK 02Težina: srednje

Tamna tema za galeriju

Dodaj pravila tako da, kada korisnik u sistemu ima uključenu tamnu temu, deo sa primerima ima tamnu pozadinu i svetao naslov.

Česte greške i saveti
  • Putanja do slike u CSS-u je relativna u odnosu na CSS fajl: iz css/main.css do slike je ../images/pozadina.jpg.
  • Ako pravilo ne radi, u F12 proveri da li ga je pregazilo Bootstrap-ovo – i da li je main.css povezan posle Bootstrap-a.
  • Ne koristi fiksne visine (height: 400px) za delove sa tekstom – na telefonu se tekst ne uklapa; koristi min-height i padding.
  • Veličine slova u vw (npr. font-size: 1.2vw) na telefonu postaju sitne – koristi rem ili clamp().

Proveri znanje

Otvori kviz

Sopstveni stilovi

1. Kako se koristi CSS promenljiva --lk-crvena?




2. Kako izgleda putanja do slike iz css/main.css ako je slika u images/?




3. Šta radi transition: transform 0.2s?