Moduł 1 - Zajęcia 5 - Dekoratywne efekty i elementy

1.1 Obrazy treści i obrazy dekoracyjne

Na stronie internetowej zawsze znajdują się obrazy. Pomagają one wyrazić treść strony lub po prostu dodają dekoracyjny akcent. Istnieją więc dwa rodzaje obrazów:

1. obrazy treści;
2. obrazy dekoracyjne.

Jaka jest różnica między obrazami treści a obrazami dekoracyjnymi?

Obrazy treści mają znaczenie semantyczne, odnoszą się do treści strony i pomagają w przekazywaniu użytkownikowi użytecznych informacji. Są one dodawane do znaczników HTML za pomocą znacznika <img /> z wypełnionym atrybutem alt, który opisuje obraz.

Przykłady obrazów treści:

• zdjęcie produktu na karcie produktu w sklepie internetowym;
• poster - adres obrazu, który jest używany jako plakat, jeśli wideo nie zostało załadowane lub nie jest jeszcze odtwarzane
• zdjęcia członków zespołu;
• logo firmy;
• banery reklamowe;
• mapy lokalizacji;
• obrazy suwaków.

Obrazy dekoracyjne są używane do dodatkowych celów projektowych. Nie zawierają one żadnych użytecznych informacji i są elementami projektu. Są one dodawane za pomocą CSS jako tło elementu lub, w przypadku grafiki wektorowej, oznaczone znacznikiem <svg> w HTML.

• niestandardowe znaczniki listy;
• ikony pomocnicze;
• nakładki graficzne;
• obrazy tła bloków.

Tło to nie tylko efekt dekoracyjny, ale także pomoc w postrzeganiu idei, wskazówka dotycząca zawartości elementu. Na przykład kolor zielony jest kojarzony z udaną operacją, a czerwony z błędem. Obraz tła pomaga również w przekazywaniu zawartości lub wzbogaceniu wyglądu.

1.2 Właściwość background-image

Właściwość background-image ustawia obraz tła elementu, którego adres jest określony jako argument funkcji url(). Może to być ścieżka względna lub bezwzględna.

            background-image: url(ścieżka do obrazu);
          

Element tła ma zastosowanie tylko do obszaru zawartości i wewnętrznego marginesu, ale nigdy do marginesu zewnętrznego.

Należy od razu ustawić kolor tła i obraz tła, który zawsze będzie umieszczany nad tłem. Na przykład, jeśli obraz nie zostanie załadowany, użytkownik zobaczy przynajmniej kolor tła, który jest podświetlony, a nie puste miejsce. Jest to szczególnie przydatne, jeśli blok zawiera tekst, którego kolor nie kontrastuje z głównym kolorem dokumentu.

            .hero {
              background-color: #2a2a2a;
              background-image: url(ścieżka do obrazu);
            }
          

1.3 Właściwość background-repeat

Właściwość background-repeat kontroluje powtarzanie obrazu tła. Domyślnie jest on powtarzany poziomo (X) i pionowo (Y). Dzieje się tak, jeśli obraz jest mniejszy niż rozmiar elementu.

            background-repeat: repeat | repeat-x | repeat-y | no-repeat
          

• repeat — powtarzanie X i Y. Wartość domyślna.
• repeat-x — powtarzanie tylko X, tj. poziomo.
• repeat-y — powtarzanie tylko Y, tj. pionowo.
• no-repeat — bez powtarzania.

Nawet jeśli wiesz, że obraz jest większy niż rozmiar elementu, dobrym pomysłem jest ustawienie właściwości background-repeat na no-repeat, aby zapobiec niepożądanemu zachowaniu.

            .hero {
              background-color: #2a2a2a;
              background-image: url(ścieżka do obrazu);
              background-repeat: no-repeat;
            }
          

• repeat
• repeat-x
• repeat-y
• no-repeat

1.4 Właściwość background-position

Właściwość background-position kontroluje pozycję obrazu tła względem obramowania elementu, używając dwóch współrzędnych — x w poziomie i y w pionie.

            background-position: x y;
          

Jako wartości możesz używać jednostek bezwzględnych (px) lub względnych (%), a nawet słów kluczowych (top, bottom, right, left, center).

Domyślną wartością jest left dla x i top dla y, tzn. tło jest pozycjonowane względem lewego górnego rogu elementu.

            /* Wyśrodkuje obraz tła */
            background-position: 50% 50%;

            /* Umieści obraz tła na 100px od lewej krawędzi i 200px od góry */
            background-position: 100px 200px;

            /* Umieści obraz tła w prawym dolnym rogu */
            background-position: right bottom;

            /* Umieści obraz tła w lewym górnym rogu */
            background-position: left top;
          

• background-position: 50% 50%;
• background-position: 100px 50px;
• background-position: right bottom;
• background-position: left top;

Aby uniknąć przywiązania do rozmiaru elementu i nie ustawiać pozycji tła na sztywno, możesz użyć składni pozycji z przesunięciem.

            background-position: x przesunięcie-x y przesunięcie-y
          

Na przykład, jeśli chcesz umieścić tło w prawym dolnym rogu elementu o dowolnych wymiarach tak, aby tło znajdowało się 30px od granicy po prawej stronie i 20px od dołu.

            background-position: right 30px bottom 20px;
          

• background-position: top 50% left 50%;
• background-position: top -30px left 50px;
• background-position: right 5% bottom 10%;
• background-position: left 100px top 50px;

1.5 Właściwość background-size

Domyślnie przeglądarka nie zmienia rozmiaru obrazu tła. Jeśli obraz jest większy lub mniejszy niż rozmiar elementu, na ekranie pozostanie puste miejsce niezajmowane przez tło lub odwrotnie, tło będzie widoczne tylko częściowo.

            background-size: auto | wartość | cover | contain
          

Ta właściwość umożliwia dostosowanie wymiarów obrazu poprzez ustawienie wymaganej szerokości i wysokości. Jeśli nie określisz wysokości, zostanie ona obliczona automatycznie przy zachowaniu proporcji.

            /* Wymiary obrazu wyjściowego, wartości domyślne */
            background-size: auto auto;

            /* Szerokość 200px, wysokość będzie proporcjonalna */
            background-size: 200px;

            /* Szerokość 200px, wysokość 300px */
            background-size: 200px 300px;
          

Wartością mogą być również dwa zastrzeżone słowa: cover i contain. Funkcją obu wartości jest maksymalne dopasowanie obrazu tła do elementu, ale na różne sposoby.

• cover — poprzez przycięcie nadmiaru
• contain — poprzez utworzenie pustego miejsca w kontenerze.

Wartość cover:

• Pozwala zachować proporcje obrazu.
• Obraz jest ustawiany na minimalny rozmiar, przy którym wypełni tło całego elementu.
• Jeśli proporcje obrazka i elementu są różne, część obrazka w pionie lub poziomie jest wizualnie przycinana.

Wartość contain:

• Pozwala zachować proporcje obrazu.
• Obrazek jest ustawiany na maksymalny możliwy rozmiar, przy którym całkowicie pasuje do elementu.
• Obrazek może nie pokrywać całego tła elementu w pionie lub poziomie, jeśli proporcje bloku i obrazka nie pasują do siebie.

• background-size: auto;
• background-size: 200px 300px;
• background-size: 80% 60%;
• background-size: 150px;
• background-size: cover;
• background-size: contain;

1.6 Właściwość background-attachment

Właściwość background-attachment określa jak zachowuje się obraz tła elementu podczas przewijania strony.

            background-attachment: scroll|fixed|local|initial|inherit;
          

• scroll (domyślna) - tło przewija się razem z elementem.
• fixed - tło jest przytwierdzone do okna przeglądarki i nie przesuwa się podczas scrollowania strony. Często używane do efektu parallax.
• local - tło przewija się razem z zawartością elementu, a nie z całą stroną. Działa tylko, gdy element ma np. overflow: auto lub scroll.

• background-attachment: scroll

    //1.6
  .galery-background-attachment-list_1-6 {
    --gap: 10px;
    --countImages: 3;
    --countSpace: calc(var(--countImages) - 1);
    --widthImage: calc((100% - (var(--countSpace) * var(--gap))) / var(--countImages));
  
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: 20px 0;
    position: relative;
    text-align: center;
  
    .galery-background-attachment-list-item_1-6 {
      display: flex;
      flex-flow: column;
      width: var(--widthImage);
      border-radius: 4px;
      overflow: auto;
       background-image:
          linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
          url(../../images/image/gory.jpg);
      background-size: cover;
      height: 50vh;
  
      &.background-attachment-scroll_1-6 {
        background-attachment: scroll;
      }
  
      &.background-attachment-fixed_1-6 {
        background-attachment: fixed;
      }
  
      &.background-attachment-local_1-6 {
        background-attachment: local;
      }
  
      .background-attachment-header_1-6 {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 5px;
      }
    }
  }
                

• background-attachment: fixed

    //1.6
  .galery-background-attachment-list_1-6 {
    --gap: 10px;
    --countImages: 3;
    --countSpace: calc(var(--countImages) - 1);
    --widthImage: calc((100% - (var(--countSpace) * var(--gap))) / var(--countImages));
  
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: 20px 0;
    position: relative;
    text-align: center;
  
    .galery-background-attachment-list-item_1-6 {
      display: flex;
      flex-flow: column;
      width: var(--widthImage);
      border-radius: 4px;
      overflow: auto;
       background-image:
          linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
          url(../../images/image/gory.jpg);
      background-size: cover;
      height: 50vh;
  
      &.background-attachment-scroll_1-6 {
        background-attachment: scroll;
      }
  
      &.background-attachment-fixed_1-6 {
        background-attachment: fixed;
      }
  
      &.background-attachment-local_1-6 {
        background-attachment: local;
      }
  
      .background-attachment-header_1-6 {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 5px;
      }
    }
  }
                

• background-attachment: local

    //1.6
  .galery-background-attachment-list_1-6 {
    --gap: 10px;
    --countImages: 3;
    --countSpace: calc(var(--countImages) - 1);
    --widthImage: calc((100% - (var(--countSpace) * var(--gap))) / var(--countImages));
  
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: 20px 0;
    position: relative;
    text-align: center;
  
    .galery-background-attachment-list-item_1-6 {
      display: flex;
      flex-flow: column;
      width: var(--widthImage);
      border-radius: 4px;
      overflow: auto;
       background-image:
          linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
          url(../../images/image/gory.jpg);
      background-size: cover;
      height: 50vh;
  
      &.background-attachment-scroll_1-6 {
        background-attachment: scroll;
      }
  
      &.background-attachment-fixed_1-6 {
        background-attachment: fixed;
      }
  
      &.background-attachment-local_1-6 {
        background-attachment: local;
      }
  
      .background-attachment-header_1-6 {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 5px;
      }
    }
  }
                

.background-attachment-main-container_1-6 {
  position: relative;
  height: 50vh;
  margin: 40px 0;
  overflow: auto;

  .background-attachment-container_1-6 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../../images/image/gory.jpg);
    background-color: rgba(0, 0, 0, 1);
    background-size: cover;
    background-attachment: fixed;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.1);
      transition: opacity 1.4s ease, background-color 1.4s ease;
    }

    &:hover::before {
      // opacity: 0.4;
      background-color: rgba(0, 0, 0, 0.7);
    }
  }

  .background-attachment-text-container_1-6 {
    position: relative;

    .background-attachment-header_1-6 {
      position: sticky;
      top: 0;
      text-align: center;
      background-image: linear-gradient(to bottom, #6a11cb 0%, #2575fc 100%);
    }

    .background-attachment-text_1-6 {
      color: white;
    }
  }
}
                

                    position: absolute | relative | fixed | sticky.
                  

                    top: ...;
                    right: ...;
                    bottom: ...;
                    left: ...;
                  

                    inset: top right bottom left;
                  

                    inset: 10px 20px 30px 40px;
                  

                    top: 10px;
                    right: 20px;
                    bottom: 30px;
                    left: 40px;
                  

                    inset: 0;
                  

                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                  

                    .overlay {
                      position: absolute;
                      inset: 0;
                    }
                  

                    .box {
                      position: absolute;
                      inset: 20px;
                    }
                  

1.7 Właściwość background-image kilka

Możliwe jest ustawienie kilku obrazów tła dla elementu w tym samym czasie, wystarczy po prostu wymienić je we właściwości background-image, oddzielając przecinkami. Dla każdego obrazu możesz również ustawić wartości innych właściwości tła, również oddzielonych przecinkami w każdej właściwości.

            background-image: url(ścieżka do obrazu 1), url(ścieżka do obrazu 2);
            background-size: 100px, cover;
            background-position: top right, center;
            background-repeat: repeat-x, no-repeat;
          

Jest to swego rodzaju ciasto francuskie składające się z kilku obrazów. Obraz znajdujący z przodu listy zostanie umieszczony wyżej (obraz 1 w powyższym kodzie).

Wskazówka W większości przypadków wielowarstwowe tło można zastąpić pojedynczym obrazem, który został połączony ze wszystkimi innymi w specjalnym edytorze. Waga takiego pliku będzie mniejsza niż całkowita waga poszczególnych obrazów, a przeglądarka będzie musiała wykonać tylko jedno żądanie zamiast pięciu, co również zwiększy szybkość ładowania i wyświetlania strony.

• .background-image-few-first_1-7{
    background-image:
    url(../../images/image/biurkoStatystyki1_100x94.png),
    url(../../images/image/biurkoStatystyki1.jpg); background-position: right bottom, center;
    background-size: auto, cover;
  }
                

• .background-image-few-second_1-7 {
    background-image: url(../../images/image/biurkoStatystyki2.jpg), url(../../images/image/biurkoStatystyki2.jpg);
    background-position: top left, center;
    background-size: contain, cover;
  }
                

• .background-image-few-third_1-7 {
    background-image: url(../../images/image/biurkoStatystyki3.jpg), url(../../images/image/biurkoStatystyki3.jpg);
    background-position: top left, center;
    background-size: contain, cover;
  }
                

• .background-image-few-fourth_1-7 {
    background-image: url(../../images/image/biurkoStatystyki4.jpg), url(../../images/image/biurkoStatystyki4.jpg);
    background-position: top left, center;
    background-size: contain, cover;
  }
                

1.8 Gradient

Gradient — to przejście od jednego koloru do drugiego. W CSS gradient jest obrazem tła, więc jest ustawiany jako wartość właściwości background-image. Gradient liniowy jest tworzony przy użyciu dwóch lub więcej kolorów, które mają określony kierunek rozchodzenia się.

Format wartości koloru może być dowolny: słowa kluczowe, rgb, rgba lub hex i mogą być też mieszane.

            background-image: linear-gradient(
              <kierunek>,
              <kolor-1>,
              <kolor-2>,
              <kolor-3>,
              ...
            )
          

Kierunek gradientu jest określany przez słowa kluczowe to top, to right, to bottom, to left i ich kombinacje. Jeśli kierunek nie jest określony, używana jest wartość domyślna — od góry do dołu (to bottom). Jeśli kierunek jest określony przez parę słów kluczowych, na przykład to top left, punkt początkowy gradientu będzie znajdował się w prawym dolnym rogu, tj. przeciwnym.

Kierunek może być również określony przez kąt nachylenia w stopniach, jednostką jest deg. Wartość 0deg jest taka sama jak to top. Zwiększenie kąta odwraca kierunek linii gradientu. Linia gradientu jest linią prostą przechodzącą przez środek bloku, która rozprowadza kolory w kierunku zgodnym z ruchem wskazówek zegara.

W tej animacji kąt wzrasta od 0 do 360 stopni w krokach co 10 stopni. Niska rozdzielczość pozwala lepiej zobaczyć, jak różne kolory pojawiają się jako "linie", które są zawsze prostopadłe do linii gradientu.

Jako że gradient jest obrazem tła, przyjrzyjmy się technice podwójnego tła, w której warstwa koloru z przezroczystością jest umieszczana nad obrazem.

            background-image: linear-gradient(
              to bottom,
              rgba(255, 0, 0, 0.3),
              rgba(255, 0, 0, 0.3)
              ),
              url(ścieżka do obrazu);
          

Pierwszą górną warstwą będzie gradient z przezroczystością i użyjemy tej samej początkowej i końcowej wartości koloru.

