Twórz gradienty za pomocą CSS

Będziemy potrzebować
Edytor kodu
Kody alfanumeryczne kolorów do użycia
Przeglądarka internetowa

Krok 1

Zacznę od utworzenia folderu dla tego samouczka, który będę nazywał „trucos_css„W jej ramach stworzę kolejne wezwanie”css”, W nich będę przechowywać pliki, których będę potrzebować.

Krok 2

Przejdę do mojego edytora kodu w tym przypadku użyję nawiasów i przystąpię do tworzenia nowego pliku ”index.html"Że zapiszę w katalogu głównym folderu"triki_css", też stworzę plik"styl.css„Że zapiszę w folderze„ css ”utworzonym w krok 1.

Krok 3

W moim pliku "index.html" napiszę podstawową strukturę html i dodam odwołanie do arkusza stylów "styl.css"Że w poprzednim kroku zapisz w ścieżce"css / style.css”.
Kod z index.html:

 Sztuczki CSS - Gradienty 

Krok 4

W pliku "index.html" dołączę nowyw ramach której później przypiszę klasę "gradient"Co napiszę później w pliku"styl.css”.
Kod index.html będzie wyglądał tak:

 Sztuczki CSS

Krok 5

Teraz będę pracować nad plikiem ”styl.css”, zacznę od określenia rozmiaru jaki pokryje etykieta , ustawię szerokość na 100%, wysokość na 100%, zadeklaruję, że nie będzie miał marginesów ani dopełnienia i powiem, że jego pozycja będzie bezwzględna, aby obejmowała cały rozmiar na ekranie.
Kod stylu.css:

 ciało {szerokość: 100%; wzrost: 100%; margines: 0px; dopełnienie: 0px; pozycja: bezwzględna; }

Krok 6

Kontynuujemy edycję naszego css, teraz dodam klasę "gradient"W nim wskażę, że powinien być wyświetlany z wysokością 100% i równą szerokością, napiszę, że będzie miał selektor tła, który będzie zawierał właściwość"gradient liniowy ()Który działa w następujący sposób …
Wewnątrz nawiasów wskazujemy, gdzie skierowany jest koniec naszego gradientu i kolory, które będzie pokazywać z jednego końca do drugiego. Składnia wyglądałaby mniej więcej tak:

 tło: liniowy-gradient (kierunek, kolor-stop1, kolor-stop2,…); 

Gdzie w pozycji zwanej kierunkiem określimy kierunek, w którym będzie podążał gradient na ekranielewy górny = w lewo i w górę
Prawy-górny = w prawo i w górę
prawy dolny = w dół i w prawo
na dole po lewej = w dół i w lewo
w prawym dolnym rogu = w dół i w prawo zaczynając od lewego górnego rogu
na dole po lewej = poniżej i w prawo zaczynając od prawego górnego rogu
w prawym górnym rogu = góra i prawo zaczynając od lewego dolnego
w lewym górnym rogu = górny i lewy zaczynając od prawego dolnego
Jeśli chodzi o kolory, możesz wybrać te, które Ci się podobają, w tym przypadku zrobię gradient, który zacznie się od bieli do czerni przez dwa odcienie niebieskiego.
Nasz kod css wyglądałby wtedy następująco:

 ciało {szerokość: 100%; wzrost: 100%; margines: 0px; dopełnienie: 0px; pozycja: bezwzględna; } .gradient {szerokość: 100%; wzrost: 100%; tło: gradient liniowy (w prawym dolnym rogu, # fff, # 00e2ff, # 00f, # 000); } 

Wynik byłby następujący.

Ale jak wszystko na tym świecie, są inne sposoby, aby zrobić to znacznie łatwiej i szybciej i bez pisania dużo, możemy przejść do naszej przeglądarki i poszukać następującego adresu internetowego http: //www.colorzill… radient-editor /

Znajdą w nim serię wstępnie zdefiniowanych gradientów, które mogą również dostosować, będą musiały tylko wybrać jeden, dostosować go do swoich preferencji, jeśli chcą, skopiować kod CCS, który jest wyświetlany po prawej stronie ekranu i wklej go wewnątrz warstwy „gradientu”, którą już stworzyliśmy, zastępując to, co znajdziemy w niej napisane w krok 6. Polecam tę opcję, ponieważ szczególnie z niej korzystam, a kod, który nam daje, jest gotowy do pracy na dowolnej przeglądarce.

Po skopiowaniu tego kodu wkleimy go do naszego css, pozostawiając go w następujący sposób:

 ciało {szerokość: 100%; wzrost: 100%; margines: 0px; dopełnienie: 0px; pozycja: bezwzględna; } .gradient {szerokość: 100%; wzrost: 100%; tło: rgb (212 228 239); / * Stare przeglądarki * / background: -moz-linear-gradient (góra, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / background: -webkit-gradient (liniowy, lewy górny, lewy dolny, color-stop (0%, rgba (212,228,239,1)), color-stop (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / tło: -webkit-linear-gradient (góra, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / tło: -o-linear-gradient (góra, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / tło: -ms-linear-gradient (góra, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / background: liniowy-gradient (do dołu, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

A wynik w tym przypadku byłby taki.
POWIĘKSZAĆ
Mam nadzieję, że się przyda, po więcej sztuczek nie zapomnij za mną podążać…
Jeśli podobał Ci się ten samouczek, nie zapomnij go ocenić, a jeśli masz pytania lub komentarze zostaw je poniżej, chętnie Ci odpowiem. Pozdrowienia … Czy podobał Ci się ten samouczek i pomógł?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt