chevron-left chevron-right

[CSS] Jak zrobić gradient w paski za pomocą CSS?

W dzisiejszym artykule poznasz sposoby na utworzenie gradientu w paski, co może być przydatne w różnych sytuacjach. Swego czasu pisałem o tym jak utworzyć gradient za pomocą CSS, a to będzie jego rozszerzenie.

Podstawowy sposób wykorzystania gradientu w paski

Gradient w paski jest łatwy do osiągnięcia za pomocą właściwości CSS repeating-linear-gradient():

1
2
3
4
5
6
7
8
9
background: repeating-linear-gradient(
  45deg,
  #bb3300,
  #bb3300 10px,
  #852400 10px,
  #852400 20px,
  #f04100 20px,
  #f04100 30px
);

Jak widać, użycie tej właściwości jest proste. Najpierw definiujemy kąt nachylenia gradientu, a następnie kolejne kolory (odcienie czerwonego). Warto zauważyć, że pierwsza wartość z danym kolorem odpowiada za ustalenie pozycji początkowej koloru, a kolejna pozycję końcową. Można na przemian definiować kolejne kolory, które będą po sobie następować. Należy pamiętać o tym aby nie definiować pozycji za pomocą procentów, np. 10%, 100%. Bo gradient będzie obliczał pozycję koloru względem długości całego elementu do którego przypisano gradient. Efekt wygląda następująco:

Gradient ukośny w paski

Inne sposoby wykorzystania gradientu w paski

  1. 2 typy gradientów na raz

    Gradienty możemy na siebie nakładać, co może skutkować bardzo ciekawymi efektami. W 2010 roku napisałem o sposobach nakładania na siebie różnych teł za pomocą CSS i stosowanie wielu gradientów na jednym elemencie wygląda bardzo podobnie:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      #852400 20px,
      #f04100 20px,
      #f04100 30px
    ),
    linear-gradient(
      to bottom,
      #eee,
      #999
    );

    Jak można zauważyć, wykorzystano 2 różnej gradienty. Kolejne gradienty nakładają się na siebie, tzn. pierwszy gradient będzie znajdował się na samej górze. Drugi z nich będzie się znajdował pod pierwszym, itd.
    Końcowy efekt będzie wyglądał następująco:

    Wykorzystanie 2-ch gradientów na raz - efekt końcowy
  2. Paski nad tłem obrazka

    W podobny sposób jak wyżej można mieszać ze sobą gradienty i obrazki tła:

    1
    2
    3
    4
    5
    6
    7
    8
    
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 0, 0, 0.2),
        rgba(0, 255, 0, 0.5) 10px,
        rgba(0, 0, 0, 0.7) 10px,
        rgba(0, 0, 0, 0.3) 20px
      ),
      url('img/obrazek.jpg');

    Gradient nałoży się na tło obrazkowe i efekt końcowy wygląda następująco:

    Gradient nałożony na obrazek
  3. Poziome paski

    Kolejną rzeczą jaką można osiągnąć za pomocą funkcjonalności generowania gradientów w CSS są poziome paski. Należy zwrócić uwagę, że tym razem będziemy wykorzystywać inne właściwości niż poprzednio:

    1
    2
    3
    4
    5
    6
    7
    8
    
    background: linear-gradient(
      to bottom,
      #333,
      #333 50%,
      #eee 50%,
      #eee
    );
    background-size: 100% 20px;

    W uzyskaniu efektu poziomych pasków wykorzystaliśmy standardowy zapis gradientu, czyli linear-gradient() oraz strong>background-size. Za pomocą pierwszej właściwości wygenerowaliśmy gradient w paski a za pomocą drugiej własności określiliśmy wymiary gradientu, który przyjął wymiary 100% szerokości i 20 pikseli wysokości. Jeśli element na który nałożono taki gradient jest wyższy to gradient będzie się powtarzał. Końcowy efekt może wyglądać następująco:

    Gradient w poziome paski
  4. Pionowe paski

    Pionowe paski możemy zrobić na 2 sposoby, za pomocą: repeating-linear-gradient() lub linear-gradient().

    Sposób pierwszy - repeating-linear-gradient()
    1
    2
    3
    4
    5
    6
    7
    
    background: repeating-linear-gradient(
      to right,
      #bb3300,
      #bb3300 10px,
      #852400 10px,
      #852400 20px
    );
    Sposób drugi - linear-gradient()
    1
    2
    3
    4
    5
    6
    7
    8
    
    background: linear-gradient(
      to right,
      #bb3300,
      #bb3300 50%,
      #852400 50%,
      #852400
    );
    background-size: 20px 100%;

    Kwestię wyboru sposobu, którego użyjesz, pozostawiam Tobie. Efekt końcowy w obu przypadkach wygląda następująco:

    Gradient w pionowe paski
  5. Radialny gradient w paski

    Oprócz gradientów w proste paski można robić również gradienty w okręgi. Tym samym można będzie uzyskać efekt hipnotyzera. Kod dla tego efektu wygląda następująco:

    1
    2
    3
    4
    5
    6
    7
    
    background: repeating-radial-gradient(
      circle,
      #bb3300,
      #bb3300 10px,
      #852400 10px, 
      #852400 20px
    );

    Tutaj należy zwrócić uwagę na zastosowanie dyrektywy circle i to ona powoduje uzyskanie efektu kręgów.

    Gradient radialny w paski

Podsumowanie

Mam nadzieję, że dzisiejszy wpis będzie dla Ciebie użyteczny. Jak dla mnie możliwość generowania pasiastych gradientów to kapitalna sprawa, ponieważ dzięki temu będzie można uniknąć korzystania z obrazków w celu uzyskania tego samego efektu. To pozwoli na zaoszczędzenie na wadze strony i przyspieszenie jej ładowania.

źródło

  • Takie paskowate gradienty świetnie komponują się z CSS animations 😉