sunnuntai 5. lokakuuta 2014

Letter spacing -efekti tekstin otsikkoon

Letter spacingia eli t ä l l a i s t a kirjoitusasua pyydettiin blogin tekstin otsikkoon hiiren vietäessä päälle, eli kun hiiri on otsikon päällä, kirjainten välit kasvavat. En osaa asiaa sen paremmin selittää, joten toivottavasti ymmärrätte!

Jos siis haluat tämän efektin blogiisi (sovellettavissa totta kai muuallekin kuin blogin tekstin otsikkoon), toimi näin: Malli -> Mukauta -> Lisää CSS:ään alla oleva koodin pätkä:

h3.post-title a:hover {
letter-spacing: 0.2em;
}


Lukua 0.2 voi muuttaa kohti omaa mieltymystään - siksi se on punaisella. Mitä suurempi luku on, sitä suurempi on kirjainten väli. Sininen a:hover taas kertoo, että kyseessä on hover-efekti (=efekti, jossa linkille tapahtuu jotain, kun hiiri viedään sen päälle, esim. juuri tämä letter spacing -juttu hoverina). Poistamalla koodista kohdan a:hover letter spacing -efekti on pysyvä tekstin otsikossa eikä hover-efektiä tapahdu. 

17 kommenttia:

  1. voi kiitos tästä koodista! Mutta osaatko neuvoa, miten saan tuon automaattisen mustan alleviivauksen postauksen otsikosta pois? :) Kuva: Uusi päivä Jakso 17

    VastaaPoista
    Vastaukset
    1. Ole hyvä, hienoa jos oli toivottu :)!
      Osaisin luultavasti auttaa, mutta koska et linkannut linkkiä blogiisi (en ihan ymmärtänyt, mikä tuo kuva uusi päivä jakso 17 -juttu oli), ongelman ratkaisu on vaikeampaa (en näe blogisi lähdekoodia).

      Eli automaattinen musta alleviivaus. Tarkoitatkohan sitä, minkä olet itse jollain koodilla blogiisi laittanut vai jo alunperin mallissasi olevaa toimintoa? Jos olet alleviivauksen laittanut blogiisi koodilla, alleviivaus on helposti poistettu poistamalla koodi CSS:stä (jos koodin sinne laitoit) tai HTML:stä (jonka jälkeen et ikävä kyllä välttämättä enää voi käyttää CSS:ää toimivasti). Jos taas automaattinen alleviivaus on ollut postauksen otsikossa ihan automaattisesti ilman mitään muokkauksia, saat ongelman pois muokkaamalla Mallisi lisäasetuksia (luultavasti tuolta, eli mallin suunnittelutyökalusta). :)

      Poista
  2. kiitos! Tulikin heti käyttöön :D

    http://vilmamariaa.blogspot.fi/

    VastaaPoista
  3. Hei! Tämä oli tosi hyvä, tykkään! Tiedätkö, miten saisi saman efektin, mutta gadgetin otsikkoon?

    VastaaPoista
    Vastaukset
    1. Kiva, että tästä oli apua! Gadgetien otsikot eivät ole linkkejä, joten hoveria (= efekti, kun hiiri viedään päälle ja tapahtuu jotain, esim. just tämä letter spacing, jossa kirjainten väli kasvaa), ei niihin saa. Jos kuitenkin tarkoitit, että miten gadgetien otsikoihin saa ns. pysyvän letter spacingin, lisää tämä koodi blogisi mallin suunnittelutyökalun CSS:ään:

      h2 {
      letter-spacing: 0.2em;
      }

      luku 0.2 voi muuttaa :-)

      Poista
    2. Okei, harmi ): Mutta kiitos kuitenkin vinkistä, kokeilen!

      Poista
  4. Tästä blogista on ollut tosi paljon apua, kiitos! Mutta hei mitenn tän sais kaikkiin linkkeihin? Oon yrittäny ite tehä sellasta koodia mutta se vaan vetää sen sillein että se on kokoajan harvalla välillä. Anteeks sekava selitys mutta joo osaiskko neuvoo? http://pippurinenponi.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Mahtavaa kuulla Pihla :)! Poistat vaan tän postauksen koodin alusta kohdan h3.post-title

      Poista
  5. Heei.. Oon aikasemmin laittanut tähän mun blogin otsikkoon ton alleviivauksen (mun mielestä koodilla), mutten enää löyä sitä mistään enkä enää saa sitä pois, joten osaisitkohan auttaa, et miten sen saa pois...? Sit toiseks, että kun toi mun harvennusefekti on siinä otsikossa, nii se tulee siihe sillei tavallaan "töksähtäen" että se ei mee silleen smoothisti niinku mun kaverin blogissa ( http://juiskumariia.blogspot.fi/ ), että mistähän se johtuu? Mun blogi -> http://tippsuu.blogspot.fi/

    Toivottavasti tajusit :D

    VastaaPoista
    Vastaukset
    1. Moi Tiia! Alleviivausta ei ainakaan enää näy blogissasi - olet ilmeisesti saanut sen pois? Ja tuohon liukuvaan letter-spacingiin koodit:

      h3.post-title a:hover{
      text-shadow: 3px 2px 2px;
      }
      h3.post-title a:link{
      text-shadow: px 1px 3px;
      }
      h3.post-title a:link {
      text-decoration:none;
      transition: 0.2s;
      -moz-transition: 0.2s;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      }
      h3.post-title a:hover {
      text-decoration:none;
      transition: 0.5s;
      -moz-transition: 0.5s;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      }
      h3.post-title a:link{
      text-shadow: white 1px 2px 4px;
      }
      h3.post-title a:hover {
      letter-spacing: 0.3em;
      }
      h3.post-title {
      font-variant:
      font-family: times new roman;
      letter-spacing: 2px;
      }
      h3.post-title {
      display: block;
      border-bottom: 0px solid #000000;
      }

      Poista
  6. Voisiko tälläisen saada myös noihin bannerin alla oleviin sivuihin ?
    Esim tuolla mun blogissa on nuo "blogi" "Lilja" ja "Nadia" nii voisiko niihin saada kanssa letter spacing -efektin?

    elamaniheposet.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Juu voi! Tässä koodi siihen:
      .tabs-inner .widget li a:hover {
      letter-spacing: 3px;
      }

      Lukua 3 voi muuttaa.

      Poista
  7. joskus laitoin ton koodin blogiini mutta nyt haluaisin sen pois mutten löydä sitä koodia enää css:tä, mitä voisin tehdä?

    VastaaPoista
    Vastaukset
    1. etsit koodin html-koodista ja deletoit sen sieltä :-)

      Poista
  8. Jes, pitääkin kokeilla tätä! Toivotaan, et onnistuu! Suureneeks kirjainten väli tällä koodilla siis perus tekstissä, otsikossa ja esim. gadgeteissa? : o

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)