sunnuntai 16. helmikuuta 2014

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

10 kommenttia:

  1. Miten ihmeessä saisin tuon taustan varjostettua? siis noi reunat, niin kuin tässä kyseisessä blogissa ---> thenextepisode-katarina.blogspot.fi

    VastaaPoista
  2. Pahoittelut, että vastaan vasta nyt! Olin Roomassa 21. - 26.2. joten netissä pyöriminen ei juurikaan kuulunut matkan ohjelmiin. Mutta asiaan.. :D

    Tässä on koodi siihen, jota tietysti voi muunnella oman mielen mukaan (mm. taustan varjostuksen väriä):
    .content-outer {
    -moz-box-shadow:
    5px 5px 30px #9F8B75;,
    5px 5px 20px #9F8B75; (content.shadow.spread) rgba(5, 5, 0, .15);
    -webkit-box-shadow:,
    5px 5px 30px #9F8B75;
    5px 5px 20px #9F8B75; (content.shadow.spread.webkit) rgba(5, 5, 0, .15);
    -goog-ms-box-shadow:
    5px 5px 30px #9F8B75;,
    5px 5px 20px #9F8B75; (content.shadow.spread.ie) #888888;
    box-shadow: 0 0 30px 5px #9F8B75;(content.shadow.spread) rgba(5, 5, 0, .15);
    margin-bottom: 1px;
    }

    VastaaPoista
  3. Kiva tää blogi, oot auttanu minuukin tosi monessa asiassa.
    Mutta miksköhän mun blogissa mun kuvien välit ei pienene vaikka käytänkin flickrliä?
    Oon ihmetelly tota tosi kauan, enkä oo löytäny vastausta mistään.

    VastaaPoista
    Vastaukset
    1. Kiva kuulla! Ikävä kyllä Flickr ei aina pienennä kuvien välejä. Onneksi on olemassa kuitenkin toinen keino, nimittäin kuvien välien pienentäminen koodilla. Lukaisepa aihetta käsittelevä postaus (linkkaan kommentin alapuolelle) ja tee kuten siinä käsketään, niin kuviesi välit pienentyvät 99% todennäköisyydellä :-) Huomaathan, että koodi on testattu mallilla Simple.

      http://blogikoodeja.blogspot.fi/2013/10/kuvien-valit-pieneksi-ilman-flickria.html

      Poista
  4. Laitoin sittenkin varjostukset takaisin kuviin kun mielestäni niihin tulee jotenkin enemmän eloa mutta saako niitä suuremmaksi? eli tässä tapauksessa tarkoitan enemmän leveyttää. En varmaan tarvitse enää linkkaa blogia :D

    VastaaPoista
  5. Kiitos paljon, tästä oli apua! :)

    VastaaPoista
  6. Kiitos, oli apua! :3´

    Mulla ainakin varjon väri on harmaa blogissani, joten tiedätkö voiko sitä millään tavalla muuttaa vaikkapa mustaksi?

    VastaaPoista
  7. Yritin saada varjostukset pois mutta ei onnistunut..mikäköhän on vialla?
    http://piasundell.blogspot.fi

    VastaaPoista
  8. Apuva! Miten saisin noihin gadgettien kuviin kivan varjostuksen? Onko siihen olemassa koodia ja samoin välilehtien teksteihin ?

    VastaaPoista
    Vastaukset
    1. Moi! Haluaisitko siis tässä postauksessa esitellyn varjostukset gadgetin kuviin? Tässä koodi siihen:
      .sidebar img{
      padding: 0px;
      border: none;
      background: transparent;
      box-shadow: 1px 1px 10px rgba(0, 0, 0, .8);
      }

      Välilehtien teksteihin varjostukset:

      .PageList {text-shadow: 0px 0px 3px #000000 !important;}

      Poista

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