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

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 akítv. Ha rákattintunk, akkor "lenyomjuk", azaz a háttérszín mélyül, az árnyék pedig kisebb (akár el is tűnhet). Más módszer, ha a gomb kap egy kis peremet, és nem az árnyékokkal játszunk.
Először megnézzük, hogyan készíthetünk "lapos" gombot, ami hover és aktív állapotban másképp viselkedik. Utána elkezdjük térhatásúvá alakítani, majd ezt a kódot optimalizáljuk, hogy a lehető legminimálisabb változtatással alkalmazhassuk újabb és újabb esetekben.

Megoldás

Elsőként szükségünk lesz egy linkre. Létre is hozhatunk egyet pl. egy külön modulban a már ismert HTML-elemek segítségével (a), vagy beszúrhatunk egyet egy bejegyzésbe, de én most az oldalon található navigációs linkeket fogom használni. Ezeket a Blogger automatikusan létrehozza nekünk, HTML-bűvészkedés nélkül nem változtatható az elhelyezkedésük, ritka, hogy hiányozzanak, és egy egyedi dizájn esetén elképzelhető, hogy egyedi formát szeretnénk adni nekik, így tökéletes választásnak tűnnek.
Ehhez szükségünk lesz a navigációs linkek osztályára vagy azonosítójára. Ezt a már ismert módszerekkel szerezhetjük meg. Az egész navigációs csík a blog-pager azonosítót (és ugyanilyen nevű osztályt) viseli, ezen belül három link helyezkedik el: egy a főoldalra mutat (osztályazonosítója: home-link), egy az időben korábbi elemre (oldal vagy bejegyzés) (osztály: blog-pager-newer-link), végül egy a régebbi elemre (osztály: blog-pager-older-link). Ha mindegyiknek külön stílust szeretnénk, állítsuk őket egyenként, ha mindhárom legyen ugyanolyan, érdemes a tartalmazó div osztályán keresztül az összes gyerekelemet állítani. Utóbbi esetben figyelnünk kell arra, hogy míg a főoldal linkje közvetlenül a div gyermeke, addig a másik két link egy span elembe van ágyazva, így közvetlen leszármazottként nem érhetőek el. A gyakorlatban tehát a .blog-pager > a helyett érdemes a .blog-pager a kijelölést használni.

Újfent a Személyre szabás menüben szerkesztünk

Megint a Személyre szabás menü Stíluslap (CSS) hozzáadása pontját fogjuk használni, itt állítjuk be a linkek stílusát. Most sem szeretném kijelölni az egy és igaz utat, elvégre ilyen nincs, mindenki azt használja, amire neki szüksége van. Ha valaki csak a főoldalra mutató linket szeretné átállítani, használja annak az osztályazonosítóját, ha mást, akkor azt. Ha az előre és vissza mutató linkekre van csak szükség, a kijelölőjük a .blog-pager-newer-link, .blog-pager-older-link (a vezető pontokra vigyázzunk!). A jobb láthatóság kedvéért én az összes navigációs linket egyszerre állítom.
Egy kis ismétlés a CSS-alapok közül: egy linknek négy állapota van, ezek sorrendben: link (új link), visited (meglátogatott link), hover (ha épp rávisszük a kurzort), végül az active (ha épp rákattintunk). Ha nem állítunk be semmit, alapértelmezetten az a tag az a:link rövidítése a CSS-ben. A négy állapot nevét kettősponttal választjuk el és egybe írjuk a tag nevével. Egyes állapotok persze nem korlátozódnak csak a linkekre, bármely más elemhez is beállíthatóak (mondjuk a hover gyakran előjön képeknél).
Korlátozott mértékben, de a Személyre szabás egy másik menüpontjában, a Linkek alatt változtathatjuk ezeket az állapotokat a blog minden linkjére vonatkoztatva. A "Fókuszálás színe" pont egyszerre vonatkozik a hover és az active állapotokra. Viszont mi most csak pár linket fogunk állítani, ezért maradunk az egyéni CSS-nél. Mindazonáltal hasznos, ha ismerjük az alapbeállításokat, mert ha nem írjuk felül, ezek fognak megmaradni. Például egy piros színű link jól mutat a fehér felületen, de ha mi a navigációs linkeknek piros hátteret adunk, egy darabig vakarhatjuk a fejünket, mit rontottunk el, miért nem látszik a szöveg.
Kezdjünk neki a "gombosításnak"! Ehhez először hozzunk létre egy téglalapot a link köré. Ennek adhatunk háttérszínt, de hagyhatjuk átlátszónak is akár, majd beállíthatunk egy vastagabb keretet, ami harmonizál a link színével. A keret széle lehet lekerekített. A célunk az, hogy a gombunk másképp viselkedjen hover és active állapotában, mint (nem) meglátogatott linkként. Mivel a navigációs linkeket sokat használjuk, érdemes lehet a link és a visited állapotoknak ugyanolyan beállítást adnunk, így nem lesz zavaró mondjuk a főoldalra vivő link eltérő színe. (A .blog-pager elem stílusa csak a rendes megjelenítés miatt van itt, azt nem kell figyelembe vennetek.)

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

