Tła, Obramowania i Cienie

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się responsive design.

Twój layout rozumie już telefony.

Bardzo dobrze.

Dzisiaj sprawimy, że wszystko będzie wyglądało bardziej dopracowanie.

Nie przesadnie ozdobione.

Nie w stylu: “odkryłem 47 efektów i użyłem wszystkich przed śniadaniem.”

Dopracowane.

Będziemy pracować z:

backgrounds;
borders;
border radius;
shadows;
cards;
buttons;
visual hierarchy.

To małe detale, które sprawiają, że strona wygląda na skończoną.

Bez nich website może działać idealnie, ale nadal wyglądać tak, jakby był projektowany podczas awarii prądu.

Czego Się Nauczysz

W tej lekcji nauczysz się:

jak używać background-color;
jak używać background-image;
jak tworzyć gradients;
jak używać borders;
jak zaokrąglać rogi za pomocą border-radius;
jak używać box-shadow;
jak stylować cards i buttons;
jak unikać przesadnego dekorowania strony.

Dlaczego Visual Polish Ma Znaczenie

CSS nie dotyczy tylko layoutu.

Layout decyduje, gdzie rzeczy się znajdują.

Visual polish decyduje, jak się czują.

Prosta card działa.

Dopracowana card wygląda celowo.

Przykład:

.card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

Ta prosta kombinacja może sprawić, że sekcja wygląda nowocześnie i czysto.

Ale uważaj.

Za dużo shadow i za dużo borders może sprawić, że strona będzie wyglądała jak stos unoszących się plastikowych tacek.

CSS daje moc.

Używaj jej jak dorosły.

Przynajmniej w większości przypadków.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson8
cd css-lesson8
touch index.html
touch style.css

Powinieneś mieć:

css-lesson8/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Zbudujemy małą stronę services z cards i hero section.

To praktyczne.

Możesz użyć tego patternu dla:

web services;
course cards;
portfolio projects;
pricing sections;
landing pages.

Czyli wszędzie tam, gdzie website musi przestać wyglądać jak surowy HTML w skarpetkach.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tła, Obramowania i Cienie</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">PolishCSS</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Usługi</a>
        <a href="#">Projekty</a>
        <a href="#">Kontakt</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Visual Design</p>
      <h2>Spraw, Żeby Twój Layout Wyglądał na Skończony</h2>
      <p>
        Backgrounds, borders i shadows pomagają stronie wyglądać czyściej, bardziej strukturalnie i profesjonalnie.
      </p>
      <a href="#" class="button">Poznaj Style</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Małe Detale, Duża Różnica</h2>
      <p>
        Dobre detale wizualne prowadzą użytkownika. Oddzielają content, tworzą głębię i sprawiają, że strona jest łatwiejsza do zrozumienia.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Backgrounds</h2>
        <p>Używaj kolorów tła, obrazów i gradients, aby stworzyć atmosferę.</p>
      </article>

      <article class="card featured">
        <h2>Borders</h2>
        <p>Używaj borders, aby oddzielać content i podkreślać ważne obszary.</p>
      </article>

      <article class="card">
        <h2>Shadows</h2>
        <p>Używaj shadows ostrożnie, aby stworzyć głębię bez efektu, że wszystko zaraz odleci.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki backgrounds, borders i shadows.</p>
  </footer>
</body>
</html>

To daje nam:

hero section;
navigation;
hero text;
button;
intro card;
trzy content cards;
footer.

Teraz możemy sprawić, że będzie wyglądało mniej jak szkielet, a bardziej jak prawdziwa web page.

Bez obrazy dla szkieletów.

One robią ważną robotę.

Zacznij od Bazowego CSS

Otwórz style.css i dodaj:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

To daje nam czysty punkt startowy.

Strona ma:

przewidywalne rozmiary;
brak domyślnego body margin;
prosty font;
jasne tło;
czyste links.

Teraz możemy dodać visual polish.

Powoli.

Jak przyprawianie zupy.

Nie jak wrzucenie całego pojemnika soli do garnka.

Background Color

Property background-color ustawia tło elementu.

Przykład:

body {
  background-color: #f3f4f6;
}

Możesz używać jej na sections:

.hero {
  background-color: #111827;
}

Dodaj to:

.hero {
  background-color: #111827;
  color: white;
}

Teraz hero ma ciemne tło.

To tworzy contrast.

Hero wygląda jak mocna sekcja otwierająca.

Dobre hero powinno mówić:

“Witaj.”

A nie:

“HTML przypadkowo mnie tutaj położył.”

Background Gradients

CSS może tworzyć gradients bez obrazów.

Przykład:

background: linear-gradient(135deg, #111827, #1e3a8a);

Dodaj to do .hero:

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

Teraz hero background przechodzi od ciemnoszarego do niebieskiego.

Subtelne gradients mogą wyglądać nowocześnie.

Ale nie przesadzaj.

Gradient powinien szeptać.

Nie wchodzić w okularach przeciwsłonecznych i krzyczeć: “Jestem design!”

Wystylizuj Navbar

Dodaj:

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Teraz navigation jest wyrównana.

Logo jest po lewej.

Links są po prawej.

Znasz to już z poprzednich lekcji.

CSS nie zawsze jest nowym chaosem.

Czasem to stary chaos w lepszej kurtce.

Wystylizuj Hero Content

Dodaj:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

Hero ma teraz:

centered content;
duży heading;
małą uppercase label;
readable paragraph.

letter-spacing daje label bardziej czysty wygląd.

Używaj tego ostrożnie.

Za dużo letter spacing sprawia, że słowa wyglądają, jakby powoli odchodziły od siebie.

Borders

Borders tworzą widoczne oddzielenie.

Przykład:

.card {
  border: 2px solid #e5e7eb;
}

Border ma:

width;
style;
color.

Przykład:

border: 2px solid #e5e7eb;

Możesz używać borders na cards, buttons, sections i images.

Borders są użyteczne.

Ale zbyt dużo borders może sprawić, że design będzie ciężki.

Border powinien pomagać użytkownikowi zrozumieć strukturę.

Nie sprawiać, że strona wygląda jak więzienie ze spreadsheet.

Border Radius

border-radius zaokrągla rogi.

Przykład:

.card {
  border-radius: 18px;
}

Dodaj style dla page i cards:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
}

Teraz cards wyglądają łagodniej i bardziej nowocześnie.

Ostre rogi nie są złe.

Ale rounded corners często wyglądają przyjaźniej.

Jakby strona wypiła kawę i zdecydowała, że nie będzie agresywna.

Box Shadow

Property box-shadow dodaje cień za elementem.

Przykład:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

Wartości oznaczają:

horizontal offset
vertical offset
blur
color

Przykład:

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

To oznacza:

brak przesunięcia poziomego;
cień przesunięty 10px w dół;
blur cienia 25px;
czarny kolor z małą opacity.

Dodaj:

.intro-card,
.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Teraz cards mają subtelną głębię.

Subtelny to słowo klucz.

Shadow powinien wspierać design.

Nie wyglądać, jakby card próbowała uciec z ziemskiej grawitacji.

Featured Card

Sprawmy, żeby jedna card się wyróżniała.

Dodaj:

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

To daje featured card:

blue border;
light blue background.

Prosto.

Czytelnie.

Bez krzyku.

Featured element powinien być zauważalny.

Nie zachowywać się, jakby wygrał konkurs neonowych kostiumów.

Button Styling

Teraz wystylizuj button.

Dodaj:

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.button:hover {
  transform: translateY(-2px);
}

Ten button ma:

white background;
blue text;
rounded shape;
shadow;
mały hover movement.

Hover effects mogą sprawić, że buttons czują się interaktywne.

Ale nie każ im skakać jak nerwowe żaby.

Mały ruch wystarczy.

Dodaj Transitions

