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