Tekstin otsikon varjostus hiiren vietäessä päälle -efekti

Kuinka saada otsikkoon varjostus hiiren vetäessä sen päälle?

Lisää alla oleva koodi CSS:ään:

h3.post-title a:hover{
text-shadow: black 3px 2px 2px; 
}


Black kohta tarkoittaa varjostuksen väriä. Väri voi olla heksakoodi, tai grey / black jne. Punaiset kakkoset määrittävät, millainen varjostuksesta tulee paksuudeltaan. Ensimmäinen kakkonen määrittää, miten vinoon oikealle/vasemmalle (riippuu käytetäänkö posiitivista vai negatiivista lukua) varjostus menee. Toinen kakkonen määrittää, miten alas varjostus menee otsikon "oikeasta tekstistä", eikä varjosta. Kolmas kakkonen määrittää varjon selkeyden: jos käytetään numeroa 1, varjo on musta ja ikään kuin ohut. Jos kohdassa käytetään numeroa 10, varjosta ei enää saa teksin suhteen oikeastaan mitään selvää, joten itse suosittelen designin vuoksi ehkä numero 5:sta. 

Jos haluat varjon otsikkoon pysyvästi = ilman, että siihen viedään hiiri päälle, lisää seuraava koodi edellisen tilalle:

h3.post-title a:link{
text-shadow: black1px 2px 4px; 
}


Kohdat ovat täysin samat kuin ensimmäisessäkin koodissa, nyt vain varjo pysyy koko ajan.

Ei kommentteja

Muista kysyä, jos mitään tulee mieleen! ♥