Előfordulhat, hogy a doboz nem jelenik meg rendesen, csak a két szélső keret. Ezt kiküszöbölendő, a szülő elemet is módosítjuk: megnöveljük a méretét. Egyes sablonoknál van egy pontozott vonal is a navigációs csíkon, ezt átállítjuk középre. Érdemes az előző kód fölé rakni a következőt:

.blog-pager {
    line-height: 45px;
    background-position: center;
}

A méret változhat, az előző beállításokhoz a 45 pixeles magasság volt az abszolút minimum, hogy rendesen megjelenjen. Más betűméret és kitöltés (padding) esetén más méret lehet az igazi. Egyelőre pixeleket használunk, ezekkel egyszerűbb dolgozni és személetesebbek. Bár én az üres gomb, széles keret verziót választottam, bárki dönthet másképp, pl. nem ad keretet, de a háttérszínt beállítja (background-color tulajdonság). Tegyük ezt meg itt is, de menjünk két lépéssel tovább: adjunk hozzá árnyékot (a gombnak is, a szövegnek is) és állítsuk a szöveg színét mondjuk fehérre. Mindez, ahogy a színválasztások is, egyéni preferencián alapuljanak, ha valaki világos színű gombot tervez, állítsa a szöveg színét sötétebbre.

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

Beállítottunk egy betűméretet, betűszínt és hozzá egy szövegárnyékot. Felfelé csúsztattuk el egy pixellel és elmostuk eggyel, a színe pedig egy sötétebb árnyalata a háttérszínnek. A háttér egyszerű kék (ugyanaz a szín, mint az előző példában a keret), van egy kis keret (egy sötétkék árnyalat), némi kerekítés, hogy gombosabb hatást keltsen és egy szürke árnyék (egy pixellel lefelé csúsztatva, kissé elmosva). Viszont nem viselkedik másképp, ha ráhúzzuk az egeret.
Ehhez állítsuk be a hover állapotot, illetve ha a kattintás pillanatában is szeretnénk változtatni a gomb kinézetét, az active formához is rendeljük stílust. Először nézzük meg, ha ugyanolyanok! Az első (üres) gombnál cseréljük fel a szöveg és a háttér színét: ehhez szükségünk lesz az eredeti háttérszínre a gomb szövegének színe mellett.

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

A másik lehetőség, hogy külön formázzuk a két állapotot. Például kifényesíthetjük, ha rávisszük az egeret, ezzel felhívjuk a figyelmet a linkre; ha rákattintunk, akkor eltűntetjük az árnyékot a gomb körül, mintha lenyomtuk volna. Kicsit sötétíthetjük a háttérszínt is, mondjuk a keret színére.

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

