Így neveld a blogodat

Probléma Ebben a rövid cikkben egy kis CSS-t fogok bemutatni: hogyan lehet szöveggel körbefuttatni a képeket. Téglalap alakú képekről lesz most szó, bár egy későbbi cikkben kitérhetek arra is, hogyan lehet szabálytalan alakú képeket (vagy négyzetes, de átlátszósággal bíró, .png formátumú) képeket körbefuttatni. Mindenkit megnyugtatok: nem ennyire nehéz a téma, hogy ilyen sokat csúszott a cikk, egyszerűen ütemezési probléma merült fel. (Magyarán elfelejtettem, hogy nem írtam meg.) Megoldás elméleti háttere Egyszer már volt róla szó, hogy a tartalomért a HTML felelős, de a kinézetet a CSS állítja . (Az interaktivitást meg a JavaScript adja.) Ezért CSS-hez kell fordulnunk, mert ha csak simán egymás alá dobáljuk a szöveget és a képeket HTML-ben, akkor nem fogják körbeölelni egymást. Persze van egy másik megoldás is, ami Blogger-specifikus. A Szerkesztési nézetben is át lehet állítani, hogy a képet körbefussa a szövegünk, de kell hozzá egy kis ké

Probléma Ebben a cikkben egy picit belemegyünk a színelméletbe, hogy megértsük, hogyan kezelik a böngészők a színeket. A weben használt leggyakoribb színértékekről fogok beszélni: a nevesített színekről, a hex-kódokról, illetve kitérek az RGB(A) színrendszerre és annak egy változatára, a HSL(A)-ra is.

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 borz

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

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,

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 fo

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é