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

Gadgetien otsikoiden keskittäminen

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

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

.sidebar h2{
text-align: center;
}

Sitten vain painat enteriä ja tadaa, pitäisi toimia!

Muista toki tallentaa.

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