CSS3 Powtarzające się gradienty [Porady CSS3]

Istnieje wiele funkcji CSS3, które zmieniają sposób, w jaki dekorujemy stronę internetową, z których jedną jest Gradient CSS3. Przed CSS3 zdecydowanie potrzebujemy obrazów, aby stworzyć efekt gradientu; teraz jesteśmy w stanie dostarczyć te same (i lepsze) efekty tylko przy użyciu CSS

W naszych poprzednich postach omówiliśmy dwa typy gradientów, które można uzyskać za pomocą CSS3:

• Promieniowy i
• Gradienty liniowe.

Tym razem zajrzymy do ich rodzeństwa: powtarzające się gradienty.

Powtarzanie podstawowe

Powtarzające się gradienty jest zasadniczo rozszerzeniem. Składnia jest podobna do tego, jak definiujemy gradienty promieniowe i liniowe, tyle tylko, że jak sama nazwa wskazuje, będzie również powtarzać kolory w określonym kierunku. Aby powtórzyć gradienty liniowe, możemy użyć tej funkcji: powtarzalny-liniowy gradient, podczas powtarzania gradientów promieniowych lub eliptycznych używamy tej funkcji: powtarzający się gradient radialny.

 / * Liniowy * / .gradient tło: powtarzający się-liniowy gradient (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient tło: powtarzający się radial-gradient (50% 50%, okrąg, # f9f9f9, #cccccc 20px);  

Kod nie ma wielkiej różnicy dla reszty, z wyjątkiem kodu powtarzanie kolorów. Poniżej znajduje się prosta ilustracja opisująca działanie tego powtarzania kolorów.

Chociaż powyższy obraz ilustruje tylko powtarzanie gradientów liniowych, podstawowa idea dotyczy również gradientów promieniowych, w których kolory będą się powtarzać w nieskończoność, w tym przypadku w dowolnym kierunku. Kliknij poniższy link, aby zobaczyć prezentację.

• Wyświetl demo

W następnej sekcji pokażemy, jak możemy wykorzystać CSS3 Powtarzające się gradienty w prawdziwych przykładach.

Przykład: tworzenie wzorów

Najczęstsza implementacja Powtarzające się gradienty jest tworzenie wzorów tła. W tym przykładzie stworzymy proste wzory pasków pionowych.

 .gradient tło: powtarzający-liniowy gradient (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Zwróć uwagę, jak definiujemy dwa różne kolory - # f9f9f9 i #cccccc - w tym samym miejscu, 20px. Ten przykład wyostrzy różnicę między tymi dwoma kolorami i wyeliminuje nieostrość.

Aby ukierunkować orientację, po prostu zmieniamy kąt - 90deg skieruje go poziomo 45deg skieruje go ukośnie i tak dalej.

• Wyświetl demo

Przykład: Tworzenie linii papieru

W tym drugim przykładzie stworzymy linię papieru, którą często można zobaczyć w notatniku. Aby stworzyć ten efekt, potrzebujemy tylko div, brak obrazów, tylko CSS.

 .gradient szerokość: auto; wysokość: 500px; margines: 0 50px; tło: -webkit-powtarzający-liniowy gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tło: -moz-powtarzanie-liniowy gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tło: -o-powtarzający-liniowy gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tło: powtarzalny-liniowy gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); rozmiar tła: 100% 21px;  

Zauważ, że dodaliśmy także CSS3 rozmiar tła właściwość do określania rozmiarów obrazów tła dla 100%, 20 pikseli. Mimo że gradienty CSS3 wyświetlają „kolory”, są one w rzeczywistości klasyfikowane jako obraz, nie kolor.

Następnie użyjemy :przed pseudoelement aby dodać pasek po lewej stronie papieru.

 .gradient: przed treść: ""; wyświetlacz: blok śródliniowy; wysokość: 500px; szerokość: 4px; border-left: 4px double # FCA1A1; pozycja: względna; lewo: 30px;  

I skończyliśmy, to naprawdę proste, prawda? Teraz możemy zobaczyć je wszystkie w linkach poniżej.

• Wyświetl demo
• Pobierz źródło

Dalsze zasoby

• Webkit Gradienty CSS3
• Gradienty CSS3 w Microsoft Developer Network