En kode editor
De alfanumeriske koder for de farver, der skal bruges
En webbrowser
Trin 1
Jeg starter med at oprette en mappe til denne vejledning, som jeg vil kalde "trucos_css"Inden for det vil jeg oprette et andet opkald"css”, I dem vil jeg beholde de filer, jeg skal bruge.
Trin 2
Jeg vil gå til min kode -editor i dette tilfælde, jeg vil bruge parenteser og fortsætte med at oprette en ny fil "index.html"At jeg vil gemme i roden af mappen"tricks_css", Jeg vil også oprette en fil"style.css"At jeg vil gemme i" css "-mappen oprettet i trin 1.
Trin 3
I min fil "index.html" skriver jeg den grundlæggende html -struktur og tilføjer en reference til typografiarket "style.css"Det i det foregående trin gemmer på stien"css / style.css”.
Kode fra index.html:
CSS -tricks - Gradienter
Trin 4
I filen "index.html" vil jeg inkludere en nyinden for hvilken jeg senere vil tildele klassen "gradient"Som jeg vil skrive senere i filen"style.css”.
Index.html -koden vil se sådan ud:
CSS tricks
Trin 5
Nu vil jeg arbejde på filen "style.css”, Vil jeg starte med at definere størrelsen, som etiketten vil dække , Jeg vil indstille en bredde på 100%, en højde på 100%, jeg vil erklære, at den ikke vil have margener eller polstring, og jeg vil fortælle dig, at dens position vil være absolut, så den dækker den samlede størrelse på skærmen.
Style.css kode:
krop {bredde: 100%; højde: 100%; margen: 0px; polstring: 0px; position: absolut; }
Trin 6
Vi fortsætter med at redigere vores css, nu tilføjer jeg klassen "gradient"I den vil jeg angive, at den skal vises med en højde på 100% og en lige bredde, jeg vil skrive, at den vil have en baggrundsvælger, der indeholder egenskaben"lineær-gradient ()Hvilket fungerer som følger …
Inde i parentesen angiver vi, hvor enden af vores gradient er rettet, og de farver, den vil vise fra den ene ende til den anden. Syntaksen ville være sådan her:
baggrund: lineær-gradient (retning, farve-stop1, farve-stop2, …);Hvor i positionen kaldet retning, vil vi definere den retning, som gradienten vil følge på skærmenvenstre top = venstre og op
højre top = højre og op
nederst til højre = ned og til højre
nederst til venstre = ned og til venstre
nederst til højre = ned og til højre fra øverste venstre hjørne
nederst til venstre = nedenunder og til højre fra øverste højre hjørne
øverst til højre = top og højre fra nederste venstre
øverst til venstre = øverst og venstre fra nederste højre side
Med hensyn til farverne kan du vælge dem, du foretrækker, i dette tilfælde vil jeg lave en gradient, der starter fra hvid til sort gennem to nuancer af blå.
Vores css -kode ville så være som følger:
krop {bredde: 100%; højde: 100%; margen: 0px; polstring: 0px; position: absolut; } .gradient {bredde: 100%; højde: 100%; baggrund: lineær-gradient (nederst til højre, # fff, # 00e2ff, # 00f, # 000); } Resultatet ville blive følgende.
Men ligesom alt i denne verden er der andre måder at gøre det meget lettere og hurtigere på og uden at skrive meget, kan vi gå til vores browser og kigge efter følgende webadresse http: //www.colorzill… radient-editor /
I den finder de en række gradienter, der allerede er foruddefineret, og som de også kan tilpasse, de skal kun vælge en, justere den efter deres præferencer, hvis de ønsker det, kopiere ccs -koden, der vises på højre side af skærmen og indsæt det inde i "gradient" -laget, som vi allerede har oprettet ved at erstatte det, vi finder skrevet i det i trin 6. Jeg anbefaler denne mulighed, fordi jeg især bruger den, og den kode, den giver os, er klar til at fungere i enhver browser.
Efter kopiering af denne kode vil vi indsætte den i vores css og efterlade den som følger:
krop {bredde: 100%; højde: 100%; margen: 0px; polstring: 0px; position: absolut; } .gradient {bredde: 100%; højde: 100%; baggrund: rgb (212,228,239); / * Gamle browsere * / baggrund: -moz-lineær-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / baggrund: -webkit-gradient (lineær, venstre øverst, venstre bund, farve-stop (0%, rgba (212.228.239,1)), farve-stop (64%, rgba (134.174.204,1 )))); / * Chrome, Safari4 + * / baggrund: -webkit-lineær-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / baggrund: -o-lineær-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / baggrund: -ms-lineær-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / baggrund: lineær-gradient (til bund, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } Og resultatet i denne sag ville være dette.
FORSTØRREJeg håber det vil være nyttigt, for flere tricks glem ikke at følge mig …
Hvis du kunne lide denne vejledning, glem ikke at bedømme den, og hvis du har spørgsmål eller kommentarer, lad dem stå herunder, vil jeg med glæde besvare dig. Hilsen … Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
