Generátor vlastností CSS

Generátor vlastností CSS je nástroj, který vytváří kód CSS pro vizuální efekt pomocí sady posuvníků a výběrů barev, takže uživatel nemusí kód psát ručně. Tento generátor podporuje čtyři efekty: gradienty, stíny boxu, zaoblení okrajů a stíny textu. Každý panel zobrazuje živý náhled a vytváří CSS připravené ke zkopírování.

Co generuje

• Gradienty: lineární nebo radiální přechody mezi dvěma barvami
• Stíny boxu: vržený nebo vnitřní stín kolem prvku s ovládáním posunutí, rozostření, rozšíření, barvy a krytí
• Zaoblení okrajů: zaoblené rohy, buď stejné na všech čtyřech rozích, nebo nastavené jednotlivě
• Stíny textu: stín za textem s ovládáním posunutí, rozostření, barvy a krytí

Každé nastavení současně aktualizuje náhled i vygenerovaný kód CSS, takže změny lze zkontrolovat před zkopírováním kódu.

Jak vypočítat lineární gradient CSS

Lineární gradient přechází z jedné barvy do druhé podél přímky. Jeho syntaxe CSS je:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

Úhel se měří ve stupních od 0 do 360. position1 a position2 určují, kde každá barva dosáhne plné intenzity, jako procento délky gradientu.

Příklad výpočtu

Počáteční hodnoty generátoru jsou úhel 90 stupňů, #ff5f6d v poloze 0 % a #ffc371 v poloze 100 %. Výsledkem je:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

První řádek je záložní jednobarevná definice pro prohlížeče, které z nějakého důvodu nedokážou gradient vykreslit. Druhý řádek je samotný gradient.

Vzorec radiálního gradientu

Radiální gradient se šíří od středu směrem ven, nikoli podél přímky:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Tento generátor vždy vytváří kruhový radiální gradient. Nenabízí možnost eliptického tvaru ani možnost posunout středový bod; změnit lze pouze dvě barvy a jejich pozice barevných zarážek.

Oba typy gradientu v tomto nástroji používají přesně dvě barvy nastavené pomocí výběrů Barva 1 a Barva 2. Není k dispozici možnost přidat třetí barevnou zarážku.

Vzorec stínu boxu CSS

Stín boxu je stín vykreslený kolem okrajů prvku:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset a v-offset posouvají stín doleva/doprava a nahoru/dolů. Kladné hodnoty jej posouvají doprava nebo dolů, záporné doleva nebo nahoru. blur změkčuje okraj stínu; vyšší hodnota rozprostírá změkčení dále. spread zvětšuje nebo zmenšuje velikost stínu před použitím rozostření. Přidáním klíčového slova inset před posunutí se stín vykreslí uvnitř okraje prvku místo vně.

Příklad výpočtu

Při výchozím nastavení (vodorovné posunutí 5 px, svislé posunutí 5 px, rozostření 10 px, rozšíření 0 px, černá barva s krytím 20 %) nástroj vytvoří:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Posuvník krytí výběru barvy pracuje v rozsahu od 0 do 100 a převádí hodnotu na stupnici od 0 do 1, kterou používá rgba(), takže 20 % se převede na 0,2.

Vzorec zaoblení okrajů CSS

Zaoblení okrajů zaobluje rohy prvku. Existují dvě podoby:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Když mají všechny čtyři rohy jednu společnou hodnotu, generátor zapíše zkrácenou podobu. Když se liší, uvede čtyři hodnoty v přesném pořadí: vlevo nahoře, vpravo nahoře, vpravo dole a vlevo dole.

Příklad výpočtu

Výchozí poloměr je 10 px na každém rohu:

1border-radius: 10px;
2

U kruhového obrázku avatara se obvykle používá border-radius: 50%, tato hodnota však leží mimo rozsah povolený posuvníkem tohoto generátoru (0 až 100 pixelů).

Vzorec stínu textu CSS

Stín textu se chová podobně jako stín boxu, ale nemá hodnotu rozšíření a aplikuje se na písmena místo na box prvku:

1text-shadow: h-offset v-offset blur color;
2

Příklad výpočtu

Při výchozím nastavení (vodorovné posunutí 2 px, svislé posunutí 2 px, rozostření 3 px, černá barva s krytím 50 %):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Které kódy barev generátor přijímá

Každý ovládací prvek barvy obsahuje vzorek barvy a textové pole. Textové pole přijímá hexadecimální kód barvy ve formátu # používaném v celém CSS. Platné jsou čtyři délky: tři číslice (#f00), čtyři číslice (#f00c), šest číslic (#ff0000) a osm číslic (#ff0000cc). Zkrácené formy označují stejnou barvu jako dlouhé formy, protože každá číslice se zdvojuje: #123 označuje stejnou barvu jako #112233.

Poslední číslice čtyřmístné formy a poslední dvojice osmimístné formy určují průhlednost. Generátory stínů tyto číslice ignorují a hodnotu alfa přebírají z posuvníku Krytí, takže posuvník vždy zobrazuje skutečně použitou průhlednost. Pokud textové pole obsahuje něco, co není hexadecimální barvou, například neúplně zadaný kód, stín se vrátí k černé barvě namísto vytvoření neplatné deklarace.

Jak používat generátor vlastností CSS

1. Vyberte kartu: Gradient, Stín boxu, Zaoblení okrajů nebo Stín textu.
2. Upravte posuvníky, výběry barev a zaškrtávací políčka. Každý posuvník má vedle sebe číselné pole pro zadání přesné hodnoty. Panel s náhledem i kód CSS se aktualizují okamžitě.
3. Vyberte tlačítko „Kopírovat do schránky“ a vložte kód do šablony stylů nebo atributu style.
4. Výběrem možnosti „Obnovit“ vrátíte všechna pole na všech čtyřech kartách na jejich počáteční hodnoty. Aktivní karta se také přepne zpět na Gradient, i když byla zobrazena jiná karta.

Často kladené otázky

K čemu se používá generátor vlastností CSS? Převádí vstupy z posuvníků a výběrů barev na hotový kód CSS pro gradienty, stíny a zaoblené rohy, takže uživatel nemusí tuto syntaxi ručně psát ani si ji pamatovat.

Jaký je rozdíl mezi lineárním a radiálním gradientem? Lineární gradient mění barvu podél přímky v nastaveném úhlu. Radiální gradient mění barvu směrem ven od středového bodu. Radiální možnost tohoto nástroje vždy používá kruhový tvar.

Dokáže tento nástroj vytvořit gradient s více než dvěma barvami? Ne. Panel lineárního i radiálního gradientu podporuje přesně dvě barvy, Barvu 1 a Barvu 2, přičemž každá má vlastní pozici zarážky.

V čem se vnitřní stín boxu liší od běžného stínu? Běžný stín boxu leží vně okrajů prvku, podobně jako světlo dopadající za něj. Vnitřní stín leží uvnitř okrajů, takže prvek působí spíše zatlačeně než vystouple.

Proč se hodnoty zaoblených rohů zobrazují v pořadí vlevo nahoře, vpravo nahoře, vpravo dole a vlevo dole? Takové pořadí očekává vlastnost CSS border-radius při zápisu čtyř samostatných hodnot; postupuje se po směru hodinových ručiček od levého horního rohu.

Funguje vygenerovaný kód CSS v každém prohlížeči? Gradienty, stíny boxu, zaoblení okrajů i stíny textu jsou podporovány v aktuálních verzích prohlížečů Chrome, Firefox, Safari a Edge. Do výstupu se nepřidávají žádné prefixy výrobců.

Reference

1. MDN Web Docs: Použití gradientů CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow