Skapa lutningar med CSS

Vi kommer att behöva
En kodredigerare
De alfanumeriska koderna för de färger som ska användas
En webbläsare

Steg 1

Jag börjar med att skapa en mapp för denna handledning som jag kommer att kalla "trucos_css"Inom den kommer jag att skapa ett nytt samtal"css”, I dem kommer jag att behålla de filer som jag kommer att behöva.

Steg 2

Jag kommer att gå till min kodredigerare i det här fallet, jag kommer att använda Brackets och fortsätta skapa en ny fil "index.html"Att jag ska spara i roten i mappen"tricks_css", Jag kommer också att skapa en fil"style.css"Att jag kommer att spara i" css "-mappen som skapades i steg 1.

Steg 3

I min fil "index.html" skriver jag den grundläggande html -strukturen och lägger till en referens till formatmallen "style.css"Det i föregående steg spara i sökvägen"css / style.css”.
Kod från index.html:

 CSS -trick - Gradienter 

Steg 4

I filen "index.html" kommer jag att inkludera en nyinom vilken jag senare kommer att tilldela klassen "lutning"Som jag kommer att skriva senare i filen"style.css”.
Index.html -koden kommer att se ut så här:

 CSS -knep

Steg 5

Nu ska jag arbeta med filen "style.css”, Börjar jag med att definiera storleken som etiketten ska täcka , Jag kommer att ställa in en bredd på 100%, en höjd på 100%, jag kommer att förklara att den inte kommer att ha några marginaler eller vaddering och jag kommer att berätta att dess position kommer att vara absolut så att den täcker den totala storleken på skärmen.
Style.css -kod:

 kropp {bredd: 100%; höjd: 100%; marginal: 0px; vaddering: 0px; position: absolut; }

Steg 6

Vi fortsätter att redigera vår css, nu lägger jag till klassen "lutning"I den kommer jag att indikera att den ska visas med en höjd av 100% och lika bred, jag kommer att skriva att den kommer att ha en bakgrundsväljare som innehåller egenskapen"linjär-gradient ()Vilket fungerar enligt följande …
Inom parentesen anger vi var slutet på vår lutning är riktad och färgerna som den kommer att visa från ena änden till den andra. Syntaxen skulle vara ungefär så här:

 bakgrund: linjär gradient (riktning, färgstopp1, färgstopp2, …); 

Där i positionen som kallas riktning kommer vi att definiera den riktning som lutningen kommer att följa på skärmenvänster topp = vänster och uppåt
högra topp = höger och uppåt
nere till höger = ner och till höger
nedre vänstra = ner och till vänster
längst ner till höger = ner och till höger från det övre vänstra hörnet
längst ner till vänster = nedanför och till höger från det övre högra hörnet
uppe till höger = övre och högra från nedre vänstra
uppe till vänster = övre och vänstra med början från nedre högra
När det gäller färgerna kan du välja vilka du föredrar, i det här fallet kommer jag att göra en lutning som börjar från vitt till svart genom två nyanser av blått.
Vår css -kod skulle då vara följande:

 kropp {bredd: 100%; höjd: 100%; marginal: 0px; vaddering: 0px; position: absolut; } .gradient {bredd: 100%; höjd: 100%; bakgrund: linjär gradient (längst ner till höger, # fff, # 00e2ff, # 00f, # 000); } 

Resultatet skulle bli följande.

Men som allt i den här världen finns det andra sätt att göra det mycket lättare och snabbare och utan att skriva mycket kan vi gå till vår webbläsare och leta efter följande webbadress http: //www.colorzill… radient-editor /

I den kommer de att hitta en serie av lutningar som redan är fördefinierade och som de också kan anpassa, de behöver bara välja en, justera den efter önskemål om de vill, kopiera ccs -koden som visas på skärmens högra sida och klistra in det i "gradient" -skiktet som vi redan har skapat genom att ersätta det vi finner skrivet i det i steg 6. Jag rekommenderar det här alternativet eftersom jag särskilt använder det och koden det ger oss är redo att fungera i alla webbläsare.

Efter att ha kopierat den här koden klistrar vi in ​​den i vår css och lämnar den så här:

 kropp {bredd: 100%; höjd: 100%; marginal: 0px; vaddering: 0px; position: absolut; } .gradient {bredd: 100%; höjd: 100%; bakgrund: rgb (212,228,239); / * Gamla webbläsare * / bakgrund: -moz-linjär-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster överst, vänster botten, färgstopp (0%, rgba (212 228 239,1)), färgstopp (64%, rgba (134,174,204,1 )))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / bakgrund: -o-linjär-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / bakgrund: -ms-linjär-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / bakgrund: linjär-gradient (till botten, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

Och resultatet i detta fall skulle bli detta.
FÖRSTORA
Jag hoppas att det kommer att vara användbart, för fler knep glöm inte att följa mig …
Om du gillade denna handledning, glöm inte att betygsätta den och om du har frågor eller kommentarer lämna dem nedan, svarar jag dig gärna. Hälsningar … Gillade och hjälpte du den här självstudien?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng