CSS3 Herhalingen herhalen [CSS3 tips]
Er zijn veel CSS3-functies die de manier waarop we een website decoreren veranderen, waaronder CSS3 Gradients. Voorafgaand aan CSS3 hebben we zeker afbeeldingen nodig om het verloopeffect te creëren; nu kunnen we dezelfde (en betere) effecten leveren door alleen CSS te gebruiken
In onze vorige berichten hebben we twee soorten gradiënten besproken die kunnen worden bereikt met CSS3:
- Radiaal en
- Lineaire verlopen.
Deze keer gaan we kijken naar hun broer of zus: herhalende hellingen.
Basic Herhalend
Hellingen herhalen is in wezen een extensie. De syntaxis is vergelijkbaar met de manier waarop we radiale en lineaire gradiënten definiëren, alleen dat zoals de naam aangeeft, het ook de kleuren in een opgegeven richting zal herhalen. Om lineaire gradiënten te herhalen, kunnen we deze functie gebruiken: repeterende lineaire gradiënt, terwijl we radiale of elliptische gradiënten herhalen, gebruiken we deze functie: herhalende radiale gradiënt.
/ * Lineair * / .gradient background: repeating-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radiaal * / .gradient background: repeating-radial-gradient (50% 50%, circle, # f9f9f9, #cccccc 20px);
Voor de rest is er niet veel verschil op de code, behalve voor de kleurenherhaling. Hieronder is een eenvoudige illustratie om te beschrijven hoe deze kleurenherhaling werkt.
Hoewel de bovenstaande afbeelding alleen illustreert voor het herhalen van lineaire gradiënten, is het basisidee ook van toepassing op radiale verlopen waarin de kleuren oneindig worden herhaald, in dit geval in elke richting. Volg de onderstaande link om de demo te bekijken.
- Demo bekijken
In de volgende sectie zullen we laten zien hoe we CSS3 Herhalingen kunnen gebruiken in echte voorbeelden.
Voorbeeld: patronen maken
De meest voorkomende implementatie van Hellingen herhalen is om achtergrondpatronen te maken. In dit voorbeeld gaan we eenvoudige verticale strepenpatronen maken.
.gradient background: repeating-linear-gradient (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Merk op hoe we twee verschillende kleuren definiëren - # f9f9f9 en #cccccc - op dezelfde plek, 20px. Dit voorbeeld verscherpt het verschil tussen deze twee kleuren en elimineert de vaagheid.
Om de oriëntatie te richten, veranderen we eenvoudig de hoek - 90deg zal het tijdens het horizontaal richten 45deg zal het diagonaal richten enzovoort.
- Demo bekijken
Voorbeeld: Paperline maken
In dit tweede voorbeeld gaan we een papieren regel maken die u vaak in een notitieblok ziet. Om dit effect te creëren, hebben we alleen een div, geen afbeeldingen, alleen CSS.
.verloop width: auto; hoogte: 500 px; marge: 0 50px; achtergrond: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); achtergrond: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); achtergrond: -o-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); achtergrond: herhalende-lineaire gradiënt (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); achtergrondgrootte: 100% 21 px;
Merk op dat we ook CSS3 hebben toegevoegd background-size eigenschap om de grootte van achtergrondafbeeldingen op te geven voor 100%, 20px. Hoewel CSS3-verlopen 'kleuren' weergeven, wordt het feitelijk gecategoriseerd als afbeelding, geen kleur.
Vervolgens zullen we gebruiken :voor pseudo-element om een streep aan de linkerkant van het papier toe te voegen.
.gradient: before content: ""; weergave: inline-block; hoogte: 500 px; breedte: 4px; border-left: 4px double # FCA1A1; positie: relatief; links: 30px;
En we zijn klaar, het is echt simpel toch? We kunnen ze nu allemaal in actie zien via de onderstaande links.
- Demo bekijken
- Download de bron
Verdere bronnen
- Webkit CSS3 verlopen
- CSS3 verlopen op Microsoft Developer Network