A következő lépés egy színátmenet létrehozása, hogy a gombunk térhatású legyen. A színátmenetekhez rengeteg módszer létezik, az egyik legegyszerűbb, ha simán megtervezzük egy programmal, ha tetszik, kimásoljuk a kódot és beillesztjük. Sok online eszköz kínál ilyen lehetőséget, ilyen például a Colorzilla "Gradient Generator". Röviden a színátmenetekről: kétszer két fő megjelenési formájuk van: a lineáris és a radiális (elsőnél egy vonal a határ, másiknál egy kör), illetve az egyszerű és az ismétlődő (ugyanaz a színátmenet sokszor ismételhető egy paranccsal). Nekünk a lineáris forma kell jelen esetben. Beállíthatjuk, hány szín szerepeljen, a böngésző pedig automatikusan generálja nekünk a szép, folytonos átmenetet. A határoló vonal helyzete is változtatható, alapértelmezetten fentről lefelé megy át az első szín a másikba, félúton átváltva. Ez lesz az igazi! Így alig kell gépelnünk. Sajnos a színátmenetek a régi böngészők nagy mumusai, 9-es Internet Exploreren és előtte nincsenek is támogatva, a további régi böngészőkön csak előtaggal. Nem állítom, hogy mindez totál felesleges, függ attól is, az olvasóink milyen böngészőket használnak (erre jó a Statisztika menü), de a legtöbb előtagos és filter transzformációval megoldott módszertől eltekinthetünk. Nagyon kicsi az esélye, hogy olyan böngészőt használ valaki, akinek pont arra lenne szüksége. Használhatjuk tehát az előtag nélküli linear-gradient tulajdonságot, esetleg a -webit- előtaggal ellátottat egyes mobil-böngészők kedvéért. Én törekszem az egyszerűségre (és a kevesebb kódra), így csak az előbbit fogom bemutatni. (Nem különbözne sokban a többit sem belerakni, egy új sor, csak linear-gradient helyett -webkit-linear-gradient, a paraméterek ugyanazok.)

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

Elvileg a kód egy sor, csak nem fért ki (de ugyebár a whitespace karakterek úgysem számítanak), köztük legalább egy szóköz van elválasztásul. Lehetne két sorba is írni, egy background a színnek, egy az átmenetnek. Színt azért teszünk be az átmenet elé, ha tényleg régi böngészőn (vagy mobilon) nézi valaki, a felhasználói élmény ne csökkenjen számottevően. Legalább a színt lássa, ha már az átmenetet nem tudja a böngészője megjeleníteni. Mivel semmiféle speciális dologra nincs ezen kívül szükségünk, nem adtunk át további paramétereket a linear-gradient-nek, ez így jó lesz.
Mindössze egy (két) sornyi kódot kell kicserélnünk, hogy színátmenetes hátteret hozzunk létre. Használjuk a színes hátterű gombot!

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

Figyelem: backgorund és nem background-color! (Ha véletlen a másik marad bent, nem látszik semmiféle változás, mert a színátmenetet nem fogja figyelembe venni a böngésző.)

Egy másik módszer, ha az árnyékhatás helyett "peremet" kap a gomb, ami active állapotban eltűnik vagy csökken. Ilyenkor nem elmossuk az árnyékot, hanem élesen hagyjuk (az utolsó érték 0), és active (vagy már hover) állapotban csökkentjük az Y-irányú eltolás mértékét (második argumentum). Ezzel a gombárnyék kisebb lesz, ami azt mimikálja, mintha a gombunk közelebb került volna a felszínhez, azaz "lenyomtuk". Hogy ezt a hatást erősítsük, általában felfelé eltoljuk a gombot, majd lenyomás hatására visszaállítjuk: ezt a postition érték módosításával tehetjük meg. Álljon itt egy példa erre a módszerre is:

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

Összefoglalás

Ebben a bejegyzésben áttekintettük, milyen módszereink vannak egy link gombhatásúvá tételére: készíthetünk "üres", vastag keretes linkeket, de "teli", sőt a linear-gradient tulajdonság segítségével térhatású gombokat is. Az árnyékok és a gomb ügyes beállításával a lenyomva tartásnak is külön stílust adhatunk. Ha a linkek négy állapotának más és más CSS-kódot adunk, változatos felületeket hozhatunk létre.
A következő részben az előzőekben látott kódot alakítjuk tovább: minimalizáljuk és használhatóvá tesszük a Személyre szabás menü számára, hogy a CSS-ben nem jártas felhasználók is könnyen tudják kezelni.