Bejegyzések

css címkéjű bejegyzések megjelenítése

Gombhatású linkek készítése 2.

Kép
Probléma Az előző részben végigvettük, hogyan lehet gombhatású linket létrehozni. Ezen cikket megelőző alapozóban pedig szó esett a CSS változó elemek használatáról. Most kísérletet teszünk arra, hogy ezt a két tudást vegyítve egy könnyen adaptálható, programozói tudás nélkül is testreszabható gombot készítsünk. Megoldás menete Az eddig elkészített kód bonyolult, "fecsegő". Nagyon sok ismétlést tartalmaz, ezért szikárabbá tesszük. Béna angol szóviccel élve: kiszárítjuk. Ez a programozás egyik kedvenc technikája, a "Don't Repeat Yourself", azaz "Ne ismételd önmagad" rövidítéséből jön (DRY, angolul "száraz"). Ennek ellentettje a WET, azaz "Write Everything Twice" ("Írj mindent kétszer"), mások szerint pedig "We Love/Like Typing" ("Imádunk gépelni") stílusú kód. Sajnálom, tudom, hogy eddig nem készített fel titeket senki erre, de a programozóknak ritka rossz a humorérzéke. Ennél csak borzasztóbb poénok …

Alapok: testreszabható CSS tagek a Bloggerben

Kép
Sablon formázási lehetőségek A Blogger rendszerében a sablont alapvetően kétféleképpen szabhatjuk testre: egyik megoldás a Személyre szabás almenü használata, ahol nagyon sok részt, mint a háttér, linkek színe, bejegyzés szövegének betűtípusa stb. tudunk állítani. Ugyanitt használhatunk CSS-kódokat is, ha ennél specifikusabb beállításokra van szükségünk. Ez már igényel némi rutint, és az egyszeri felhasználó könnyen egy átláthatatlan CSS-útvesztőben találhatja magát. Ennél is több lehetőséget rejt magában a HTML-kód szerkesztése, ahol lényegében bármit megváltoztathatunk. Ehhez már mindenképpen kellenek előismeretek, HTML és CSS tudás nélkül senki ne vágjon bele! (Kivétel ha van egy egyértelmű leírása, mit és hogyan csináljon. Meg vannak biztonsági mentései.) Röviden ennyi a "kódolt" (vagy "kódos") dizájn: minden, amihez kell némi gépelés. Értehető, hogy vannak különféle szintjei, hiszen az is kódos designnak számít, ha hozzáadunk a blogsablonhoz egy saját stíluss…

Gombhatású linkek készítése 1.

Kép
Probléma Megesik, hogy az oldalon található linkek túl "laposak", jobb lenne, ha helyettük gombok jelennének meg. Ilyenek lehetnek az előző/következő oldalakra, bejegyzésekre mutató linkek, esetleg más modulok alján a "Küldés" gombok. Jól kinéző gombot készíteni azonban bonyolultabb, mint elsőre látszik! A cikk első felében elkészítünk egy sima, nem változtatható színű gombot, majd egy kis alapozás után megtanuljuk, hogy tegyük személyre szabhatóvá. Megoldás menete A gomb legfontosabb tulajdonsága, hogy térhatású. (Mindazonáltal készíthetünk lapos felületűt is.) Ezt leginkább az árnyékok manipulálásával és a gomb háttérszínének ügyes változtatásával tudjuk elérni (mivel a monitor még mindig sík, tényleges 3D tárgyat nehéz lenne létrehozni). A cél, hogy egy folyamatos színátmenetet hozzunk létre, mintha a fény felülről jönne. A felület egy része fényes, a többi árnyékos, illetve az egész gomb árnyékot vet. Ha ráhúzzuk az egeret, kissé kifényesedhet, jelezve, hogy a…

Egyéni betűtípusok használata

Kép
Probléma Az iniciálék igazán akkor erősek, ha más betűtípussal írjuk őket. A böngészők alapértelmezetten igen kevés, úgynevezett, "web-safe" fontot támogatnak, főleg a különleges betűtípusok terén kicsi a választék. Ha egyéni kinézetre van szükségünk, magunknak kell utánajárnunk és beillesztenünk a kódba. Megoldás menete Senkit se ijesszen el a cím háttere, a cikk azért kapott "közepes" besorolást, mert sok pepecseléssel jár egy igazán egyedi font beillesztése, de nem nehéz. Főleg, ha van Dropbox felhasználónk.
Az elméleti háttér egyszerű: egy helyen belenyúlunk a kódba, és manuálisan hozzáadjuk a kérdéses betűtípust, majd átnavigálunk oda, ahol használni akarjuk, és az előző cikkben látott font vagy font-family tulajdonságnál beállítjuk az adott szövegre vagy betűre.
Több lehetőségünk van, attól függően, web-safe fontot akarunk beágyazni, Google Fontokat használunk, vagy valami még ennél is egyedibbre van szükségünk – akár magunk szerkesztette fontokra! Na, azért…

Iniciálé

Kép
Probléma Az egyik legegyszerűbb és legnépszerűbb módszer a bejegyzések feldobására, ha iniciálékat helyezünk el bennük. Ezek állhatnak a bejegyzés elején, de akár minden bekezdés első betűjeként is. Akármit megváltoztathatunk a betűmérettől kezdve a betűtípusig, és ha mindez nem elég, még összetett, nagy képeket is beágyazhatunk a bejegyzéseinkbe. Megoldás menete Több lehetőségünk van. Az egyik, ha az első betűt egy span elembe ágyazzuk, és ennek a stílusát alakítjuk. A másik, ha képet akarunk beilleszteni, hogy lehagyjuk az első betűt, és egy kép elemet teszünk helyette. A harmadik, "automatikus" megoldás esetében nem kell semmi külön beillesztéssel bajlódnunk, mivel a CSS kezeli helyettünk egy pszeudo-elemen keresztül. Ez a legrugalmasabb módszer, mivel így a régebbi bejegyzések is automatikusan átalakulnak a nekünk tetsző formára. A DRY (ne ismételd magad) paradigma is ezt támogatja, mivel így mindössze egy helyen kell belenyúlnunk a kódba, nem minden bejegyzésnél egyenk…

DOM-vizsgálat és kompatibilitási problémák

Kép
Bár a cím nagyon technikainak hangzik, semmi elérhetetlen nem lesz ebben a rövid cikkben. Cserébe viszont úgy érezhetjük magunkat, mint egy igazi webdesigner, mert pár olyan alaptrükköt nézünk meg, amit a profik is nap mint nap használnak. DOM Az első a DOM-vizsgálat, ami lényegében a HTML kód böngészését jelenti. A DOM a Document Object Model rövidítése, és az oldalt felépítő elemek elrendezését tartalmazza. A DOM-ra úgy szokás tekinteni, mint egyfajta HTML-elemeket tartalmazó családfára. Az egymásba ágyazott elemek esetén a külső entitás a szülőobjektum, a belső pedig a gyermek. Természetesen a gyerekelemeknek is lehet gyerekük, ami a legkülsőnek így az unokája lesz, ami így rendelkezni fog egy nagyszülővel is, és így tovább. Ha egy szülőnek két gyereke is van, azok egymás testvérei. Unokatestvért nem szoktak megkülönböztetni, ahogy nagybácsit/nagynénit sem (a HTML-objektumoknak nincs nemük, nehéz is lenne). Nem csak a szakzsargonban használják a DOM-fa kifejezést, a DOM-ot tényle…