Hover movement będzie wyglądał lepiej z transition.

Dodaj:

.button,
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

Teraz cards delikatnie unoszą się przy hover.

To daje przyjemne interactive feel.

Znowu: subtelnie.

Jeśli każda card skacze dramatycznie, strona zaczyna wyglądać jak park trampolin.

Fajne dla dzieci.

Nie zawsze idealne dla web design.

Pełny CSS

Twój style.css powinien wyglądać tak:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.intro-card h2,
.card h2 {
  margin-top: 0;
}

.intro-card p,
.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Zapisz plik.

Odśwież browser.

Powinieneś teraz zobaczyć:

gradient hero;
styled navigation;
rounded cards;
subtle shadows;
featured card;
polished button;
hover effects;
responsive layout.

Strona powinna wyglądać bardziej complete.

Nie dlatego, że dodaliśmy przypadkowe dekoracje.

Tylko dlatego, że użyliśmy visual details z sensem.

To różnica między designem a rzucaniem CSS confetti.

Częste Błędy

Za Dużo Shadow

Źle:

.card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

To jest zbyt mocne dla normalnej card.

Wygląda dramatycznie.

Zbyt dramatycznie.

Jakby card miała sekretną villain identity.

Lepiej:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Małe shadows zwykle wystarczą.

Za Dużo Borders

Borders są użyteczne, ale nie wszystko potrzebuje border.

Jeśli każda section, card, image, button, heading i paragraph ma border, strona robi się noisy.

Używaj borders, żeby wyjaśniać strukturę.

Nie po to, żeby zamykać każdy element w klatce jak małe cyfrowe zwierzę.

Słaby Contrast

Nie dawaj low-contrast text na kolorowych backgrounds.

Źle:

.hero p {
  color: #9ca3af;
}

na ciemnoniebieskim background może być za słabe.

Lepiej:

.hero p {
  color: #dbeafe;
}

Najpierw readable.

Potem pretty.

Pretty but unreadable to tylko decorative confusion.

Praktyka

Stwórz services section z trzema cards.

Każda card powinna mieć:

title;
short paragraph;
border;
border radius;
subtle shadow;
hover effect.

Zrób jedną card featured.

Użyj:

background-color;
border;
border-radius;
box-shadow;
transition;
transform.

Utrzymaj design clean.

Nie dekoruj wszystkiego jak tort urodzinowy walczący z tęczą.

Mini Wyzwanie

Stwórz pricing section z trzema plans:

Basic;
Standard;
Premium.

Użyj:

white card backgrounds;
subtle shadows;
rounded corners;
blue border dla Premium;
button w każdej card;
hover effect na cards i buttons.

Zrób ją responsive:

trzy columns na desktop;
dwie columns na tablet;
jedna column na phone.

To realny landing page pattern.

Możesz użyć go dla swoich services.

Tak, to jest użyteczne.

CSS wreszcie płaci czynsz.

Podsumowanie

Dzisiaj nauczyłeś się, że:

background-color ustawia backgrounds elementów;
gradients mogą tworzyć nowoczesne hero sections;
borders pomagają oddzielać i wyróżniać content;
border-radius zaokrągla rogi;
box-shadow tworzy głębię;
shadows zwykle powinny być subtelne;
hover effects sprawiają, że elementy czują się interaktywne;
transitions sprawiają, że zmiany są płynniejsze;
visual polish powinien wspierać usability;
dekoracja bez celu staje się noise.

Dobry design nie polega na dodawaniu więcej.

Polega na dodawaniu właściwych rzeczy.

Mały shadow.

Czysty border.

Dobry background.

Wystarczający spacing.

Często to wszystko, czego potrzeba.

CSS nie musi krzyczeć.

Czasem musi tylko uczesać włosy.

Następna Lekcja

W następnej lekcji nauczymy się transitions i prostych animations.

Sprawimy, że elementy będą poruszać się płynnie.

Nie jak cyrk.

Jak profesjonalna strona z dobrymi manierami.