Szöveg és link formázás

Buu tündérkéim! :3


Remélem mindenkinek fantörpikusan telik a hétvégéje :3 Gondoltam hozok egy ilyen kis kiegészítést, mivel a blogger sablon nem igazán nyújt ilyen választási lehetőségeket, de ettől függetlenül jól jöhet. Tulajdonképpen nagyon egyszerű, csak tudni kell, mi- mit jelent. Alapvetően a sablonok segítségével beállítható az alapszöveg mérete és típusa, illetve a linkekkel is lehet variálni. Ez mind szép és jó, ám igazából temérdek más lehetőség is akad, nézzük tehát ezeket. Fontos még, hogy ezek mindegyikét egy html/javascrpitbe mentsétek majd el e közé a kód közé:

<script type="text/css"> .... </script>

Kezdjük azokkal amiket majd a továbbiakban beírhattok a megfelelő helyekre:
  • text-shadow: 1px 1px 10px #666; --> árnyék kerül a szöveg mögé. Szín és méret tetszőlegesen változtatható.
  • letter-spacing: 1px;--> A betűk közti távolság mérete. 4px-él ne állítsd nagyobbra, mert csúnya lesz.
  •  border-bottom:#666 dotted 2px; -->pontozott vonal lesz a szöveg alatt. Szín, méret állítható.
  •  border-bottom:#666 dashed 2px; -->szaggatott vonal lesz a szöveg alatt. Szín, méret állítható.
  •  border-bottom:#666 double-->kettős vonal lesz a szöveg alatt. Szín állítható.
  • word-spacing: 1px; --> A szavak közti távolság mérete. 5px-él ne állítsd nagyobbra, mert csúnya lesz. Illetve, ha - írsz, értelem szerűen összenyomod a szavakat.
  • font-family:verdana;--> A szöveg betűtípusa.
  • font-size: 10px; --> A szöveg mérete.
  • background-color:#666;--> Háttér szín, itt a szöveg hátterénél lehet majd használni.
Kurzor fajták:
Ezeket gyakorlatilag bárhova beilleszthetitek, így mikor ráviszitek a szövegre az egeret átváltozik.
  • cursor: crosshair; --> Kereszt. 
  • cursor:move; --> Nyíl négy irányú.
  • cursor:wait; -->Homokóra.
  • cursor:hand; -->Kéz.
  • cursor:help; --> Kérdőjel.

Szöveg megváltoztatása:
A szövegnél igazából 2 dolog az amit állítani lehet (illetve most csak ennyit mutatok), és persze még a hozzá tartozó kiegészítők. A fentiekből célszerű a letter-spacing és word-spacing közül választani, ugyanis a többi túl csicsássá vagy épp olvashatatlanná tenné a szöveget.

  • body{...}--> A pontok közé írd, amit szeretnél állítani.


Kiegészítés:
Ugyebár vannak a kiemelések, amikkel a fontosabb mondanivalónkat szoktuk hangsúlyosabbá tenni. Ezek a dőlt félkövér és aláhúzott szavak. A blogger sablon alapjáraton nem ad ezeknek semmi különlegességet, de kóddal megoldhatóak ezek is. Abban az esetben, ha más betűtípust szeretnél ezekhez, azt is átírhatod, mérettel együtt. Így minden kiemelésnél az általad átírt módon fognak megjelenni. A pontozott rész helyére illeszd be a fentiek közül kiválasztott "effektet".
  • b{...}-->Ez a félkövérhez tartozó.
  • u{...}-->Ez az aláhúzott.
  • i{...}-->Ez a dőlt.

Link megváltoztatása:
 A linkeket is gyakorlatilag kedvünk szerint átalakíthatjuk, a titok nyitja annyi, hogy e közé kell írni :D

Alap lehetőség:
A:link, A:visited, A:active{...}--> Ez az alap, ezen ne változtass. A pontozott rész helyére írd majd amit szeretnél átalakítani

 Ha ráviszed az egeret:
 A fenti listából ide is gyakorlatilag bármit beilleszthetsz. Ide már azt írd amit akkor szeretnél látni, ha ráviszed a linkre az egeret:
A:link, A:visited, A:active{ide jön az alap beállítás}

A:hover { ...}---> A pontozott rész helyére írd amit akkor szeretnél, ha ráviszed az egeret.


Kérek minden más design blogot, hogy legyenek tekintettel arra, hogy ezzel én igen is DOLGOZTAM. Tehát, legalább egy linket tegyenek ki aszerkesztők, ha már egyértelműen tőlem szedték az alapot. Köszönöm.



Crystal

Nincsenek megjegyzések:

Megjegyzés küldése