Editor kódu
Alfanumerické kódy barev, které se mají použít
Webový prohlížeč
Krok 1
Začnu vytvořením složky pro tento tutoriál, kterou budu nazývat „trucos_css„V rámci něj vytvořím další hovor“css”V nich si ponechám soubory, které budu potřebovat.
Krok 2
V tomto případě půjdu do editoru kódu, použiji závorky a pokračuji ve vytváření nového souboru "index.html„Že uložím do kořenového adresáře složky“tricks_css", Také vytvořím soubor"styl.css"Že uložím do složky" css "vytvořené v souboru krok 1.
Krok 3
Do svého souboru "index.html" napíšu základní strukturu html a přidám odkaz na šablonu stylů "styl.css„To v předchozím kroku uložit do cesty“css / style.css”.
Kód z index.html:
CSS triky - přechody
Krok 4
Do souboru "index.html" vložím novýv rámci kterého později přiřadím třídu “spád„Což napíšu později do souboru“styl.css”.
Kód index.html bude vypadat takto:
CSS triky
Krok 5
Nyní budu pracovat na souboru "styl.css”, Začnu definováním velikosti, kterou štítek pokryje „Nastavím šířku 100%, výšku 100%, prohlásím, že nebude mít žádné okraje ani vycpávky a řeknu vám, že jeho poloha bude absolutní, takže pokryje celkovou velikost obrazovky.
Kód Style.css:
tělo {šířka: 100%; výška: 100%; okraj: 0px; čalounění: 0px; pozice: absolutní; }
Krok 6
Pokračujeme v úpravách našeho CSS, nyní přidám třídu “spád"V něm uvedu, že by měl být zobrazen s výškou 100% a stejnou šířkou, napíšu, že bude mít volič pozadí, který bude obsahovat vlastnost"lineární gradient ()Což funguje následovně …
V závorkách uvádíme, kam směřuje konec našeho přechodu a barvy, které bude zobrazovat od jednoho konce k druhému. Syntaxe by byla něco takového:
pozadí: lineární gradient (směr, color-stop1, color-stop2, …);Kde v poloze zvané směr definujeme směr, kterým bude gradient na obrazovce postupovatvlevo nahoře = doleva a nahoru
pravý horní = doprava a nahoru
vpravo dole = dolů a doprava
vlevo dole = dolů a doleva
vpravo dole = dolů a vpravo od levého horního rohu
dole vlevo = dole a vpravo od pravého horního rohu
vpravo nahoře = nahoře a vpravo počínaje dole vlevo
vlevo nahoře = nahoře a vlevo od pravého dolního rohu
Pokud jde o barvy, můžete si vybrat ty, které dáváte přednost, v tomto případě udělám přechod, který začne od bílé po černou přes dva odstíny modré.
Náš css kód by pak byl následující:
tělo {šířka: 100%; výška: 100%; okraj: 0px; čalounění: 0px; pozice: absolutní; } .gradient {šířka: 100%; výška: 100%; pozadí: lineární gradient (vpravo dole, # fff, # 00e2ff, # 00f, # 000); } Výsledkem by bylo následující.
Ale jako všechno na tomto světě existují i jiné způsoby, jak to udělat mnohem jednodušeji a rychleji a bez dlouhého psaní, můžeme přejít do našeho prohlížeče a vyhledat následující webovou adresu http: //www.colorzill… radient-editor /
V něm najdou řadu předdefinovaných přechodů, které si mohou také přizpůsobit, budou muset pouze vybrat jeden, upravit jej podle svých preferencí, pokud chtějí, zkopírovat kód ccs, který je zobrazen na pravé straně obrazovky a vložte jej do vrstvy „přechodu“, kterou jsme již vytvořili, nahrazením toho, co v ní najdeme napsané krok 6. Tuto možnost doporučuji, protože ji zejména používám a kód, který nám dává, je připraven pracovat v jakémkoli prohlížeči.
Po zkopírování tohoto kódu jej vložíme do našeho CSS a ponecháme jej následovně:
tělo {šířka: 100%; výška: 100%; okraj: 0px; čalounění: 0px; pozice: absolutní; } .gradient {šířka: 100%; výška: 100%; pozadí: rgb (212,228,239); / * Staré prohlížeče * / pozadí: -moz-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / pozadí: -webkit-gradient (lineární, vlevo nahoře, vlevo dole, color-stop (0%, rgba (212,228,239,1)), color-stop (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / pozadí: -webkit-lineární gradient (nahoře, rgba (212 228 239,1) 0%, rgba (134 174 204,1) 64%); / * Chrome10 +, Safari5.1 + * / pozadí: -o-lineární-gradient (horní, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / pozadí: -ms-lineární-gradient (nahoře, rgba (212 228 239,1) 0%, rgba (134 174 204,1) 64%); / * IE10 + * / pozadí: lineární gradient (dolů, rgba (212 228 239,1) 0%, rgba (134 174 204,1) 64%); / * W3C * / filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } A výsledek v tomto případě bude tento.
ZVĚTŠITDoufám, že to bude užitečné, pro další triky mě nezapomeňte sledovat …
Pokud se vám tento návod líbil, nezapomeňte jej ohodnotit a pokud máte dotazy nebo komentáře, zanechte je níže, rád vám odpovím. Zdravím … Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
