Wordpress menu span hack

A minap felkerült egy írás, ahol dinamikusan lehet gombot készíteni CSS segítségével. DeX hozzászólása kapcsán:

Ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás?

arra gondoltam, ha már az active-ot hover-re cserélem, használhatom menünek is az egész CSS kódot, a minimális modosításokkal. A CSSben mindössze annyi a tennivaló, hogy az active modosítókat kicseréljük hoverre. Így a link fölé görgetéskor aktíválodik az új kinézet és nem a link lenyomásakor. Miután készen vagyunk a CSS résszel, nyugodtan használhatjuk weboldalainkban.

Mi van akkor, ha a kódot nem mi írjuk? Én arra az esetre gondoltam, amikor a WordPress által kilistázott oldalakat/kategóriákat formázom menüként. A megoldás egy kis ügyesség, okosság. A probléma orvoslását keresve az alábbi megoldást találtam a legmegfelelőbbnek.

Dinamikus gomb készítése CSSt használva

Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben. A következő leírásban egy ilyen szerű gomb elkészítéséről lesz szó. Először elmondanám, hogyan is működik a gomb, milyen elmélet alapján, majd a szükséges kódot is közzéteszem.
Az ötlet az, hogy ne legyen egy statikus háttér, amiről lefuthat a szöveg, ha éppen hosszabb, mint a kép maga. Persze ezt elméletben ne lehet tökéletesen kiküszöbölni, még szerencse, hogy a gyakorlati világban élünk. A háttér dinamikus szélességét annak köszönhetjük, hogy a linkekbe nem a szöveget helyezzük, ahnem egy span elemet, ami tartalmazza a szöveget, így valójában két hátterünk van: egy nyitó, ami nyulni is fog, ahogy a szöveg egyre hosszabb (persze csak egy pontig, de mivel mi határozzuk meg, nem okoz gondot) és egy záró háttér, amely lezárja az első háttér végét, így egységes megjelenést biztosít.

Photoshop videó tutorial

Elkészűlt az első videó tutorial is. Sajnos nem olyanra sikerült, amilyennek elképzeltem, de leszámítva az érdekes beszédem (nem tudom mi történt, lesz ez majd jobb is) és a rossz minőséget, használható. Ha követed az utasításokat biztos vagyok benne, hogy hasznodra lesz!

No lássuk is, miről van szó:

Aero vista gomb készítése

A leírásban Aero Vista stílusú gombokat fogunk elkészíteni. Több okból is érdemes elsajátítani ezt a fajta stílust: aránylag egyszerű az elkészítése és a weben is jól néz ki, afféle web2.0 stílusnak is megfelel. Vágjunk is bele, hozz létre egy új dokumentumot, majd válaszd a Rounded Rectangle eszközt. A radius paramétert állítsd 5 képpontra, majd rajzolj egy ehez hasonló méretű lekerekített sarkú téglalapot.
Ha készen vagy, akkor kezdődhet a nagy átalakítás. Néhány effektet használva, hamarosan befejezed a képet és megtanulod a Photoshop néhány, leggyakrabban használt, effektét is. Kattints duplán a rétegen és válaszd a Stroke egységet, vagy Layer/Layer style/Stroke. Állítsd be a következő értékeket: size 1, position outside, blend mode normal, opacity 100%, fill type color, color fekete.