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

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 lesznek. (Vagy egy Arnold Schwarzenegger idézeteken alapuló programozási nyelv, az ArnoldC – ez mindent elmond. Az ezoterikus programozási nyelvek félelmetesek.)
Ha már elég "DRY" a kódunk, gondolhatunk a CSS-ismeretekkel nem rendelkező felhasználókra, és a szükséges, gyakran változó tulajdonságokra felvehetünk Blogger CSS változókat. Így lehetőséget biztosítunk a testreszabásra, és a kódunk épségét is megőrizzük, mert senki nem akar belenyúlni.

Megoldás

Az előző részben készítettünk egy gombot, aminek a testreszabása egyelőre kissé nehézkes. Bár több lehetőséget is végigvettünk, és nem kötöttem meg senki kezét, milyen beállításokat használjon, az újak kedvéért (vagy a feledékenyek... esetleg a normális emberek, elvégre lassan három hónapja került ki az a bejegyzés) álljon itt az egyik végső verzió, kicsit módosítva. Ha valakinek nem tetszik, változtassa nyugodtan, de haladhat a példával együtt, később úgyis a módosítás lesz a lényeg.

See the Pen NboRGo by Szuzs (@szuzs) on CodePen.

A kódhoz hozzáadtam a navigációs linkeket tartalmazó elem sormagasságának beállításait is, illetve a hátteret kiszedtem (egyes sablonoknál van egy pontozott vonal középen, ez zavaró az ilyen gombok mellett). Valójában a nagyobb betűméret miatt kicsit a blog szélességét is állítanom kellett, de mivel később a gombunk betűmérete állíthatóvá válik, ez csak a képek miatt került be. A betűméret a szülőelemhez került, ez majd később lesz lényeges.

Gombok és a szerkesztőléc

Egyelőre jónak tűnik, de mi van, ha szeretnénk megváltoztatni mondjuk a betűméretet? Cserélhetjük a sormagasság értékét, és ha még ez nem lenne elég, a gombunk karakterisztikája is teljesen megváltozik. Plusz semmi nem garantálja, hogy a szöveg betűméretéhez képest az arányokat meg tudjuk tartani, állandóan számolhatunk, hogy a tizenkét pixel (ez az alapértelmezett betűméret) hogy aránylik a húszhoz, ha mondjuk a látogatóink nagyobb (vagy kisebb) betűket szeretnének az oldalra. Mennyivel egyszerűbb lenne százalékos arányban kifejezni, nem? Kezdjük ezzel!
Az alap betűméret 12 px, a gombunk 20, ezek aránya körülbelül 167%. Egyéb beállítások miatt ezt kerekíthetjük lefelé 150%-ra. Legyen hát ez a font-size értéke! A line-height ehhez arányul. Százalék helyett megadhatjuk tizedestörtként is, az értéke 2.25 (így, tizedesponttal: a CSS az angol jelöléseket használja). 45/20 = 2.25, mivel itt már nem az oldal szövegének betűméretéhez, hanem az adott elem betűméretéhez viszonyítunk. Igen, ez kicsit bonyolult, mikor mi az alap, lesz róla egy cikk később. Visszatérve a gombhoz, egyelőre itt tartunk:

.blog-pager {
    font-size: 150%;
    line-height: 2.25;
    background: none;
}

A többi egyelőre változatlan, de már megyünk is tovább ezekre az értékekre. Van két fontos beállításunk, ami változtatható, de a többi (távtartók, keret görbülete, árnyékok mérete) fix marad akkor is, ha a gomb icipici, de akkor is, ha óriásira növeljük. Jó ez így? Nem, totál más stílust kapunk vissza. Állítsuk ezeket is pixelekről em értékekre! Ez a betűmérettől függő érték, így ha azt változtatjuk, egy füst alatt minden beállítás változhat. Érdemes ezt a technikát használnunk más esetekben is, például modulok, szövegdobozok méreteinek állítása során, így a szöveg méretétől függően a dobozunk mérete is változik, és nem kell a kódot túrni, hogy mindenhol átállítsuk. Most tehát minden pixelben megadott értéket az eredeti (20px) betűmérethez viszonyítva kiszámolunk, és ezeket fogjuk beírni a helyükre. Így lesz a 6px-ből .3em (ez a 0.3 rövidítése, a CSS így is megérti), a 16px-ből .8em, és így tovább. A keret vastagságát tartsuk minden esetben egy pixel vékonyan, tehát ezt ne változtassuk meg. Így jobban néz ki a végső dizájn. A megváltozott kódok az alábbiak:

