Kant-en-klare CSS-gradiënten. CSS: Lineair verloop voor achtergrond

A! Het verloop is een uitstekend hulpmiddel voor het manipuleren van kleuren CSS3. In plaats van een afbeelding te gebruiken om een ​​verloopeffect op een webpagina te creëren, zou het nuttiger zijn om deze te gebruiken CSS3-gradiënt en daarmee de site “verlichten”. Omdat de gebruiker geen tijd en verkeer hoeft te verspillen met het laden van de achtergrondafbeelding. Er zijn twee hoofdtypen gradiënten: radiaal en lineair. Het bericht van vandaag zal over hen gaan.

Lineair verloop

Zoals de classificatie zegt, verlopen in CSS3 zijn afbeeldingen. Er zijn geen speciale eigenschappen voor hen. En de advertentie gebruikt de eigenschap achtergrondafbeelding.

IN algemeen geval De gradiënt (lineaire) syntaxis ziet er als volgt uit:

Laten we dus alles in volgorde bespreken.

Allereerst wordt een lineaire gradiënt gedeclareerd door de functie linear-gradient(). De functie heeft drie hoofdbetekenissen. De eerste waarde definieert uitgangspositie. Het voorbeeld geeft bovenaan aan, d.w.z. uitgangspositie van bovenaf. Je kunt ook onder, links en rechts gebruiken;

Als de hoek negatief is, verandert de positie van de linkerbenedenhoek naar de linkerbovenhoek.

De tweede waarde van de functie is de startkleur en de stoppositie, die wordt aangegeven als een percentage. Het aangeven van deze positie is niet nodig; de browser zal standaard 0% gebruiken voor de eerste kleur.

De laatste waarde is de tweede kleur en de stoppositie ervan. Standaard ingesteld op 100%. Deze extreme waarden betekenen dat de eerste kleur onmiddellijk overgaat in de tweede. Als we de eerste kleur echter op 50% instellen, begint deze pas vanaf het midden van de beschikbare hoogte over te gaan naar de tweede. Zo ziet de code eruit:

We krijgen stroken van gelijke hoogte. Met een duidelijke rand zal er geen kleurovergang zijn. Experimenteer met de waarden om beter te begrijpen hoe dit werkt.

Radiaal verloop net als lineair wordt het gedeclareerd als een functie, alleen radial-gradient() . Er zijn ook basiswaarden: dit is de vorm van de radiale gradiënt (cirkel - cirkel of ellips - ellips), de begin- en eindkleur. De syntaxis is als volgt:

Als u geen vorm opgeeft, is de standaard een ellips.

Ook is de middenpositie van het verloop standaard ingesteld; deze kan worden gewijzigd. De positie kan worden gespecificeerd met behulp van commando's (boven, onder, links, rechts en midden), evenals hun combinaties, of gespecificeerd als een percentage of pixels.

Commandocombinaties:

• Midden bovenaan - bovenaan - 50% 0%;
• In de linkerbovenhoek - linksboven - 0% 0%;
• In de rechterbovenhoek - rechtsboven - 100% 0%;
• In het centrum - centrum - 50% 50%;
• Links midden - links midden - 0% 50%;
• Rechts midden - rechts midden - 100% 50%;
• Midden onder - onder - 50% 100%;
• In de linker benedenhoek - linksonder - 0% 100%;
• In de rechter benedenhoek - rechtsonder - 100% 100%.

Hier is een voorbeeld met percentages:

Eerste aswaarde X tweede binnen U.

U kunt ook de grootte van de radiale gradiënt instellen. De grootte wordt aangegeven met een spatie na de verloopvorm. Standaard toepassen verste hoek(naar de verre hoek). De berekening wordt uitgevoerd vanaf het centrale punt van de helling naar:

Laten we een voorbeeld bekijken om dit beter te begrijpen. Een elliptisch verloop met een witte begin- en blauwe eindkleur:

De grootte wordt berekend op basis van de afstand tot de dichtstbijzijnde zijden, het is duidelijk dat de bovenkant dichter langs de as ligt Y en links langs de as X.

En nu naar de andere kanten:

Het resultaat is, zoals ze zeggen, duidelijk. De grootte wordt berekend op basis van de afstand tot de verste zijden.

Zowel bij radiale als lineaire gradiënten kunnen stopposities voor kleur worden gebruikt. Ik zou ook willen opmerken dat als je kleurtransparantie wilt bereiken, je rgba moet gebruiken.

Het alfakanaal, het laatste en gelijk aan 0,2, geeft aan dat slechts 20% van 100% van de kleur wordt gebruikt.

In beide soorten CSS3-gradiënt Je kunt niet twee, maar meerdere kleuren gebruiken.

