2016. 09. 10.

Díszes szöveg készítése

A blogunk külsejét nagy mértékben tudják befolyásolni a betűtípusok. Hiába szép a fejléc, hogyha a design nem odaillő, ormótlan, vagy épp túl egyszerű betűtípusokat tartalmaz. Éppen ezért ebben a cikkemben igyekszem néhány olyan tippet bemutatni, amivel szebbé tehetitek őket.

Az első, és legfontosabb: hova illesszük őket? 
Nos, korábban már írtam egy cikket, amelyben elmagyaráztam, hova illeszthettek kódokat, és milyen módon használhatjátok őket. Itt a legfontosabbak a következők lehetnek:
.post-title /a bejegyzés címe/
.column-right-inner h2 /a jobb oldali sidebar modulcímei/
.column-left-inner h2 /a bal oldali sidebar modulcímei/
Nekem az a tapasztalatom, hogy ezeket érdemes díszesebbé tenni, de persze bármi mással, a menükkel, a dátummal is elvégezhető. 

Ezután: hogyan változtathatunk a betűtípuson? 
Bár a sablontervező felajánl néhány lehetőséget, például a bejegyzés címe esetén, azonban előfordulhat, hogy nem csak ezekkel szeretnénk operálálni, hanem valami különlegesebbet szeretnénk az alap  betűtípusoknál. Erre találták ki a Google Fontokat. 
Először is, szükségetek lesz erre a LINKRE. Itt válogathattok kedvetekre a betűtípusok között. Miután megtaláltátok a nektek megfelelőt, jegyezzétek meg a nevét. Másra innen nem is lesz szükségetek.
Ezután, itt van ez a kód: 

<link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Font+Name">
Illesszétek be egy HTML modulba, ahova csak szeretnétek (oldalsávba, láblécbe, stb.), a végére pedig a Font+Name helyére írjátok be az előbb kiválasztott betűtípus nevét. Amennyiben több szóból áll, a szóköz helyett + jelet tegyetek.

Miután ez megvan, menjetek bele a sablontervezőbe, és a változtatni kívánt elemhez írjátok be ezt:

font-family: 'Font+Name';

(Értelemszerűen itt is cseréljétek ki a betűtípus nevére.) Tehát, ha például a bejegyzés címét szeretnénk megváltoztatni Tangerine-re, akkor így nézne ki:

.post-title{font-family: 'Tangerine';}

Miután ez kész, néhány egyszerűbb dolgot is beállíthatunk, például:
color: #ffffff /betűk színe/
text-align: center|left|right  /szöveg igazítása középre, balra, jobbra/
font-size: 30px; /betűméret/
decoration: underline|overline|line-through /aláhúzott, alul-fölül, áthúzott betűk/
transform: uppercase|lowercase| /csupa nagybetű, kisbetű, a szavak első betűje nagy/
font-weight: bold /vastagbetű/
letter-spacing: 4px; /betűk közti távolság beállítása/

Ezek lennének a legegyszerűbb parancsok. Néhány különlegesebb:

Szöveg elforgatása: 
transform: rotate(45deg);

Árnyék a szövegnek:
text-shadow: 2px 2px 5px #000;

Keret a szövegnek:
Ehhez ugyanazt használjuk, mint az előbb, csak kicsit kombinálva.
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, -1px -1px 0px #000;

Nos, ezek lennének. Nem olyan bonyolult, és szerintem sokat tud dobni a designon. 


4 megjegyzés:

  1. Szia!
    Nagyon örülök, hogy ilyen segítségeket is leírtok. Mondjuk ezek egyike se újdonság a számomra, de talán még annyival kiegészíteném, hogy van a transform, avagy "text-transform: capitalize" is van, ahol van mondjuk egy szöveg: "szia, a nevem xy" és minden szó első betűje nagy lesz "Szia, A Nevem Xy"
    Meg a "letter-spacing: (itt egy szám)px" is feltudja dobni a külsőt :)
    Annyit kérdezhetek, hogy hogy lehet felugró chat ablakot csinálni? Nagyon megköszönném, ha leírnátok azt is.

    VálaszTörlés
    Válaszok
    1. Szia!
      Örülök, hogy hasznosnak találod a cikkemet. Valóban, ez nem tartalmazott túl bonyolult módosításokat, de először inkább egyszerűbb kódokat szeretnék kitenni, és fokozatosan haladni a bonyolultabbak felé.
      Köszönöm a tippeket, hogyha nem bánod, ki is egészítem velük a sorrendet. Nem nagyon gyűjtögettem, csak azt a néhányat írtam le, amiket általában használni szoktam.
      A felugró chat ablak alatt mit értesz pontosan? Tudsz esetleg linket küldeni, hogy hol láttál olyat?
      Szimy

      Törlés
    2. Szia, bocsáss meg, hogy eddig nem írtam, de nem jutottam géphez és a bloggert se néztem. Az a baj, hogy nem tudom már pontosan hol láttam, de volt egy csík fix helyen (alul, felül, valahol) és mikor rámentél, akkor lejött (avagy fel) a chat. :)

      Törlés
    3. Oké, így már gondolom, hogy mire gondolsz :D

      Törlés