• .background-gradient-no-gradient1_1-8 {
    background-image: url(../../images/image/biurkoKluczyki1.jpg);
    background-position: center;
    background-size: cover;
  }
                

• .background-gradient-with-gradient1_1-8 {
    background-image: linear-gradient(to bottom,
        rgba(255, 0, 0, 0.3),
        rgba(255, 0, 0, 0.3)),
        url(../../images/image/biurkoKluczyki1.jpg);
    background-position: top left, center;
    background-size: contain, cover;
  }
               

• .background-gradient-no-gradient2_1-8 {
    background-image: url(../../images/image/biurkoKluczyki2.jpg);
    background-position: center;
    background-size: cover;
  }
                

• .background-gradient-with-gradient2_1-8 {
    background-image: linear-gradient(90deg,
    rgba(42, 123, 155, 0.5) 0%,
    rgba(87, 199, 133, 0.5) 50%,
    rgba(237, 221, 83, 0.5) 100%),
    url(../../images/image/biurkoKluczyki2.jpg);
    background-position: center, center;
    background-size: cover;
  }
                

1.9 Właściwość background - złożona

Właściwość background jest złożoną właściwością służącą do jednoczesnego ustawiania wartości wszystkich rozważanych właściwości.

            background: background-color background-image background-repeat background-position background-attachment
          

Jeśli komponent nie jest określony, używana jest jego wartość domyślna.

            /* Ustawi tylko kolor tła */
            background: #2a2a2a;

            /* Przezroczysty kolor tła z obrazem powtarzającym się wzdłuż x, zaczynając od lewego górnego rogu.. */
            background: url(ścieżka do obrazu) repeat-x;
          

Zaleca się używanie, przynajmniej na początku, oddzielnych właściwości dla każdej wartości, ponieważ w przypadku złożonej właściwości background łatwo o pomyłki.

1.10 Właściwość background-blend-mode

Właściwość background-blend-mode w CSS określa w jaki sposób wiele warstw tła (kolory, gradienty, obrazy) są ze sobą mieszane (blendowane) - bardzo podobnie jak tryby mieszania w Photoshopie.

Do czego służy background-blend-mode

Gdy masz więcej niż jedno tło:

            background-image:
              linear-gradient(...),
              url(image.jpg);
          

to background-blend-mode decyduje jak te warstwy na siebie wpływają.

Podstawowa składnia:

            background-blend-mode: multiply;
          

lub dla wielu teł:

            background-blend-mode: multiply, overlay;
          

Kolejność odpowiada kolejności background-image.

Najczęściej używane tryby

• normal (domyślny) [background-blend-mode: normal] : Brak mieszania - warstwa jest po prostu nałożona.
• multiply (najczęściej używany) [background-blend-mode: multiply] : przyciemnia obraz czarny → czarny biały → brak wpływu. Idealny do: przyciemniania zdjęć overlay pod tekst
• overlay [background-blend-mode: overlay] : wzmacnia kontrast, jasne robi jaśniejsze, ciemne ciemniejsze
• screen [background-blend-mode: screen] : rozjaśnia obraz, czarny nie ma wpływu
• darken [background-blend-mode: darken] : zostawia ciemniejsze piksele.
• lighten [background-blend-mode: lighten] : zostawia jaśniejsze piksele.
• color [background-blend-mode: color] : zachowuje jasność obrazu, zmienia tylko kolor
• luminosity [background-blend-mode: luminosity] : zachowuje kolor, miesza jasność

Obsługiwane wartości (pełna lista)

            normal | multiply | screen | overlay | darken | lighten |
            color-dodge | color-burn |
            hard-light | soft-light |
            difference | exclusion |
            hue | saturation | color | luminosity
          

Kiedy używać?

• przyciemnianie zdjęć pod tekst
• kolorowanie zdjęć gradientem
• efekty wizualne bez JS
• zamiast ::before + opacity

