Színvilág a webdesignban

Ez egy rendhagyó leírás! Nem szoktam hosszú leírásokat írni vagy ha igen, akkor azokat több bejegyzésre bontva teszem közzé. Ennek több oka is van, például jobb hatékonyabb több, rövidebb, leírás, mint egy hosszú, amit sokan megunnak és nem olvasnak végig. Ezért meg is kérlek, ha nem olvasod végig, el se kezd! Igen, ezt nyugodtan provokálásnak tekintheted!

CSS: menü villogás kivédése

A probléma

Legtöbb esetben a sitebuilderek a menügombokat úgy oldják meg, hogy a gomb minden állapota egy külön kép. A probléma az, hogy például egy a:hover vagy a:active állapotváltozásnál, ha a felhasználó a gomb fölé viszi az egeret, eltünik a háttere amíg a hover állapothoz kapcsolódó képet le nem tölti.

[A régi szép időkben, amikor az ilyen egyszerű menüket JavaScript-el csinálták, volt egy opció erre amit preload image-nek hívtak, ám a jelen megoldás egyszerűbb, és szemantikailag, illetve SEO szempontjából is helyes kódot kapunk.]

Az első őszi webdesign vetélkedő győztese

Pár napja lezárult az első Őszi webdesign verseny a WebPillangó keretein belül. Mindenki dobogós lett, mivel összesen három jelentkező volt. Mindanyiuknak egyaránt gratulálok! Remélem a jövőben nagyobb érdeklődés lesz.

WebPillangó 2 Public Beta

Eljött ez a pillanat is. Több, mint egy év után elkészült a WebPillangó 2. Remélhetőleg egyszerübb lesz kezelni és több hasznos eszközzel sikerül élvezhetővé tenni a böngészést. Az oldal még nincs végleges állapotában, több oldal nem elérhető. Ezeket idővel megoldom. Kérlek, ha bármiféle észrevételed van, írd meg! Ha hibát jelentesz, kérlek írd meg azt is, hogy milyen böngészővel nézed.

Készült három 125×125 pixeles reklámkép is. Amennyiben úgy érzed, terjesztenéd az oldalt, ezekkel nyugodtan linkelhetsz a WebPillangóra. Az egyedüli dolog amire kérlek, hogy a misztikus három w nélkül írd a linkben a domaint, vagyis így: http://webpillango.org/ Hamarosan arról is több infót szolgáltatok, hogy milyen előnyöd származhat, ha linkelsz az oldalra. Ez még fejlesztés alatt áll.

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.

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.

Elemek újraméretezés az ablakméret változásakor

Biztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.

Példa

Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.

Webdesigner csemege

A WebPillangó eddigi bő féléves pályafutása alatt született néhágy olyan bejegyzés, ami iránt szépen gyarapodott az érdeklödők száma. A bejegyzés célja egy helyen összegezni ezeknek a bejegyzéseknek a krémét, témától függetlenül, legyen az photoshop, webdesign, web programozás vagy bármi egyéb kiegészítő, mint például a Magyar-Angol, Angol-Magyar Photoshop szótár program formájában megvalósítva.

A csemegézést a legtöbbet értékelt és a legjobb értékelést szerzett bejegyzésekkel kezdem. Az értékelést a bejegyzések alján lehet elvégezni a csillagokat használva. A legtöbb szavazatot a Retró kép készítése segédlet kapta. A legjobb értékelést pedig a WebPillangó Photoshop szótár.

A Google Analytics szerinti, a WebPillangón, a top tartalom (top content) a következőkből áll:

• WebPillangó Photoshop szótár
• Jó minőségű Youtube
• Retró kép készítése
• PHP weboldal motor
• Top 10 WordPress sablon

  Elolvasom a teljes bejegyzést »

WebPillangó 2, a Te kezedben van!

Lassan eljött az idő egy nagyobb frissítéshez. A WebPillangóról van szó. Sajnos azt kell tapasztaljam, hogy még mindig nem elég jó az oldal. Ez alatt az értem, hogy a grafikával sem vagyok megelégedve és az oldal funkcionális felépítése is szinte már szörnyű, amikor tudom, hogy jobban is meglehetne oldani. A tartalom is kissé eltért attól, amit nyújtani akart a WebPillangó, ezért tartalom szempontjából is szigorításokat tervezek.

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.