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

HTML-värikoodit / HTML Color Codes / blogin värit

HTML Color Codeista (joista yleisemmin puhutaan heksakoodeina)

minulla on paaljon asiaa. Ne tarkoittavat koodeja, jotka

"muuntautuvat" joksikin tietyksi väriksi. Jokaisella värisävyllä

on tismalleen oma heksakoodi, esimerkiksi #ffffff, joka

vastaa väriä valkoinen. Heksakoodien edessä on #-merkki, ja 

heksakoodeja käytetään esimerkiksi juuri blogin koodeissa,

jos halutaan määrittää jokin tietty asia tietyn

väriseksi.

MISTÄ LÖYTÄÄ HEKSAKOODEJA?

Heksakoodeja löytyy nykyään monilta eri sivustoilta,

joissa on väripaletti, jolta voi etsiä haluamansa värin. 

Itse suosin Html Color Codes -nimistä internetsivua,

jolta on hyvin helppo sivua scrollaamalla alaspäin 

valita väripaletilta juuri se mieluinen väri ja kopioida

värin heksakoodi, jonka jälkeen koodin voi lisätä

tarvitsemaansa juttuun.

 KÄYTTÖ

Päätinpä tehdä pienen sepostuksen heksakoodien käytöstä, mm. väripaletista, koska haluan ilmaista blogissa ohjeet mahdollisimman selvästi, jotta kaikki ymmärtävät ne :)   

Ohjeet ovat Html Color Codes -sivustoa varten.

Oranssilla ympäröidystä lokerosta voit hiirtä vetämällä etsiä mieleisesi sävyn.

Keltaisella ympäröidystä lokerosta voit vetää hiirellä mieluisesi värin, jonka jälkeen mennä oranssiin kohtaan ja etsiä mieluisesi sävyn.

Viininpunaisella ympäröidyssä lokerossa näkyy valitsemasi värin sävy.

 Punaisella ympäröidyssä lokerossa on värisävyn heksakoodi, jonka voi kopioida. 

Mustalla ympäröityyn lokeroon voit syöttää jonkin heksakoodin, jonka jälkeen painaa Go-nappia. Siten näet, mikä väri on kyseessä. 

Heksakoodeja tarvitaan monissa koodeissa - tämä lienee jo itsestään selvää (?). Otetaan esimerkkikoodiksi vaikka navigaatiopalkin värin vaihtamiseen tarvittava koodi:

#navbar-iframe {
background:#ffffff;
}

 Navbar-ifreme -kohta tarkoittaa navigaatiopalkkia, ja sen perässä

toisella rivillä background sen taustaa, jonka yhteyteen on liitetty

väri #ffffff, joka vastaa siis valkoista väriä. 

Muistakaa AINA, että heksakoodin edessä pitää olla #-merkki, 

eli älkää missään tapauksessa poistako sitä vaihtaessanne

väriä (!!). 

MUUT VÄRIT, JOTKA SOPIVAT KOODEIHIN

Jos väripaletilta värin valitseminen tuntuu värinpaljouden takia

ylitsepääsemättömän hankalalta, voi värin onneksemme

valita myös käyttämällä värin englanninkielistä nimeä.

Jos haluaisi esim. yksinkertaisesti peruspunaisen vaikkapa

navigaatiopalkin väriksi, aiemmin esitetty koodi näyttäisi tältä:

 #navbar-iframe {
background:red;
}

 

Alla värejä, jotka itse olen kokeillut toimiviksi:

red - pink - blue - yellow - green - black - white - gold - silver

 grey - brown - violet

Lisäämällä ylläolevan sanan eteen sanan light tai dark, saat

väristä vaaleamman tai tummemman (ei käy kaikkiin!). Huomioi,

että oikeinkirjoitusasu on yhteen, esim. lightpink. Pink ja lightpink

ovat muuten erivärejä, joista lightpink on tummempi o.o

***************

Jotain kysyttävää liittyen väreihin/html-värikoodeihin?

Kysy ihmeessä! Vastaan mielelläni!(:

xoxo, iltsu

Navigaatiopalkin värin muuttaminen

Tämän koodin kanssa minulla oli hankaluuksia saada se toimimaan

tässä blogissa; kynsiblogissani (olen lopettanut) koodi kyllä toimi,

ja lopulta sain sen toimimaan tässäkin blogissa. Kyseessä on

siis navigaatiopalkin värin muuttaminen, ja tähän blogger

ei tarjoa valmiina kuin muutaman värin Ulkoasu-välilehdessä.

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

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

#navbar-iframe {
background:#ffffff;
}

 HTML-värikoodia (koodissa valmiina punaiseksi värjätty f-sarja,

joka on värinä valkoinen) voi muuttaa mieleisensä mukaan

miksi tahansa HTML-värikoodiksi. 

Klikkaa tästä päästäksesi

Color Codes -sivulle, jonka paletista voi päättää mieleisensä

värikoodin

********** 

Kertokaa ihmeessä, toimiko koodi teillä!

ps. muutin ulkoasusta hieman jouluisemman, hope you like! :)

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

Maalausvärin muuttaminen

Tekstin maalausvärillä tarkoitan tätä:

Maalausväri on normaalisti ainakin omasta mielestäni tylsä sininen,

joten värin vaihtaminen toiseen on varmasti hyvä vaihtoehto,

joka miellyttää silmää. Suosittelen tätä lämpimästi, kunhan

ette laita mitään silmiä kirveltäviä neonvärejä, jos toivotte

blogiinne lukijoita.

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

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

::-moz-selection {
color:#ffffff;
background: #c9c9c9;
}

::selection
{
color:#ffffff;
background: #c9c9c9;
}

Kun lisäät nuo koodit, värin pitäisi näkyä kaikissa selaimissa. 

Erivärisiksi värjättyjä kohtia voi taas muokata lisäämällä

#-merkin jälkeen jonkun HTML-koodin värin vaikkapa täältä. 

Punaiset kohdat tarkoittavat tekstin väriä sen maalatessa. 

Valmiissa koodissa väri on valkoinen. (kuten kuvassa)

Siniset kohdat taas kertovat maalausvärin värin, joka valmiissa

koodissa on harmaa. (kuten kuvassa)

 HUOMIOITHAN, että sekä punaiset että siniset kohdat ovat koodissa

kaksi kertaa. Maalausväri & tekstin väri siis täytyy laittaa koodiin

kaksi kertaa :)

xoxo iltsu

Kommenttiboksin pyöristäminen

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

 Lisää sinne alla oleva koodi:

.comments .comment-block {
background-color: #F2F2F2;
border: 10px solid #F2F2F2;
border-radius: 40px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
}

Punaiseksi värjätyt nimikkeet kertovat kommenttiboksin

värin. HTML-koodin värejä löytyy täältä. Rullatessasi sivua

alaspäin pääset väripaletille, josta voit valita värin.

Vihreää lukua muuttamalla voit vaikuttaa kommenttilomakkeen

kehysten (= lähes sama asia kuin kommenttilomakkeen koko)

suuruuteen. Sinistä lukua muuttamalla vaikutat kommenttiboksin

pyöreyteen.

 

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