Voor beide typen kunnen herhalende kleuren worden gebruikt. Dat wil zeggen dat uit deze waarden een cyclus wordt gevormd. Herhalende gradiëntfuncties, repeating-linear-gradient() voor lineair en repeating-radial-gradient() voor radiaal.

0% , #FFAE00 100% );
/* voor Firefox */
achtergrondafbeelding: -ms-lineair-gradiënt(top, #FF5A00 0%, #FFAE00 100%);
/* voor IE 10+ */ achtergrondafbeelding: -o-lineair verloop(boven, #FF5A00 0%, #FFAE00 100%);
}

div(
/* voor Opera */
}

achtergrondafbeelding: lineair verloop (top , #FF5A00 0% , #FFAE00 100% );

/* standaardsyntaxis */

filter: progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;

Waar 33 direct na de hash het percentage kleurverzadiging is.

Ik hoop dat het artikel nuttig voor u was en dat het besproken onderwerp volledig aan bod kwam. Wilt u op de hoogte blijven van de nieuwste artikelen en lessen, abonneer u dan op Binnenkort, heel binnenkort, zullen websites gemakkelijker laden en zullen ze helemaal zonder afbeeldingen kunnen worden gemaakt. Inmiddels al binnen moderne browsers

je kunt er een verloopachtergrond van elke complexiteit mee maken

CSS-hulp

, en tegelijkertijd geheel zonder afbeeldingen.

CSS-verlopen maken zonder afbeeldingen

Stel dat we op de achtergrond een verloopovergang willen maken van grijs naar zwart. Om dit te bereiken stelde W3 Corporation voor om in CSS3 een speciale lineaire gradiëntrichtlijn te gebruiken.

Dus, volgens versie W3, om een ​​verloopachtergrond te maken, schrijft u gewoon in de blokkiezer: Achtergrond: lineair verloop (start, kleur1 positie1, kleur2 positie2,...,kleurN positieN); En de browser tekent automatisch een verloopachtergrond in het blok. Het is duidelijk dat bloemen en controlepunten er kan veel in het verloop zitten. Parameter begin specificeert in welke richting de gradiënt zich moet voortplanten - het kan beide zijn bovenkant

voor een verticaal richtingsverloop of
links

Achtergrond: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); achtergrond: -webkit-gradient(lineair, linksboven, linksonder, van(#ccc), tot(#000)); achtergrond: -moz-lineair-gradiënt(top, #ccc, #000);

Na het renderen ziet het er zo uit.

Verloop: een geselecteerd gebied vullen met een reeks kleurtinten met vloeiende overgangen daartussen. Een verloop wordt gebruikt om een ​​vloeiende overgang tussen twee of meer opgegeven waarden weer te geven kleurschakeringen. Verloop voorbeeld:

Voorheen werden achtergrondafbeeldingen gebruikt om een ​​verloopeffect te creëren. Nu creëren verloop achtergrond je kunt CSS3 gebruiken. Elementen met CSS3-gradiënten zien er bij inzoomen beter uit dan hun tegenhangers in de achtergrondafbeelding van de plug-in, omdat de kleurovergang rechtstreeks door de browser naar het opgegeven gebied wordt gegenereerd.

Houd er rekening mee dat CSS-gradiënt achtergrondafbeelding gemaakt door de browser, niet achtergrondkleur dus het wordt gedefinieerd als de waarde van de eigenschap background-image. Dit betekent dat het verloop niet alleen kan worden opgegeven als de waarde van de eigenschap background-image, maar ook overal waar u een achtergrondafbeelding kunt invoegen, zoals list-style-image en background .

CSS3 definieert twee soorten verlopen:

• Lineair verloop (Lineair verloop) - soepele overgang van kleur naar kleur in een rechte lijn.
• Radiaal verloop(Radiaal verloop) - een vloeiende overgang van kleur naar kleur vanuit één punt in alle richtingen.

Lineair verloop

Een lineair verloop strekt zich uit in een rechte lijn en laat een vloeiende overgang zien van de ene kleurtint naar de andere. Er wordt een lineair verloop gemaakt met behulp van de functie linear-gradient(). De functie creëert een afbeelding met een lineair verloop tussen de opgegeven kleurschakeringen. De grootte van het verloop komt overeen met de grootte van het element waarop het wordt toegepast.

De functie linear-gradient() accepteert de volgende door komma's gescheiden argumenten:

• Het eerste argument is de mate van de hoek of trefwoorden die de richtingshoek van de gradiëntlijn definiëren. Optioneel argument.
• Een door komma's gescheiden lijst van twee of meer kleuren, die elk kunnen worden gevolgd door een stoppositie.

Voor de eenvoudigste lineaire gradiënt zijn slechts twee argumenten nodig die de begin- en eindkleuren specificeren:

Div (achtergrondafbeelding: lineair verloop (zwart, wit); breedte: 200px; hoogte: 200px; ) Probeer »

Door twee argumenten aan de functie door te geven, wordt een verticale gradiënt ingesteld met het startpunt bovenaan.

De richting van de gradiëntlijn kan op twee manieren worden bepaald:

Graden gebruiken Als eerste argument kunt u de graad van de hoek van de gradiëntlijn doorgeven, die de richting van de gradiënt bepaalt. De hoek 0deg (afkorting van graden - graad) definieert bijvoorbeeld de gradiëntlijn vanaf de onderrand van het element naar boven, de hoek van 90 graden definieert de gradiëntlijn van links naar rechts, enz. Simpel gezegd: positieve hoeken vertegenwoordigen rotatie met de klok mee, negatieve hoeken vertegenwoordigen rotatie tegen de klok in.

Trefwoorden gebruiken De trefwoorden "naar boven", "naar rechts", "naar beneden" of "naar links" kunnen ook als eerste argument worden doorgegeven, deze vertegenwoordigen de hoeken van de verlooplijnen "0deg" "90deg" "180deg" " 270 graden" respectievelijk. De hoek kan ook worden ingesteld met behulp van twee trefwoorden, bijvoorbeeld to rechtsboven

- de verlooplijn is naar de rechterbovenhoek gericht.

Een voorbeeld van een verloop gespecificeerd in verschillende richtingen:

Div ( marge: 10px; breedte: 200px; hoogte: 200px; zwevend: links; ) #one ( achtergrondafbeelding: lineair verloop (naar links, zwart, rood); ) #two ( achtergrondafbeelding: lineair verloop ( naar linksboven, zwart, rood); #three ( achtergrondafbeelding: lineair verloop (65 graden, zwart, geel); ) Probeer »

Zoals gezegd kan een lineair verloop een lijst van meer dan twee kleuren bevatten, gescheiden door een komma, en de browser zal deze gelijkmatig over het gehele beschikbare gebied verdelen:

Div ( marge: 10px; breedte: 200px; hoogte: 200px; zwevend: links; ) #one ( achtergrondafbeelding: lineair verloop (naar rechts, rood, blauw, geel); ) #two ( achtergrondafbeelding: lineair- verloop(naar linksboven, blauw, wit, blauw) Probeer » Na een kleur is het mogelijk om er een stoppositie voor aan te geven, die de locatie van de kleur bepaalt (waar de ene kleur in de andere begint over te gaan) ten opzichte van de initiële en eindpunt

gradiënt. De stoppositie wordt gespecificeerd met behulp van CSS-ondersteunde eenheden of percentages. Bij gebruik van percentages wordt de positiestoppositie berekend afhankelijk van de lengte van de verlooplijn. Een waarde van 0% is het startpunt van de helling, 100% is het eindpunt.

Div ( marge: 10px; breedte: 200px; hoogte: 200px; zwevend: links; ) #one ( achtergrondafbeelding: lineair verloop (naar rechtsboven, blauw, wit 70%, blauw); ) #two ( achtergrondafbeelding : lineair verloop (naar rechtsonder, geel 10%, wit, rood, zwart 90%);) #three ( achtergrondafbeelding: lineair verloop (naar rechts, zwart 10%, geel, zwart 90%); ) Probeer » De kleurwaarde kan worden opgegeven, bijvoorbeeld: specificeer de kleurnaam, gebruik hexadecimale waarden (HEX), gebruik RGB (RGBA) of HSL (HSLA) syntaxis. Het gebruik van een verloop met transparantie kan bijvoorbeeld worden gebruikt in combinatie met een achtergrondkleur of afbeelding onder het verloop om interessante visuele effecten te creëren:

Div ( marge: 10px; breedte: 300px; hoogte: 100px; achtergrondkleur: groen; ) #one ( achtergrond: lineair verloop (naar links, rgb(255,255,0), rgba(255,255,0,0)); ) #twee (achtergrond: lineair verloop(rgb(255.255.255), rgba(255.255.255,0)); )

Vlad Merzjevitsj

Een verloop is een vloeiende overgang van de ene kleur naar de andere, en er kunnen meerdere kleuren en overgangen tussen zitten. Met behulp van verlopen worden de meest bizarre webontwerpeffecten gecreëerd, bijvoorbeeld pseudo-driedimensionaliteit, verblinding, achtergrond, enz. Ook zien elementen met een verloop er aantrekkelijker uit dan monochrome.

Er is geen aparte eigenschap voor het toevoegen van een verloop, omdat dit als een achtergrondafbeelding wordt beschouwd. Deze wordt dus toegevoegd via de eigenschap background-image of de generieke eigenschap background, zoals weergegeven in voorbeeld 1.

Voorbeeld 1: Verloop

Hier begint traditioneel het obscene idioom het prozaïsche beeld, maar het taalspel leidt niet tot een actief dialogisch begrip.

Resultaat dit voorbeeld getoond in afb. 1.

Rijst. 1. Lineair verloop voor alinea

In de zeer eenvoudig geval met de twee kleuren gedemonstreerd in voorbeeld 1, noteert u eerst de positie vanwaar het verloop begint, en vervolgens de begin- en eindkleuren.

Om een ​​positie vast te leggen, schrijft u eerst naar en voegt u vervolgens de trefwoorden top , bottom en left , right toe, evenals hun combinaties. De volgorde van de woorden is niet belangrijk, u kunt naar linksboven of naar linksboven schrijven. In tabel 1 toont verschillende posities en het type verloop dat wordt verkregen voor de kleuren #000 en #fff, anders van zwart naar wit.

In plaats van een trefwoord kunt u de helling van de verlooplijn opgeven, die de richting van het verloop aangeeft. Eerst wordt de positieve of negatieve waarde van de hoek geschreven, waarna graden eraan wordt toegevoegd.

Nul graden (of 360º) komt overeen met de helling van onder naar boven, daarna wordt er met de klok mee afgeteld. De hellingshoek van de gradiëntlijn wordt hieronder weergegeven.

Voor waarden linksboven en vergelijkbare waarden wordt de hoek van de gradiëntlijn berekend op basis van de grootte van het element, zodat twee diagonaal tegenover elkaar liggende hoekpunten met elkaar worden verbonden.

Om complexe verlopen te maken, zijn twee kleuren niet langer voldoende; de ​​syntaxis stelt je in staat een onbeperkt aantal toe te voegen, waarbij de kleuren worden gescheiden door komma's. In dit geval kunt u gebruik maken van transparante kleur (trefwoord transparant), en ook doorschijnend met behulp van RGBA-formaat, zoals weergegeven in voorbeeld 2.

Voorbeeld 2: Doorschijnende kleuren

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Het resultaat van dit voorbeeld wordt getoond in Fig. 2.

Rijst. 2. Verloop met doorschijnende kleuren

Om kleuren nauwkeurig in een verloop te positioneren, wordt de kleurwaarde gevolgd door de positie ervan in percentages, pixels of andere eenheden. Opnemen bijvoorbeeld rood 0%, oranje 50%, geel 100% betekent dat het verloop rood begint, dan 50% oranje en dan helemaal geel. Voor de eenvoud kunnen extreme eenheden zoals 0% en 100% worden weggelaten; deze worden standaard aangenomen. Voorbeeld 3 laat zien hoe u een verloopknop maakt waarbij de positie van de tweede kleur van de drie is ingesteld op 36%.

Voorbeeld 3: Verloopknop

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Druk zachtjes op mij

Het resultaat van dit voorbeeld wordt getoond in Fig. 3.

Rijst. 3. Knop Verloop

Door de positie van de kleur in te stellen, kun je scherpe overgangen tussen kleuren krijgen, wat uiteindelijk een reeks monochrome strepen oplevert. Voor twee kleuren moet u dus vier kleuren opgeven, de eerste twee kleuren zijn hetzelfde en beginnen van 0% tot 50%, de overige kleuren zijn ook hetzelfde en lopen door van 50% tot 100%. In het voorbeeld zijn 4 strepen toegevoegd als achtergrond van de webpagina. Omdat de extreme waarden automatisch worden vervangen, kunnen ze niet worden gespecificeerd, dus het volstaat om slechts twee kleuren te schrijven.

Voorbeeld 4. Effen strepen

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Typische Europese bourgeoisie en fatsoen worden op elegante wijze geïllustreerd door de officiële taal.

Het resultaat van dit voorbeeld wordt getoond in Fig. 4. Houd er rekening mee dat een van de verloopkleuren is ingesteld op transparant, zodat deze indirect verandert via de achtergrondkleur van de webpagina.

Rijst. 4. Achtergrond van horizontale strepen

Verlopen zijn behoorlijk populair onder webontwerpers, maar het toevoegen ervan wordt bemoeilijkt door verschillende eigenschappen voor elke browser en het specificeren van meerdere kleuren. Om het gemakkelijker voor u te maken om verlopen te maken en deze in code in te voegen, raad ik de site www.colorzilla.com/gradient-editor aan, waarmee u eenvoudig verlopen kunt instellen en meteen vereiste code. Beschikbaar kant-en-klare sjablonen(Presets), het resultaat bekijken (Preview), kleuren aanpassen (Aanpassingen), definitieve code (CSS) die IE ondersteunt via filters. Voor degenen die in Photoshop of iets anders hebben gewerkt grafische editor, lijkt het maken van verlopen een fluitje van een cent, maar anderen zullen er geen moeite mee hebben om dit snel uit te zoeken. Over het algemeen raad ik het ten zeerste aan.