.blog-pager a:link, .blog-pager a:visited {
    padding: .3em .8em;
    border: 1px solid #447188;
    background: #58a linear-gradient(#77a0bb, #58a);
    border-radius: .2em;
    box-shadow: 0 .05em .25em grey;
    color: white;
    text-shadow: 0 -.05em .05em #335966;
}

Ha a Blogger Testreszabás menüjében készítettük az eddigieket (a Stíluslap hozzáadása almenüben), ki is próbálhatjuk, hogy a dolog működik: menjünk az Oldal szöveg menübe, és állítsuk át a betűméretet. A gombunk megfelelően méreteződik át, megtartva az eredeti arányokat. Állítsuk vissza a betűméretet, lépjünk vissza a CSS hozzáadásához, és haladjunk a következő részhez: a színekhez.
Érthető módon nem lehet minden blog kék. A háttér sem mindig tiszta fehér. Tehát az itt beállított színeket minden egyes esetben meg kell változtatnunk, hogy igazodjunk a dizájnhoz, és nem kis kísérletezésbe telhet a színátmenetet pontosan reprodukálni mondjuk sárga vagy zöld alapon. És mi van akkor, ha a megrendelő a gombokat egyenként szeretné színezni? Ha egy kicsit is eltérünk a pontos árnyalatoktól, csúnya eredményt kaphatunk. Könnyítsük meg a saját dolgunkat is azzal, hogy egy fő színt hagyunk meg – ezt fogjuk később állítani –, a többit pedig részben átlátszó szín-értékekké konvertáljuk az rgba és hsla formátumok segítségével. Az RGBA értékek a sima RGB értékek egy átlátszósági tartománnyal kiegészítve. Jelenleg a gomb árnyéka szürke, tehát ha ugyanezt a hatást szeretnénk elérni nem fehér háttéren, egy félig áttetsző fekete árnyékot állítsunk be. Ugyanez megfelel a szövegárnyéknak is (valójában az is szürke, csak kék alapon), a keret pedig ugyanígy épül fel, csak jobban átlátszik.

.blog-pager a:link, .blog-pager a:visited {
    padding: .3em .8em;
    border: 1px solid rgba(0,0,0,.1);
    background: #58a linear-gradient(#77a0bb, #58a);
    border-radius: .2em;
    box-shadow: 0 .05em .25em rgba(0,0,0,.5);
    color: white;
    text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
}

Az utolsó módosítás egyben a legfontosabb: a színátmenet. Láthatjuk, hogy a #58a érték az alapszín, ezért ezt tartsuk meg. Így a #77a0bb értéket kell kitalálnunk, mi legyen. Szintén valami erősen áttetszőre van szükségünk, valamivel világosabbra, mint az alapszín. A HSLA értékek pont ebben segítenek. Az "A" itt is az átlátszóság, a többi a "hue-stauration-lightness" értékeket adja. Az első a színt mondja meg, ezt állítsuk 0-ra, így nem fog zavarni, de akármennyi lehetne. A második a szaturáció, telítettség (Photoshop-mesterek előnyben), vagyis mennyire legyen színes (az előzőekben beállított színnel telített). Mivel az alapszín egy árnyalatát szeretnénk megkapni, ezért ez lehet 0% (ezt százalékban kell megadni). Emiatt mindegy a "hue" érték. A harmadik a fényerő, és mivel egy világos árnyalatra van szükségünk, nyomjuk fel a maximumig, legyen 100%. Ha csak ennyi lenne, sima fehér színt kapnánk, tehát állítsuk az átlátszóságot mondjuk 20%-ra (.2), és készen vagyunk. Miért nem RGBA-értékekkel szórakoztunk ennél a résznél? Megtehettük volna, azért vezettem be a HSLA-t, mert ezzel könnyebb árnylat-színeket kezelni. Sötétebb színre van szükségünk? A fényerőt vegyük le. Legyen világosabb? Kevesebb átlátszóságot! Ha bizonyos színeket szeretnénk keverni, a szaturáció és a szín értékeket állítsuk nullától különbözőre, és készen is vagyunk. Már csak egy lépés maradt ki: a színátmenet második tagját változtassuk átlátszóra ("transparent"), így az alap háttérszín egyszerű változtatása azonnali eredményt hoz. A kész kód:

See the Pen dOapGz by Szuzs (@szuzs) on CodePen.

A gombhatású linkünk megegyezik az első verzióval, hurrá! A mérete az oldal betűméretétől függ, így változtatható, a színe pedig mindössze két helyen jön elő, mindkétszer megegyezik, tehát ez is egyszerűen állítható. Adjunk lehetőséget a Testreszabás menüben állítani! Előbb mentsük a módosításokat ("Alkalmazás a blogon" gomb), és lépjünk ki a Testreszabás menüből a "Vissza a Bloggerhez" linkkel.

Már volt szó a Blogger CSS-tagekről, most ezt a tudást fogjuk használni. Menjünka Sablon HTML-szerkesztése pontjára, és a <b:skin> elemek közti három pontra kattintva hozzuk elő a teljes kódot. Keressük meg az elején a leírásokat. Mivel linkekről van szó, érdemes a linkek fülhöz adni a beállítandó színeket, de létrehozhatunk pl. egy "Egyebek" fület is, ahová az összes speciális módosításunkat gyűjthetjük. Ha a linkekhez adnánk, keressük meg a Group description="Links" részletet (a szövegszerkesztő dobozába kattintva Ctrl+F előhozza a keresőmezőt, ide másoljuk be a keresendőt), és a csoport zárótag elé szúrjunk be egy üres sort.

A linkek színeinek beállítása CSS-változók segítségével

Az előtte lévő sort másolhatjuk, pár dolgon kell változtatnunk. Az első a name attribútum értéke: adjunk valami beszédes nevet, pl. navigation.link.color. A leírás (description) lehet magyarul (sajnos ha angol, nem fordítja automatikusan a Blogger), mondjuk "Navigációs linkek színe". A típus ugyanaz, az alapértelmezett és az aktuális értékek ízléstől függőek, lehetnek ugyanazok, mint az alap linkeknél. Én a példában használt #5588aa értékeket használtam. Ha szabad kezet szeretnénk adni a testreszabáshoz, a navigációs linkekhez tartozó szöveg színét is beállíthatjuk ugyanitt. A neve legyen navigation.link.text.color, a leírás "Navigációs link szöveg színe", alapértelmezetten és aktuálisan pedig #ffffff.
Menjünk a </b:skin> sorhoz. Fölötte található a nemrég a Testreszabás menüben begépelt kódunk. (A másik menüből nem fogjuk elérni többet, mert módosítottuk a HTML-t.) A #58a értéket (két helyen) cseréljük $(navigation.link.color) kifejezésre, a szöveg színét ("white") pedig $(navigation.link.text.color)-ra. Innentől kezdve a Testreszabás menüben állítható a linkek és a szövegük színe, semmiféle egyéb CSS-bűvészkedésre nincs szükségünk. Ha ezt az egész HTML-sablont átadjuk másoknak, ők is könynen boldogulnak vele, illetve ha később a rendelő meggondolja magát, és más színt szeretne az egész blognak, könnyen adjusztálhatjuk a navigációs linkeket.
Persze a trükk működik kevésbé csicsás gombokkal (egyszerű keretes linkek), és tulajdonképpen bármely hozzáadott CSS átalakítható ezen módszerek segítségével. Előbb kitaláljuk, beállítjuk pixel pontosan, aztán addig alakítjuk a kódot, amíg "DRY" nem lesz, azaz a változtatandó értékek egy vagy két főbb tulajdonságtól függenek: a méretek százalékban vagy em-ben kerültek megadásra, a színek egy-két főbb szín árnyalataiként RGBA vagy HSLA segítségével; végül ezeket a főbb beállításokat elérhetővé tesszük a CSS-változókon keresztül a Testreszabás menünek.

Összefoglalás

Ebben a cikkben továbbfejlesztettük az eddigi kódjainkat, és létrehoztunk egy "DRY" gombhatású linket CSS-kódok, illetve Blogger-specifikus CSS-változók segítségével. Ezt már további CSS-ismeretek nélkül is lehet szerkeszteni, ami nagy előny, ha könnyen használható sbalonokat tervezünk laikus felhasználóknak.
Ha vannak kódjaitok, akármilyen modulról, szövegdobozról, menüről, bármiről, és gondot okoz az ilyen átalakításuk, de szeretnétek több helyen is használni, küldjetek levelet a Kapcsolat oldalon keresztül, vagy írjatok megjegyzést, segítek. (Persze ha nem a tietek a kód, írjátok oda a forrást is.) Ha bárki elakadt a tutorial során, kérdezzen nyugodtan! Bármivel kapcsolatban szívesen várom a kérdéseket!
A példakód Lea Verou: CSS Secrets c. könyvéből szármzik.