- - Přidejte stínový efekt k obrázkům pomocí automatického generátoru kódu CSS3

Přidejte stínový efekt k obrázkům s automatickým generátorem kódu CSS3

CSS umožňuje snadno a velmi snadno upravovat své webové stránkysnadno. Na jedné stránce můžete definovat více než sto textových stylů (samozřejmě, že vaše stránka bude vypadat jako cirkusový stan), ale jde o jednoduchost a flexibilitu, která přichází s používáním CSS na webových stránkách.ThemeShock má generátor CSS kodéru, který vám pomůže přidatrůzné efekty vrženého stínu na vaše obrázky pomocí několika jednoduchých kliknutí. Vyberete si efekt a zapíše kód; efekty mohou být přidány do spodní, boční, horní a dolní, dolní levé, pravé spodní, pravé horní a dolní levé nebo v diagonálních rozích.

css-shadow-generator_HQ

Než začnete; zkontrolujte rozměr vašehoobrázek (ten, do kterého chcete efekt přidat). Generátor kódu má předdefinovanou horní a dolní hranici 130 - 347 pixelů pro šířku a výšku obrázku. Pokud vaše rozměry obrázku překročí toto, můžete šířku a výšku kdykoli upravit. Kód také umožňuje určit krytí a rozmazání stínu. Nemůžete nahrát svůj obrázek do generátoru kódu, použije se výchozí obrázek, abyste si mohli prohlédnout efekt.

Z rozbalovací nabídky vyberte, který stínefekt se vám líbí, pokaždé, když změníte některý z těchto selektorů, vygeneruje se nový kód, takže se ujistěte, že používáte ten nejnovější. Jakmile vyberete požadovaný efekt, nastavte šířku a výšku obrázku pomocí vodorovného posuvníku. Použijte klávesy se šipkami vpravo a vlevo, pokud chcete tlačítko trochu stisknout. Nastavte rozostření a neprůhlednost a vygeneruje se kód. Zvýšení nebo snížení těchto parametrů vytvoří nový kód.

Vržený stín Css3

Jakmile je vše nastaveno, zkopírujte kód CSS doSoubor CSS a pojmenujte jej pro webovou stránku (nebo motiv). Generuje se také kód HTML, který se používá na vaší webové stránce (je jedinečný pro každý efekt, který vyberete z rozbalovací nabídky), zkopírujte jej a umístěte kód obrázku (img src = ““), kde se říká „váš kód“.

Nejlepší věc na tomto generátoru kódu je tofunguje to a je to zdarma. Má omezené rozměry pro obrázky, ale lze je upravit z kódu. Pokud použijete průhledný obrázek (jako ten výše), bude mít matně šedé pozadí. Barvu pozadí můžete později upravit z kódu. (Upravit pozadí řádku kódu: #ccc). Kód také dává všem obrázkům rámeček 5 pixelů, můžete jej také upravovat, ale zvětšování a zmenšování šířky stín skrývá nebo odhalí více, než je nutné, takže je nejlepší ponechat sám.

Navštivte ThemeShock CSS Drop Shadow Generator

Komentáře