keskiviikko 2. heinäkuuta 2014

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

Postauksen otsikon varjostamista toivottiin, joten toteutin sen mielelläni! Jos teille tulee muutenkin jotain postausehdotuksia, niitä saa aina laitella! Teitä on muuten tullut taas hurjasti lisää, nimittäin lukijapalkki näyttää yli 50 lukijaa! Mahtavaa!

NÄIN TEET:
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Liitä CSS:n kenttään alla oleva koodi:

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

Black tarkoittaa varjostuksen väriä. Väri voi olla joko Heksakoodi (#000000-muotoinen, täällä linkki heksapalettiin ja täällä heksakoodivärien ohjeeseen).

Punaiset kakkoset määrittävät, millainen varjostuksesta tulee paksuudeltaan/toiminnoiltaan. Ensimmäinen kakkonen määrittää, miten vinoon oikealle/vasemmalle (riippuu käytetäänkö posiitivista vai negatiivista lukua: negatiivinen eli miinusmerkki luvun edessä vie varjostuksen vasemmalle) varjostus menee. Toinen kakkonen määrittää, miten alas varjostus menee otsikosta. Kolmas kakkonen määrittää varjon selvyyden: jos käytetään numeroa 1, varjo on musta ja "ohut". Jos kohdassa käytetään numeroa 10, varjosta ei enää saa tekstin suhteen mitään selvyyttä, vaan varjo on ikään kuin pilvi.

Tässä vielä kuvia ja koodeja, jotka havainnollistavat, miltä varjo näyttää missäkin asetuksissa:

KUVA 1
Käytetyt asetukset: 
h3.post-title a:hover{
text-shadow: black 0px 10px 1px;
}

KUVA 2

Käytetyt asetukset:
h3.post-title a:hover{
text-shadow: black -10px 2px 10px;
}

KUVA 3


 Käytetyt asetukset:
h3.post-title a:hover{
text-shadow: red 1px 2px 4px;
}


ENTÄS JOS VARJOSTUKSEN HALUAA OTSIKKOON PYSYVÄSTI (= se on otsikossa ilman hiiren viemistä otsikon päällekin)?

Toimi samalla tavalla kuin ylempänä postauksessa esitellyssä ohjeessa, mutta laita koodin tilalta tämä koodi:

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

 Kohdat ovat siinäkin samoja, mutta näin varjostus on aina postauksen otsikossa ilman, että hiiren vie otsikon päälle. 

Toivottavasti tästä oli jollekulle apua!

11 kommenttia:

  1. Hei! Miten tuon bannerin saisi ihan tuonne ylös asti että taustaa ei näkyisi ylhäältä. Tuollein niiku sinulla on täällä kun itselläni näkyy taustaa ylhäältä ja tahtoisin sen sinne ylös asti:)

    http://jonnskuvalokuvaa.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Heippa Jonsku! Ensinnäkin, tosi hyvä, että linkitit linkin blogiisi! Tässä koodi, jonka lisäämällä CSS:ään saat bannerin ihan ylös asti :) :

      .header-outer{
      margin-top: -10px;
      }

      Margin-top:-jälkeistä numeroa voit muuttaa mieleisesi mukaan. Miinusluvut vievät banneria ylöspäin, ja positiiviset luvut vievät banneria taas alaspäin. :)

      Toivottavasti tästä oli apua! (:

      Poista
    2. Hei! Vaivaan sinua taas :D Kun tuo banneri nousi mutta sen sivut ei, niin miten saisin ne myös samalle tasolle/korkeudelle?:)

      Poista
    3. Anteeksi Jonnsku kovasti, että unohdin ongelmasi! Hässäkkää on ollut vaikka minkänäköistä, mutta turhat selittelyt - ne ovat out :-D Luin näköjään huonosti tuon aiemman ongelmasi, sillä koodi oli tarkoitettu vain ja ainoastaan banneriin. Anteeksi vielä siitäkin !!
      Mutta hei, jos vaikka löydät tämän vastauksen, niin tässä sulle koodi (lisää se siis CSS:ään):

      .content-inner {
      margin-top: -30px;
      }

      Tuota lukua -30 sitten vain muokkailet :-)

      Poista
  2. Hei, minulla on pikku pulma ulkoasun kanssa. Pyöristin blogin kulmat, mutta siihen jäi näkymään haaleana ne kulmat kuiteskin, nii osaisitko neuvoa miten saisin ne pois sieltä?

    http://mantajewe.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Anteeksi, että vastaan ongelmaasi vasta nyt! Kesätyöt on painanu päälle ja muutenki nää ihanat ilmat, jolloin oon viettäny vapaat illat mieluummin ulkona kuin koneen ääressä. Mutta nyt näin aamulla sain hyvän hetken ratkoa pulmaasi :)

      Ongelma on yksinkertainen: sulla on käytössäsi Simple-malli, se, jossa on muokkaamattomana siniset reunat (kun menet malliin ja klikkaat kohtaa simple, se on sen valkoreunuksisen ja keltareunuksisen mallin välissä). Kun käytät pyöristämiskoodia Simplen sinisessä mallissa, kulmat jäävät haaleana näkyviin.

      Joten, suosittelen sinua vaihtamaan mallia valkoreunuksiseen simpleen, nimittäin siinä mallissa pyöristämisen pitäisi toimia ongelmitta. Ennen mallin vaihtamista sun kannattaa kopsata kaikki CSS:ssä olevat koodit, sillä ne häviävät muuten tuhkatuuleen.

      Toivottavasti tästä on apua! Ongelma saattaisi olla helpomminkin ratkaistavissa, mutta tämä on ainakin toimiva vaihtoehto. :)

      Hyvää kesän jatkoa! (:
      + Kysy ihmeessä lisää, jos neuvoni eivät toimikaan!

      Poista
  3. en saa enää varjostuksia pois vaikka poistan koko koodin! olen tapellut tämän kanssa jo liian kauan. mikä saakutin vika tässä on?? poistin koodin ja nyt joka otsikossa on varjot!!

    VastaaPoista
    Vastaukset
    1. Anteeksi, että vastaan liki viikon myöhässä! Ikävä kyllä mun on vaikea auttaa sua, kun et linkittänyt blogiasi :/ Blogin lähdekoodin tulkitseminen on hyvin oleellinen osa ongelmien ratkaisemista. Jos siis huomaat tämän kommentin, laitathan linkin blogiisi! Yhteen ongelmaan voi olla hyvin monta ratkaisua, joista vain yksi sopii omaan blogiin. Sen takia olisi tärkeä tietää, mistä ongelma johtuu. Lisäksi ongelman näkeminen blogissa on tärkeää, jotta hahmotan varmasti, missä ja miten ongelma on. :)

      Poista
  4. Moikka! Sun koodit on tähän asti toiminut moitteettomasti mun blogissa mutta nyt kun yritän poistaa ton koodin jolla voi varjostaa otsikon eli:
    h3.post-title a:link{
    text-shadow: black1px 2px 4px;
    }

    niin ni se ei poistu ;((.

    http://pippurinenponi.blogspot.fi/

    VastaaPoista

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