Adjon árnyékhatást a képekhez a CSS3 automatikus kódgenerátorral

A CSS segítségével weboldalait könnyedén, nagyon egyszerűen stílusolhatja. Egy oldalon több mint száz szöveges stílus definiálható (természetesen az oldala cirkuszi sátorként fog kinézni), de arról szól, hogy mennyire könnyű és rugalmas a CSS használata a weboldalakon.ThemeShock rendelkezik egy CSS kódológenerátorral, amely néhány kattintással segíti a különböző árnyékhatások hozzáadását a képekhez. Ön választja ki a hatást, és beírja a kódot; Az effektusok hozzáadhatók az alsó, oldalsó, felső és alsó, bal alsó, jobb alsó, jobb felső és bal alsó vagy átlós sarkokban.

Mielőtt elkezded; ellenőrizze a kép méretét (amelyhez hozzá szeretné adni a hatást). A kódgenerátor előre meghatározott felső és alsó határa a kép szélessége és magassága 130 - 347 képpont. Ha a kép mérete meghaladja ezt, akkor később bármikor szerkesztheti a szélességet és a magasságot. A kód lehetővé teszi az árnyék átlátszóságának és elmosódásának meghatározását is. A képet nem töltheti fel a kódgenerátorban, az alapértelmezett képet fogja használni, így megnézheti a hatást.

A legördülő menüből válassza ki, melyik árnyékhatást választja, és minden alkalommal, amikor valamelyik választót megváltoztatja, új kódot generál, ezért ügyeljen arra, hogy a legújabbat használja. Miután kiválasztotta a kívánt hatást, állítsa be a kép szélességét és magasságát a vízszintes görgetősáv segítségével. Használja a jobb és a bal nyílgombot, ha csak egy kissé kívánja elcsúsztatni a gombot. Állítsa be az elmosódást és az átlátszóságot, és a kód generálódik. Ezen paraméterek bármelyikének növelése vagy csökkentése új kódot hoz létre.

Miután minden beállítva, másolja a CSS-kódot egy CSS-fájlba, és nevezze el neked a weboldalának (vagy témának). A HTML-kódot, amely a weboldalán található, szintén előállítják (minden egyes effektushoz egyedi a legördülő menüből), másolja át, és helyezze a képkódot (img src = ”“) oda, ahol a „kódod” felirat szerepel itt'.

A legjobb dolog ebben a kódgenerátorban az, hogy működik és ingyenes. Vannak méretkorlátozások a képekre, de a kódból szerkeszthetők. Ha átlátszó képet (például a fenti képet) használ, tompa szürke háttérképet kap. A háttér színét később a kódból szerkesztheti. (Kódsor háttér szerkesztése: #ccc). A kód 5 képpontos keretet is ad az összes képhez, szerkesztheti a keretet is, de a szélesség növelésével és csökkentésével az árnyékot a szükségesnél jobban elrejti vagy felfedi, tehát a legjobb, ha egyedül hagyja.

Látogassa meg a ThemeShock CSS Drop Shadow Generator alkalmazást