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?