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!

Toivepostaus: Kivat varjostukset kuville

Se olisi ensimmäisen toivepostauksen vuoro! Toivepostauksia voi kommentoida aina tähän postaukseen. Mutta siis asiaan! Tässä postauksessa käsitellään kuvien varjostuksia. Jos mitään ei blogissa muuteta, kuvissa on usein valmiina varjostukset. Ne eivät ole kuitenkaan erityisen kauniit. Onneksi on olemassa erilaisia vaihtoehtoja saada blogiin näyttävät ja siistit varjot.

Postauksessa olevalla koodilla saa aikaan tällaiset varjostukset (siis jos koodin lukuja ei muuta):

 (kuva ei ole oma otokseni, linkki siihen: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEO66SCfjP9CY7ELSNymvYfC9l7sxhYnnbN4UH9GD0t9d0MUXpKyphItu6nCBLmDh7V_gY5ng6M6LWyYQXbsDMHLGXsZ3UKaiKTf9ziANIRBI6v8gk-I7j8TgNUrGfL3Wn2sv0MYw-xg/s1600/image554.jpg)

Jos haluat yllä olevan kuvan kaltaiset varjostukset, mene Malli -> Mukauta -> Lisäasetukset -> Lisää CSS ja liitä alla oleva koodi sinne:

.post-body img, .post-body .tr-caption-container {
padding: 0px;
border: none;
background: transparent;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .8);
}

Kuten aina, koodista värjättyjä lukuja voit muuttaa mieleisesi mukaan. 

Siniseksi värjättyä lukua muuttamalla voit muuttaa varjon suuruutta. Kokeile siihen vaikka lukua 100 :D

Punaiseksi värjättyä lukua muuttamalla voit muuttaa varjon tummuutta. Siihen vaikuttavat vain luvut 1-9. Mieluinen tummuus selviää vain kokeilemalla.

***

 Teitä on tullut jostain kummasta ihan kamalasta lisää, kiitos siitä! Ja kiitos myös palautteestanne - sitä on aina niin mukava saada ja lukea! Mutta tosiaan, toivepostauksia saa laitella postauksen alussa linkittämääni postaukseen. Olisi nimittäin huippua toteutella sitä, mitä te toivotte! Kohta menee 30 lukijan raja rikki - mahtavuutta!

 xoxo iltsu