[CSS] Jak zrobić gradient w paski za pomocą CSS?
This post is 12 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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.
Section 1Podstawowy 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:
Section 2Inne sposoby wykorzystania gradientu w paski
-
Section 2.12 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:
Example 2CSS 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:
-
Section 2.2Paski nad tłem obrazka
W podobny sposób jak wyżej można mieszać ze sobą gradienty i obrazki tła:
Example 3CSS 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:
-
Section 2.3Poziome 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:
Example 4CSS 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:
-
Section 2.4Pionowe paski
Pionowe paski możemy zrobić na 2 sposoby, za pomocą: repeating-linear-gradient() lub linear-gradient().
Sposób pierwszy - repeating-linear-gradient()
Example 5CSS 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()
Example 6CSS 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:
-
Section 2.5Radialny 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:
Example 7CSS 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.
Section 3Podsumowanie
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.
About the author