• background-blend-mode: normal

    .galery-background-blend-mode-list-item_1-10 {
      position: relative;
      display: flex;
      flex-flow: column;
      width: var(--widthImage);
      border-radius: 4px;
      overflow: auto;
      background-image:
        linear-gradient(rgba(4, 29, 250, 0.5),
          rgba(4, 29, 250, 0.5)),
        url(../../images/image/gory.jpg);
      background-size: cover;
      background-position: top;
      height: 40vh;
  
      &.background-blend-mode-normal_1-10 {
        background-blend-mode: normal;
        font-size: 0.5rem;
      }
  
      &.background-blend-mode-multiply_1-10 {
        background-blend-mode: multiply;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      &.background-blend-mode-overlay_1-10 {
        background-blend-mode: overlay;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      &.background-blend-mode-screen_1-10 {
        background-blend-mode: screen;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      &.background-blend-mode-darken_1-10 {
        background-blend-mode: darken;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      &.background-blend-mode-lighten_1-10 {
        background-blend-mode: lighten;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      &.background-blend-mode-color_1-10 {
        background-blend-mode: color;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      &.background-blend-mode-luminosity_1-10 {
        background-blend-mode: luminosity;
  
        &:hover {
          background-blend-mode: normal;
        }
      }
  
      .background-blend-mode-header_1-10 {
        position: sticky;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        text-align: center;
      }
    }
  }
                

• background-blend-mode: multiply

  multiply (najczęściej używany) [background-blend-mode: multiply] : przyciemnia obraz czarny → czarny biały → brak wpływu. Idealny do: przyciemniania zdjęć overlay pod tekst

• background-blend-mode: overlay

  overlay [background-blend-mode: overlay] : wzmacnia kontrast, jasne robi jaśniejsze, ciemne ciemniejsze

• background-blend-mode: screen

  screen [background-blend-mode: screen] : rozjaśnia obraz, czarny nie ma wpływu

• background-blend-mode: darken

  darken [background-blend-mode: darken] : zostawia ciemniejsze piksele.

• background-blend-mode: lighten

  lighten [background-blend-mode: lighten] : zostawia jaśniejsze piksele.

• background-blend-mode: color

  color [background-blend-mode: color] : zachowuje jasność obrazu, zmienia tylko kolor

• background-blend-mode: luminosity

  luminosity [background-blend-mode: luminosity] : zachowuje kolor, miesza jasność

1.11 Właściwość background-origin

Właściwość background-origin mówi przeglądarce od którego obszaru elementu ma się zaczynać tło (background-image). Czyli skąd liczyć pozycję i rozmiar tła.

Każdy element ma (od środka na zewnątrz):

1. padding-box (domyślna) - treść + padding
2. content-box - treść (tekst, obrazki)
3. border-box - treść + padding + border

Co dokładnie robi background-origin: background-origin określa punkt startowy tła: gdzie zaczyna się rysowanie tła i od jakiego obszaru liczona jest pozycja background-position ⚠️ Dotyczy tylko obrazów tła, nie kolorów (background-color).

• background-origin: padding-box (domyślne)

  tło zaczyna się od wewnętrznej krawędzi bordera border nie jest wypełniany obrazem najczęściej używane

  [border ❌][padding ✅][content ✅]

• background-origin: content-box

  tło zaczyna się dopiero od treści, padding i border są "puste"

  [border ❌][padding ❌][content ✅]

• background-origin: border-box

  tło wchodzi pod border obraz rysowany od zewnętrznej krawędzi

  [border ✅][padding ✅][content ✅]

1.12 Właściwość background-clip

Właściwość background-clip mówi przeglądarce do jakiego obszaru elementu tło ma być przycięte (czyli gdzie ma być widoczne).

• background-clip: padding-box

  Tło jest widoczne w obszarze paddingu i treści, ale nie w ramce.

  [border ❌][padding ✅][content ✅]

• background-clip: content-box

  Tło jest ograniczone wyłącznie do obszaru treści.

  [border ❌][padding ❌][content ✅]

• background-clip: border-box (domyślne)

  Tło obejmuje ramkę, padding oraz treść elementu.

  [border ✅][padding ✅][content ✅]

• Obraz - emotikony

  📊 📉 📈 📅 📆 🗓️ 📅 📄 ⛔ ⚠️ 🖨️ 🖥️ 💽 💾 💿 📀 📔 📕 📖 📗 📘 📚 📓 📒 📃 📜 📄 📄 📑 📝 🖊️ 📧 📫 🎫 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🟡 🟢 🟠 🔵 🟣 🟤 ⚫ ⚪ 📏 🛠️ 📐 ⚙️ ↕️ 🔁 🧍🧍‍♂️

• Tekst

  🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡🟡

• background-clip: border-box

  Do gradientu tekstu

2.1 Cień elementu

• no shadow
• with shadow

Istnieją cienie zewnętrzne i wewnętrzne, rozmyte i płaskie, jedno- i wielowarstwowe.

Oczywiście projektant, który tworzy layout, doskonale zna wszystkie te niuanse, ale deweloper musi dokładnie przenieść wszystkie efekty layoutu na stronę. Musi więc również rozumieć, z czego składa się cień i jak odtworzyć go w kodzie.

Właściwość box-shadow ustawia jeden lub więcej cieni dla elementu. Domyślnie rozmiar cienia jest taki sam jak rozmiar elementu, a jego kolor jest taki sam jak kolor tekstu.

            box-shadow: <x-offset> <y-offset> <blur> <spread> <color>
          

• x-offset - przesunięcie poziome. Wartość dodatnia przesuwa cień w prawo od bloku, a wartość ujemna w lewo. Wymagana wartość.
• y-offset - przesunięcie pionowe. Wartość dodatnia przesuwa cień w dół od bloku, a wartość ujemna w górę. Wymagana wartość.
• blur - rozmycie cienia. Wartość zero oznacza brak rozmycia. Wartości dodatnie powodują rozmycie cienia. Wartość opcjonalna.
• spread - rozszerzenie cienia. Wartość zero oznacza brak rozszerzenia. Wartości dodatnie powodują rozszerzenie cienia. Wartość opcjonalna.
• color - kolor cienia. Domyślnie kolor tekstu. Wartość opcjonalna.

2.2 Cień elementu - wiele cieni

            box-shadow: <x-offset> <y-offset> <blur> <spread> <color>,
            <x-offset> <y-offset> <blur> <spread> <color>,
            <x-offset> <y-offset> <blur> <spread> <color>,
            ...
          

Wygląda to jak wielowarstwowy placek. Pierwszy cień na liście jest umieszczony na górze, a ostatni na samym dole. Oznacza to, że każdy poprzedni cień na liście jest umieszczany na wyższej warstwie i wizualnie nakłada się na wszystkie kolejne. Takie podejście pozwala tworzyć bardzo miękkie i piękne cienie.

• no multiple shadow
• with multiple shadow

2.3 Cień elementu - inset

Jeśli cień zewnętrzny wizualnie podnosi element, cień wewnętrzny pozwala dodać efekt głębi poprzez wizualne pogłębienie elementu. Składnia deklarowania wewnętrznego cienia jest podobna do składni zwykłego cienia, ale pierwsza wartość musi być inset.

            box-shadow: inset <x-offset> <y-offset> <blur> <spread> <color>
          

Przesuwanie, rozmycie i rozprzestrzenianie się cienia odbywa się wewnątrz elementu i jest wizualnie ograniczone przez jego obramowanie.

• no shadow
• with inset shadow
• with inset shadow
• with inset shadow
• with shadow
• with shadow
• transition
• with shadow

• Nagłówek 1: dłuższy

  .galery-gradient-shadow-list_2-3 {
    --gap: 40px;
    --countImages: 4;
    --countSpace: calc(var(--countImages) - 1);
    --widthSize: calc((100% - (var(--countSpace) * var(--gap))) / var(--countImages));
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    color: black;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 140px;
    font-size: 1rem;
  }
                

• Nagłówek 2: krótszy

  .galery-gradient-shadow-list-item_2-3 {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    width: var(--widthSize);
    aspect-ratio: 1 / 0.66;
    height: auto;
    border-radius: 4px;
    overflow: auto;
    transition: box-shadow 1.3s ease;
  }
                

• Nagłówek 3: dłuższy dwa razy

  .header_2-3 {
    position: sticky;
    top: 0;
    padding: 10px;
    text-align: center;
  }
                

• Nagłówek 4

  Lorem ipsum, dolor sit amet consectetur

• with gradient shadow
• with gradient shadow
• transition
• with gradient shadow

7.1 Filmy

Efekty graficzne. Animacja

Efekty graficzne. Animacja 2