Ügyes Javascript és CSS alapú megoldások

Andris, 2007. Október 26.

A Tutorial Blogon találtam egy írást, 25 Code Snippets for Web Designers címmel,
ami még jól jöhet bármikor. Ezekből fogok most szemezgetni.

Css alkalmazás Checkbox-on Első példánk a FancyForm névre hallgat, segítségével széppé varázsolhatjuk az amúgy elég unalmas megjelenésű kipipálható dobozkákat és rádiógombokat. A mootools-raépül, ami az egyik legkisebb és legsoksoldalúbb javascript framework. (Egyszer talán bővebben is fogok erről írni, mert érdekes, bár még nem nagyon mélyedtem bele a témába túlságosan, csak próbálgattam.) Amúgy ez az érdekes példa a lipidity.com-on található, és részletesen le van írva a használata. Egyszer majd én is kipróbálom, nem tűnik ördöngösségnek.

A beszédes nevű Ask The CSS Guy honlapon részletesen le van írva, hogyan készíthetünk stílusos megjelenést egy egyszeű táblázatnak CSS-sel, valamit ezt hogyan tehetjük felhasználóbarátabbá némi Javascript segítségével.CSS alkalmazása táblázaton, meghintve némi Javascript-tel

A CSS használatával egyre jobban elszoktam a <table> elemek használatától, zinte mindent meg tudtam oldani div-ek és span-ok segítségével, viszont a table-nek is megvannak a maga előnyei, amikor például adatokat szeretnénk megjeleníteni, nem pedig mondjuk az oldal felépítését kódoljuk. Ahhoz táblázatot használni szerény véleményem szerint kissé igénytelen favágómunka.

Stílus alkalmazása File Input-onA shauninman.com-on az idáig elérhetetlennek tűnő File Input-on való CSS alkalmazás nagyon ötletes megoldását ismerhetjük meg. Ez az a gomb, amire általában “Tallózás…” van ráírva, és ilyennel találkozhatunk, ahol fájlokat lehet feltölteni. Ehhez az elemhez nem lehet hozzáférni se a html forráskódon belül, sem CSS-t nem lehet rá alkalmazni közvetlenül. Ebben segít ismét a Javascript. Nagyon ízléses megoldás.

Hát ma ezeken az érdekességeken akadt meg a szemem, szerintem érdemes feliratkozni ezeknek a honlapoknak az RSS feed-jére, sok hasznos dolgot lehet tanulni napról napra.

, , , , ,
Zéró komment

CSS menük

Andris, 2007. Szeptember 28.

Hát akkor lássuk, eddig milyen menüket készítettem az előző bejegyzésben említett versenyre.

Menu_PlayAz első, amit készítettem, a blogomon lévő menünek egy kicsit átdolgozott változata, előnye, hogy nagyon szép, legalábbis nekem nagyon bejön, az almenük áttetszőek, az éppen aktuális oldalon lévő fül jól megkülönböztethető, mert összeolvad a lappal. Hátránya, hogy csak a szabványos böngészőket szereti, Internet Explorert kimondottan utálja, főleg a 6-ost és az annál régebbieket. Ezt nem tervezem kijavítani, nem éri meg a beléfektetett időt és soksokórányi munkát, hogy azzal is jól nézzen ki. Emiatt szerintem ez a pályázó nem fog nyerni, az tuti, mivel minden böngészőben szépen kell megjelenni. Demó megtekinthető itt.CSSmenu_color

A második menü viszonylag egyszerű felépítésű, egyszintű, vízszintes. Elkészítettem 7 féle színben, lehet válogatni ízlés szerint. Kompatibilis az összes böngészővel. Demó.

Menu3A harmadik menü lett szerintem a legstílusosabb, komolyabb honlapokhoz illik. Demó.

A menüket elérhetővé fogom tenni bárki számára, aki használni szeretné őket, minimális megkötésekkel.

,
3 komment

CSS menü pályázat

Andris, 2007. Szeptember 18.

iPhone A BittBox-on olvasgatva rábukkantam egy érdekesnek ígérkező pályázatra, amit a CSS Menu Maker honlapon hirdetnek elkészítőjének a jutalma pedig egy : egy CSS alapú menüt kell tervezni, megcsinálni, csak CSS alapokon, tilos használni hozzá javascriptet. A menünek pedig minden fontos böngészőben helyesen kell megjelennie. A legjobb menü készítőjének jutalma egy Apple iPhone! Na erre azért szerintem én is benevezek :)

Ma már csináltam is egy menüt, azaz inkább egy meglévőt tökéletesítettem, amennyire csak lehetett. Viszont már megint az Internet Explorer-rel vannak gondok, egyszerűen totál szabványos dolgokat nem támogat, például a:hover pseudo-selector-t csak link tag-eken értelmezi, semmi máson nem… a:hover, az megy neki, több nem. De még az IE7-ben sem… A z-index sem megy neki rendesen, nomeg az elemek pozícionálása. PNG áttetszőség? Ne viccelődjünk… Úgy döntöttem, hogy ilyen hülye dolgokkal én nem fogok időt tölteni, direkt nem támogatom az Internet Explorer-t. Ha minden tervező egységesen nemet mondana az IE-re, akkor az már nyomna is valamit a latban, és talán elkezdenék kicsit rendbe pofozni. Ez a honlap sem jelenik meg tökéletesen IE alatt, és ez nem az én hibám, a böngésző a sz*r. Aki ismer, az tudja mennyire utálom az IE-t, némely oldalamra egyszerűen nem is lehet belépni Internet Explorerrel. Szerintem sokkal többet árt egy honlapnak, ha valaki megnézi egy rossz böngészővel, és az első benyomása az, hogy ez egy csúnya honlap. Akkor már inkább kapjon egy figyelmeztetést, hogy “Figyu, cseréld már le a böngésződet, a saját érdekedben”, és ha sikerült leváltania a Rossz Böngészőt később visszajöjjön. Erről majd még fogok bővebben írni egy következő bejegyzésemben.

Addig is elkezdek tervezgetni :)

, , , ,
4 komment