torstai 19. joulukuuta 2013

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

6 kommenttia:

  1. Sun blogis on paras muokkaus blogi ! Tääl on kaikkee tarvittavaa ja luulen et tulee olemaankin ! Ihan huippu :)

    VastaaPoista
    Vastaukset
    1. Kiitti tosi piristävästä kommentista, Emma! Ja tietty mukava kuulla, että olet tätä mieltä! :-)

      Poista
  2. Moikka! Mulla on yksi vähän monimutkainen ongelma - kuulostaa kyllä helpolta! En nimittäin saa blogini (http://elsatolli.blogspot.fi/) harmaata sivupalkin ja alapalkin väriä vaihdettua. Olen tietääkseni löytänyt oikean kohdan html-koodista (widget.outer.background.color), mutta väri ei sitä muokkaamalla kuitenkaan vaihdu.

    Voi olla että lähdekoodini on vain mennyt liian monimutkaiseksi, mutta pyydän vielä sulta apua - mitä nöyrimmin! Olisi aivan huikeaa jos osaisit sanoa mikä koodissani mättää.
    Kiitos jo etukäteen!

    VastaaPoista
    Vastaukset
    1. Moi!

      Näillä koodeilla pitäisi lähteä:

      .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
      background: transparent;
      }

      .footer-inner {
      background: transparent;
      }

      Poista
    2. Kiitos aivan tuhannesti! Teit minut onnelliseksi!

      Poista
  3. Moikka!
    Osaatko yhtään neuvoa, että miten voisin ladata fontteja tietokoneelleni? Haluaisin ladata fontteja esim. sivustolta DaFont, mutta kun painan napista "Download", saan vaihtoehdot "Avaa" ja "Tallenna". Olen kokeillut molempia. Suurin osa sivustoista kuitenkin neuvoo painamaan vaihtoehtoa "Tallenna" joten kerron nyt vaikka kokemuksistani tämän vaihtoehdon valitsemisen jälkeen.

    Elikkäs. Kun painan "Tallenna", juuri lataamani fontti/tiedosto siirtyy kansioon Ladatut tiedostot. Sen jälkeen olen ymmärtänyt vain että minun täytyy purkaa se tiedosto jonka latasin. Painan hiiren oikealta puolelta ja valitsen vaihtoehdon "Open with WinRar". Eteeni avautuu jonkinsortin valikko jossa on kaikenlaisia vaihtoehtoja ja kuvakkeita, joista en ymmärrä pätkän vertaa.

    Tähän se sitten tyssääkin. Miten saan sen fontin siirrettyä sinne kansioon missä kaikki muutkin tämän koneen omat fontit ovat? Tarkoitukseni olisi siis muokata kuva PicMonkeyssä, jossa haluaisin käyttää niitä fontteja joita olen yrittänyt ladata.

    Toki olen saattanut tehdä kaiken ihan väärin, ja sen takia se ei ole onnistunut. :D Tiedätkö mitään muuta tapaa yrittää, tai osaatko neuvoa minut hieman pidemmälle? Kiitos jo etukäteen!
    Mutta toivottavasti osasin selittää ongelmani tarvittavan tarkasti. :)

    (suurin osa ohjeista mitä olen yrittänyt noudattaa, on tehty koneella jossa on Windows 7. Itselläni on se, jonka aloitusivu on täynnä laatikoita (muistuttaa puhelin nokia lumiaa) joista pääsee kaikkialle. Valitettavasti en tiedä tämän käyttöjärjestelmän nimeä)

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)