Verlopen maken met CSS

Wij hebben nodig
Een code-editor
De alfanumerieke codes van de te gebruiken kleuren
Een webbrowser

Stap 1

Ik zal beginnen met het maken van een map voor deze tutorial die ik "t ." zal noemenrucos_css"Daarbinnen zal ik nog een oproep maken"css”, Daarin bewaar ik de bestanden die ik nodig heb.

Stap 2

Ik ga naar mijn code-editor, in dit geval gebruik ik haakjes en ga ik verder met het maken van een nieuw bestand "index.html"Dat zal ik opslaan in de hoofdmap van de map"tricks_css", ik zal ook een bestand maken"style.css"Dat zal ik opslaan in de" css "map gemaakt in de stap 1.

Stap 3

In mijn bestand "index.html" zal ik de basis html-structuur schrijven en een verwijzing naar de stylesheet toevoegen "style.css"Dat in de vorige stap opslaan in het pad"css / stijl.css”.
Code van index.html:

 CSS-trucs - Verlopen 

Stap 4

In het bestand "index.html" zal ik een nieuwewaarbinnen ik later de klas zal toewijzen "verloop"Wat ik later in het dossier zal schrijven"style.css”.
De index.html-code ziet er als volgt uit:

 CSS-trucs

Stap 5

Nu ga ik aan het bestand werken "style.css”, Ik zal beginnen met het definiëren van de maat die het label zal bedekken , Ik zal een breedte van 100% instellen, een hoogte van 100%, ik zal verklaren dat het geen marges of opvulling zal hebben en ik zal je vertellen dat de positie absoluut zal zijn, zodat het de totale grootte op het scherm bedekt.
Stijl.css-code:

 lichaam {breedte: 100%; hoogte: 100%; marge: 0px; opvulling: 0px; positie: absoluut; }

Stap 6

We gaan door met het bewerken van onze css, nu zal ik de klasse toevoegen "verloop"Hierin zal ik aangeven dat het moet worden weergegeven met een hoogte van 100% en een gelijke breedte, ik zal schrijven dat het een achtergrondselector zal hebben die de eigenschap zal bevatten"lineair-gradiënt ()Wat als volgt werkt…
Binnen de haakjes geven we aan waar het einde van ons verloop is gericht en de kleuren die het van het ene uiteinde naar het andere laat zien. De syntaxis zou ongeveer als volgt zijn:

 achtergrond: lineair-gradiënt (richting, kleur-stop1, kleur-stop2,…); 

Waar in de positie die richting wordt genoemd, we de richting definiëren die het verloop op het scherm zal volgenlinksboven = links en omhoog
rechtsboven = rechts en omhoog
rechts onder = naar beneden en naar rechts
linksonder = naar beneden en naar links
naar rechtsonder = naar beneden en naar rechts vanaf de linkerbovenhoek
naar linksonder = onder en naar rechts vanaf de rechterbovenhoek
naar rechtsboven = boven en rechts beginnend vanaf linksonder
naar linksboven = boven en links beginnend vanaf rechtsonder
Wat betreft de kleuren, je kunt degene van je voorkeur kiezen, in dit geval zal ik een verloop maken dat van wit naar zwart begint door twee tinten blauw.
Onze css-code zou dan als volgt zijn:

 lichaam {breedte: 100%; hoogte: 100%; marge: 0px; opvulling: 0px; positie: absoluut; } .gradiënt {breedte: 100%; hoogte: 100%; achtergrond: lineair verloop (naar rechtsonder, # fff, # 00e2ff, # 00f, # 000); } 

Het resultaat zou het volgende zijn.

Maar zoals alles in deze wereld, zijn er andere manieren om het veel gemakkelijker en sneller te doen en zonder veel te typen, kunnen we naar onze browser gaan en het volgende webadres zoeken http: //www.colorzill… radient-editor /

Daarin zullen ze een reeks gradiënten vinden die al vooraf zijn gedefinieerd en die ze ook kunnen aanpassen, ze hoeven er maar één te selecteren, deze naar wens aan te passen, de ccs-code te kopiëren die aan de rechterkant van het scherm wordt weergegeven en plak het in de "verloop"-laag die we al hebben gemaakt door te vervangen wat we erin vinden in de stap 6. Ik raad deze optie aan omdat ik het vooral gebruik en de code die het ons geeft, klaar is om in elke browser te werken.

Nadat we deze code hebben gekopieerd, plakken we deze in onze css en laten we deze als volgt achter:

 lichaam {breedte: 100%; hoogte: 100%; marge: 0px; opvulling: 0px; positie: absoluut; } .gradiënt {breedte: 100%; hoogte: 100%; achtergrond: rgb (212.228.239); / * Oude browsers * / achtergrond: -moz-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134,174.204,1) 64%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, links boven, links onder, kleurstop (0%, rgba (212.228.239,1)), kleurstop (64%, rgba (134.174.204,1) ))); / * Chrome, Safari4 + * / achtergrond: -webkit-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134,174.204,1) 64%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineair-gradiënt (top, rgba (212.228.239,1) 0%, rgba (134,174.204,1) 64%); / * Opera 11.10+ * / achtergrond: -ms-lineair verloop (top, rgba (212.228.239,1) 0%, rgba (134,174.204,1) 64%); / * IE10 + * / achtergrond: lineair verloop (naar beneden, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

En het resultaat zou in dit geval dit zijn.
VERGROTEN
Ik hoop dat het nuttig zal zijn, voor meer trucs vergeet niet om mij te volgen …
Als je deze tutorial leuk vond, vergeet dan niet om hem te beoordelen en als je vragen of opmerkingen hebt, laat ze dan hieronder achter, ik zal je graag beantwoorden. Groeten … Vond je deze Tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven