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.