lauantai 17. kesäkuuta 2017

Koodivinkkejä osa 2

Moi! Tänään ollaan taas koodivinkkien parissa! Jos kaipaat perus koodeja keskitykseen liittyen, niin käyhän lukemassa edellinen koodivinkkejä-postaus. Tässä osassa kerron koodeja mm. kuvien pyöristämiseen sekä otsikon ja päivämäärän välin pienentämiseen.

Kaikki koodit ovat CSS-koodeja, ja ne lisätään seuraavalla tavalla:
malli > mukauta > lisäasetukset > lisää CSS > lisää koodi tekstikenttään






Koodivinkkejä
osa 2

1. Koodi: Postauksen kuvien reunojen pyöristäminen

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

.post-body img {
border-radius: 30px;
}

Oranssilla olevaa lukua voi muuttaa halutessaan suuremmaksi tai pienemmäksi. Luku määrittää, kuinka pyöreät reunat kuviin tulee. Mitä suurempi luku, sitä pyöreämmät reunat.



2. Koodi: Mustavalkoisuusefekti postauksen kuviin (mouseover)

Tämä koodi on eräänlainen mouseover-efekti. Mouseover-efektien ideana on se, että kun hiiren vetää esimerkiksi postauksen kuvan päälle, kuva muuttuu jollakin tavalla ja kun hiiren ottaa pois kuvan päältä kuva palautuu normaaliksi. Nämä mouseover-efektin tuovat koodit lisätään ihan samalla tavalla kuin mitkä tahansa muutkin CSS-koodit, eli CSS-kenttään. Tätä koodia käyttämällä saat postauksiin kuvat, jotka muuttuvat mustavalkoisiksi kun hiiren vetää kuvan päälle. Kaikki blogin kuvat eivät siis muutu mustavalkoisiksi kun hiiren vetää kuvan päälle, vain ja ainoastaan postauksien kuvat. Toivottavasti ymmärsitte!
Mutta itse koodiin ja ohjeisiin, miten saada postauksen kuvat mustavalkoisiksi kun hiiren vetää päälle.

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

.post-body img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}



3. Koodi: Haalenemisefekti postauksen kuviin (mouseover)


Kyseessä on siis jälleen mouseover-efekti. Tällä kertaa kuvat postauksissa haalenevat kun hiiren vetää päälle. Ja muistakaa, että kyseisellä koodilla vain postauksien kuvat muuttuvat, eli tässä tapauksessa haalenevat kun hiiren vetää kuvan päälle.


1. Lisää alla oleva koodi kokonaisuudessaan CSS-kenttään.


.post-body img:hover {
opacity:0.2;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
opacity:1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


4. Koodi: Tekstin otsikon ja bannerin välin pienentäminen

Jos olet poistanut blogistasi päivämäärän, niin otsikon ja bannerin välin suuruus ärsyttää/häiritsee monia. Tässä siis koodi sen välin pienentämiseen.
1. Lisää alla oleva koodi CSS:ään

h3.post-title{
margin-top: -30px;
}


Oranssilla olevaa lukua voi muuttaa mielensä mukaan. Mitä pienempi luku, sitä pienempi väli. Luku voi olla positiivinen tai negatiivinen, ei väliä.


5. Koodi: Päivämäärän ja bannerin välin pienentäminen

Tällä koodilla siis saa pienennettyä päivämäärän ja bannerin väliä, jos se on mielestäsi liian suuri.


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

.date-header {
margin-top: -15px;
}

Oranssilla olevaa lukua voi muuttaa mielensä mukaan. Mitä pienempi luku, sitä pienempi väli. Luku voi olla positiivinen tai negatiivinen, ei väliä.


Ja lopuksi, muistakaa ehdottomasti tallentaa muutokset painamalla "käytä blogissa" napista!


Toivottavasti postaus oli taas mieluinen ja hyödyllinen!
Tällä viikolla onkin ollut kunnon vinkki-viikko. Tiistaina tuli kirjavinkkejä-postaus ja tänään tämä koodipostaus. Toivottavasti vinkit ovat kuitenkin olleet hyödyksi.

Kivaa viikonloppua! -Pihla

Mitä koodeja haluaisitte nähdä seuraavassa osassa?

5 kommenttia:

  1. Hyviä peruskoodeja, joilla pääsee alkuun! Kiva tuo kuva alussa havainnollistamassa.

    VastaaPoista
    Vastaukset
    1. Kiitos! Näin jälkiviisaana olisin vielä lisännyt muitakin havainnollistavia kuvia, mutta onneksi edes tuo yksi :D

      Poista
  2. Olisko tätä mahdollista saada vain yhden postauksen kuviin?

    VastaaPoista
    Vastaukset
    1. Itse asiassa en tiedä, luulisin että ei. Muistaakseni Blogikoodeja -blogista (blogikoodeja.blogspot.fi) taitaa löytyä se sama koodi, niin käy kysäsemässä hänen blogin postauksen kommenteissa asiasta, sillä hän osaisi vastata varman vastauksen :)

      Poista
    2. Okei :) Käyn kysymässä, vaikka hän ei taida kauheasti enää käydä vastailemassa kommentteihin :(

      Poista

Ennen kuin kysyt..
.. Muokkaan kuvani Adobe Photoshop Fixillä
.. Canon EOS 1300D ja iPhone 6 toimivat kuvausvälineinäni
.. Mikään blogissa esiintyvistä hevosista ei ole omistuksessani

Muista kommentoidessasi olla asiallinen! Positiiviset kommentit piristävät kirjoittajan päivää, mutta rakentava palaute on ehdottomasti tervetullutta, kunhan et lähde haukkumaan ketään tai mitään.