A ‘Design’ kategória arhívuma

WebPillangó 2, övtől fel!

A kommenteket figyelembe véve elkészítettem az oldal felső részének a javított változatát. A betűtípusokat kicseréltem Verdanára, a színekkel is eljátszodtam, illetve a fejléc szövegét és zsúfoltságát is próbáltam korrigálni. A tartalmi résznél megváltozott a fejléc háttere (narancssárgáról kékre) és a fejléc szövegének színe (erdész zöldről mély kékre). Ez nem tudom mennyire jó így, de van akinek így tetszik. Az oldallécben is van változás. A partnerek gombjai kerültek alaposabb kidolgozásra, illetve a Photoshop szótár kapott új reklámfelületet.

WebPillangó 2, az első publikus design

Lassan elérkezett a várva várt pillanat, elkészült a WebPillangó2 designja. A terv még nem végleges csupán egy beta változat. Azért tettem fel az oldalra, hogy mond meg, hogy mi tetszik és mi nem tetszik. A véleményeden túl az ötleteidet is várom, hogy még mit látnál szivesen az oldalon.

Előre is köszönöm a kritikákat és ötleteket!

Online betütípus összehasonlítás

A Typetester egy nagyon hasznosnak bizonyuló web 2.0 alkalmazás, ami nagyban felgyorsíthatja a weboldalkészítés művészetét. Dióhéjban, a Typetesterben három oszlopban, valós időben, grafikus felhasználói felületen kereszűl, változtathatjuk a szöveg kinézetét: betütípus, méretek, elő és háttér színek, stb. A formázások eredményét egy CSSként kaphatod vissza, mindössze egy kattintásba kerül.

Darabolás mentes hivatkozás képeken

Ez egy rövid példa arra, hogy miként lehet egy háttérképre, például a fejléc hátterére, linket tenni, pl. a logóra. Természetesen ebből az következik, hogy nem szükséges a kép felvágása, csupán XHTML és CSS segítségével kivitelezhető. A megoldás egyaránt valid és cross-browser.

1. lépés

Helyezzünk egy linket a kérdéses helyre. Én a fejlécben szeretnék egy kattintható felületet a logónak, ami visszamutat a főoldalra.

1
2
3

<div id="header">
  <a href="index.html" title="" id="logoLink"> </a>
</div>

Top 10 WordPress sablon

Mivel még nem volt alkalmam készíteni sablont az oldalra, fogtam magam és összeválogattam 10 nagyon jó WordPress sablont. Remélem te is jónak fogod találni a templateokat. Sok szöveget nem is fűznék hozza, hiszen ebben az esetben a látszat a lényeg.

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.

3 havas szöveg effekt

Az elkövetkezőkben bemutatók néhány példát havas szöveg készítésére. Az elsőben inkább fagyos, hóharmatos szöveget készítek, a másodikban behavazott szöveget, aztán meg, ami jön. Az alap lépések mindenik effekthez ugyanazok: hozz létre egy fehér háttérszínű dokumentumot, és helyezz rá egy (tetszés szerint) kék szöveget. Ezen a szövegen fogjuk elvégezni a kívánt változtatásokat.

Harmatos szöveg készítése. Talán ez a legegyszerűbb. Készíts egy új réteget a szöveg rétege fölé. Ezt követően a Ctrl gombot lenyomva tartva kattints a szöveg rétegének nézőképére (szöveg réteg esetén egy T betű). Így készítesz egy kijelölést, amely a szöveg körvonalát követi. Ha nem sikerül, akkor ugyan ezt a műveletet egy más módszerrel is elérheted: jobb klikk a nézőképen és Select Layer Transparecy (magyarban valami ehez hasonló kellene legyen: a réteg áttetszőségének kijelölése). Ezt követően válaszd a fehér előtérszínt (foreground color, a felső szín négyzet) és egy soft brush-t (egy puha körvonalú, nagyon áttetsző ecset). Az új rétegen óvatosan színezd be a szöveg azon területeit, ahova hóharmatot szeretnél.

Behavazás Photoshoppal

Ahogyan azt a fórumban beígértem, téli témába vágó leírások következnek. Kezdésnek egy behavazott effektet mutatok be, amit sokfelé újrahasznosíthatsz: weboldalad téli designra váltásánál, behavazott fejlécnek, képeslapnak, stb. Szükséged lesz néhány grunge stílusú ecsetre is, rengeteg van az interneten. Ha nem találsz, az sem gond, alap ecsetekkel is el lehet készíteni. Jó szórakozást!
Az első lépés, mint máskor is, az új dokumentum létrehozása, bár ez esteben nem számít a háttérszín. Válassz két világoskék színt előtér és háttérszínnek (foreground, background), majd egy vertikális színátmenettel töltsd ki az alap réteget. Ha készen vagy, válaszd a fehért, mint előtérszín és keress egy puha ecsetet. Hozz létre egy új réteget és színezd ki a képed felső részét. Ezt követően válassz egy szétzúzott ecsetet és egy új rétegen próbáld felrojtozni a havat.

Ezt követően hasonló, tört, ecsetekkel próbáld neked megfelelőre formázni a hó lelógó részeit. Ha befejezted a fehérítést, akkor egy új rétegen, készíts egy szétszórt fekete mintát, ugyancsak egy karcos ecsettel. A fekete réteg áttetszőségét állítsd egy alacsony értékre, hogy csak egy kevés árnyékot/piszkosságot adjon a hónak.

A Web 2.0 designer szemmel (harmadik rész)

A webkettes design elemek leírása elég hosszúra sikerült. Az elöző részekben szó volt a lényeges, nagy elemekeről. A jelen, harmadik és talán befelyező részben az apróságokra próbálom fektetni a hangsúlyt. Mint afféle bevezetés, megragadnám a lehetőséget egy, az elöző leírásokban nem szereplő, nagy elem ecsetelésére. Arról van szó, hogy minden webkettes oldalon megfigyelhetőek az elkülönített részek a tartalmi egységeben is. Reményeim szerint ezt a tulajdonságot tovább boncolva minden említésre érdemes elemet érinteni fogok.
A részek elkülönítése nagyon egyszerű dolog (nak tűnhet): fogok egy oda nem illő háttérszínt, nem találó szövegelemeket és készen is vagyok. Rossz! A lényeg, hogy megtartsuk az oldal áttekinthetőségét, egyszerűségét, vagyis a letisztultságot. Első lépés, hogy különítsük el az állandó navigációs elemeket. Ez álltalában a főmenü. Használjunk a designba találó, de mégis összetéveszthetetlen formákat és színeket, tisztán olvasható betűket az elkészítéshez. Ez azért fontos, hogy tudassuk a böngésző személlyel, hogy: hol van és hová mehet.