Esiin tuleva navigaatiopalkki hiiren vietäessä päälle

Heippa! Tänään kerron teille koodin, joka poistaa blogista navigaatiopalkin, mutta kun hiiren vie blogin yläreunaan navigaatiopalkin paikalle, se ilmestyy. Hah, olenpa hyvä selittämään näitä asioita :D

Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:

#navbar-iframe {
opacity: 0.0;
filter: alpha (opacity = 0, FinishedOpacity = 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#navbar-iframe:hover {
opacity: 1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

Koodi on "liukuva", eli navigaatiopalkki ei tule esiin töksähtäen, vaan transition-efektinä.

Linkkien kursivoituminen hiiren vietäessä päälle

Eli on olemassa linkki, ja kun hiiren vie linkin päälle, teksti muuttuu kursivoiduksi. Blogiin kyseisen hover-efektin saa menemällä Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

a:hover{
font-style: italic;
}

Letter spacing -efekti tekstin otsikkoon

Letter spacingia eli t ä l l a i s t a kirjoitusasua pyydettiin blogin tekstin otsikkoon hiiren vietäessä päälle, eli kun hiiri on otsikon päällä, kirjainten välit kasvavat. En osaa asiaa sen paremmin selittää, joten toivottavasti ymmärrätte!

Jos siis haluat tämän efektin blogiisi (sovellettavissa totta kai muuallekin kuin blogin tekstin otsikkoon), toimi näin: Malli -> Mukauta -> Lisää CSS:ään alla oleva koodin pätkä:

h3.post-title a:hover {
letter-spacing: 0.2em;
}

Lukua 0.2 voi muuttaa kohti omaa mieltymystään - siksi se on punaisella. Mitä suurempi luku on, sitä suurempi on kirjainten väli. Sininen a:hover taas kertoo, että kyseessä on hover-efekti (=efekti, jossa linkille tapahtuu jotain, kun hiiri viedään sen päälle, esim. juuri tämä letter spacing -juttu hoverina). Poistamalla koodista kohdan a:hover letter spacing -efekti on pysyvä tekstin otsikossa eikä hover-efektiä tapahdu. 

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!

Kaikkien linkkien (hidas) liukuvärjääntyminen hiiren vietäessä päälle

Multa pyydettiin tämän postauksen linkkiefektiä kaikkiin linkkeihin, joten toteutin sen mielelläni! Tämä oli helpoimmasta päästä, sillä pohjakoodi oli valmiina. Kyseessä on siis KAIKKIEN LIINKKIEN liukuvärjäytyminen väristä toiseen hiiren vietäessä päälle, eli hover-efekti.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Liitä sinne alla oleva koodi:

 a:link {
text-decoration:none;
color: #000000;
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}

 a:hover {
text-decoration:none;
color: #c9c9c9;
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
-o-transition: 1.5s;
}

Linkkiä voi ja kannattaa muokata, etenkin värejä, jotta ne sopivat oman blogisi värimaailmaan. HTML Color codeista lisää tässä postauksessa. Myös feidaantumisaikoja (transition) kannattaa muuttaa. Koodin ekassa osassa (a:link) transitionit kertovat, miten kauan linkillä kestää palata normaaliin väriin ja muotoonsa, kun hiiri on viety sen päältä. Koodin toisessa osassa (a:hover) transitionit taas kertovat, miten kauan linkillä kestää feidaantua haluttuun väriin ja muotoon, kun hiiri on viety linkin päälle. 

Toivottavasti saitte jotain selvyyttä! :-)

xoxo, iltsu

Tekstin otsikon alleviivaantuminen hiiren vietäessä päälle

Kyseessä on siis tekstin otsikon linkin hover-efekti; kun hiiren vie

otsikon päälle, teksti alleviivautuu keskeltä reunoille.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

h3.post-title a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}

h3.post-title a:after {
content: '';
display: block;
margin: auto;
height: 2px;
width: 0px;
background: transparent;
transition: width .7s ease, background-color .7s ease;
}

h3.post-title a:hover:after {
width: 100%;
background: #c9c9c9;
}

 Siniseksi värjättyä heightin arvoa muuttamalla isommaksi viivan

paksuus kasvaa, ja numeroa muuttamalla pienemmäksi viivasta

tulee ohuempi.

Punaiseksi värjätty koodin osa on taas värikoodi, jonka tilalle

voit muuttaa jonkin koodin täältä.

Jos haluat efektin kaikkiin linkkeihin, poista jokaisen koodin 

alusta kohta h3.post-title.

xoxo iltsu

Tekstin otsikon liukuvärjääminen hiiren vietäessä päälle

Aivan, en keksinyt tälle koodille parempaa otsikkoa :D. 

Tarkoitan linkkiefektiä (johon olette mahdollisesti

joissain blogeissa jo törmänneet), kun linkin väri

liukuvärjäytyy yleensä hitaasti joksikin toiseksi väriksi. 

Tämä koodi toimii kuitenkin vain otsikossa (sillä eräs samaan sarjaan 

kuuluva koodi aiheuttaa hankaluuksia otsikolle yms., mikä siis 

laittaisi efektin kaikkiin linkkeihin). Olenpa sekava tänään.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää CSS:ään tämä koodi:

h3.post-title a:link {
text-decoration:none;
color: #000000;
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}

h3.post-title a:hover {
text-decoration:none;
color: #c9c9c9;
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
-o-transition: 1.5s;
}

 Taas, tälläkin kertaa, punaiseksi värjättyjä ja lihavoituja kohtia

voit muuttaa oman mielesi mukaan. Hashtagin jälkeiset luvut (numero-

kirjainyhdistelmät) ovat värikoodeja (= koodi, joka on tietty väri). 

Muuta niitä mieleiseksi. TÄMÄ linkki vie HTML Color Codes -sivustolle,

jossa voit testailla väripaletilla värejä & niiden koodeja, 

jonka jälkeen kopioida koodin ja liittää hashtagin perään.

Jos jäi jotain kysyttävää, kysy ihmeessä! :)

xoxo iltsu