Jak udělat pruhované pozadí s CSS

Autor: Marcus Baldwin
Datum Vytvoření: 21 Červen 2021
Datum Aktualizace: 20 Prosinec 2024
Anonim
Jak udělat pruhované pozadí s CSS - Články
Jak udělat pruhované pozadí s CSS - Články

Obsah

Pomocí kódu CSS můžete vytvořit pruhované pozadí webové stránky bez použití grafiky. Tento efekt využívá úrovně přechodu CSS s více přestávkami barev, stejně jako vlastnost pozadí na pozadí, aby se vektor přechodu opakoval po obrazovce. Nejlepším způsobem, jak toho dosáhnout, je začít s pevnou barvou pozadí a vytvořit jeden z průhledných pruhů pro zvýraznění barvy. Uživatelé, kteří navštíví vaši stránku pomocí starých internetových prohlížečů, uvidí plnou barvu.


Pokyny

CSS umožňuje vytvářet pruhované pozadí pro celou webovou stránku bez použití grafiky (Jack Hollingsworth / Photodisc / Getty Images)

    Pokyny

  1. Otevřete soubor šablony stylů CSS v programu Poznámkový blok nebo v programu pro úpravy kódu. Přidat toto pravidlo na konec souboru:

    html {výška: 100%; }

    Toto pravidlo umožňuje vyplnit celé pozadí webové stránky přechodovým pruhem, který vytvoří.

  2. Nastavte barvu pozadí vaší stránky v rámci "html {}" tak, aby poskytovala základní barvu pro vaše pruhy a výchozí nastavení pro staré prohlížeče:

    html {výška: 100%; barva pozadí: černá; }

  3. Přidejte následující kód do výchozího "html {}" k vytvoření efektu horizontálního pruhu:


    pozadí: lineární gradient (transparentní 50%, bílá 50%);

    Vytvoří dvě přestávky barev, první bude průhledná a druhá bílá. Každé přerušení barev trvá 50% přechodového prostoru na obrazovce. Upravte šířku proužků změnou procentuálních hodnot.

  4. Přidejte hodnotu nula k prvnímu přerušení barvy a oddělte ji čárkou:

    Obrázek na pozadí: lineární gradient (0, transparentní 50%, černá 50%);

    Tím se vaše pruhy umístí svisle, místo aby byly umístěny vodorovně.

  5. Duplikujte vlastnost background-image a její hodnoty do nového řádku. Udělejte to dvakrát, vytvořte tři řádky se stejným kódem. Přidání předpony "-moz" k lineárnímu přechodu v jednom z duplikovaných řádků kódu. Přidejte předponu „-webkit“ do druhého duplikátu:


    pozadí-obraz: lineární gradient (0, transparentní 50%, bílá 50%); pozadí-obraz: -moz-lineární gradient (0, transparentní 50%, bílá 50%); pozadí-obraz: -webkit-lineární gradient (0, transparentní 50%, bílá 50%);

  6. Omezte přechod na určité množství pixelů nastavením velikosti pozadí v dalším řádku kódu CSS:

    velikost pozadí: 20px;

    Změňte počet pixelů velikosti pozadí a změňte velikost přechodu. Vzhledem k neustálému opakování gradientu šířky stránky bude každé opakování odpovídat množině pruhů na obrazovce.

Oznámení

  • Některé starší prohlížeče nepodporují přechody CSS3. Chcete-li zobrazit pruhy pro všechny typy prohlížečů, použijte podmíněné komentáře k zahrnutí šablony stylů s opakujícím se grafem.