Rock On

2016/12/05

Kalenterikuustoist: Koodaa ko Mirette

Kuusi vuotta olen tätä harrastanut, tosin en putkeen mutta kuitenkin. Mun luottovälineinä toimivat kasa apublogeja sekä muut CSS-koodiapusivut. Parhaimpana esimerkkinä tämä sivusto.










Tässä on esimerkkejä mun "modauksista", joita tein vuosina 2010-2011. Olen silloin hyödyntänyt perusjuttuja CSS-koodeista. Tästä se alkaa...

TAUSTAKUVA:
background: #000000 url('lisää tähän linkki'); }
  • #000000 on musta, voit vaihtaa värit miksikä haluat täällä.
  • Taustavärin saat varmuudella käyttöösi ko pistät url-osuuden kokonaan pois.
  • Taustakuvan saa myös ei-toistuvaksi ( no-repeat ), toistuvaksi (repeat) tai paikallaan pysyväksi ( position fixed )
VÄRI:
{ color: #aaa; } 
  • #AAA on vaaleanharmaa, toimii myös koodilla #AAAAAA. (ilman pistettä tottakai)
FONTTI:
{ font-family: Comic Sans MS;
   font-size: 11px; }
  • Comic Sans oli vain esimerkkifontti. Jos haluat hyvää makua blogiisi, suosittelen esim. Arialia, Verdanaa, Georgiaa tms.
  • Fonttikokoa voi vaihtaa vaikkapa sataan, jos sitä välttämättä haluaa. Liian pientä tai isoa en suosittele kumpaakaan, liian pieni tekee hallaa huononäköisille ja liian iso taas hallaa esim. mun silmille, niin ko edellisestä postauksesta olette vaan jo lukeneet.
  • Fontin väri, ks. VÄRI.
HOVER: (hiiriosoitin on linkin päällä)
a:hover
{ font-size: 13px;
   font-style: italic; }
  • Tota suurennustekniikkaa olen käyttänyt aikoinaan miltei jokaisessa etenkin alkuaikoina tehdyissä modauksissa. Nykyään lähinnä vaihdan väriä hovereissa, tai läpinäkyvyyttä, josta mainitsen pian.
  • Fonttityyli on kursiivi, ja sitä olen käyttänyt koiramodin linkkihoverissa.

OPACITY: (läpinäkyvyys)
{ opacity: 0.5; }
  • Tämä tekniikka määrittää läpinäkyvyyden. Esimerkkiläpinäkyvyysmäärä (huh onpa pitkä sana) on käytössä tälläkin hetkellä mun bannerin "nappuloiden" hoverissa.
KIRJAINTILAVUUS:
{ letter-spacing: 2px; }
  • Tätä tekniikkaa käytetään jos halutaan vaihtaa kirjainten tilavuutta.

KIRJAINKOKO:
{text-transform: capitalize; } 
  • Tämä Koodi Tekee Tekstistäsi Tällaista.

{text-transform: uppercase; }
  • TÄMÄ TAAS TÄLLAISTA.

{text-transform: lowercase; }
  • tämä tällaista.

{font-variant: small-caps; }
  • On olemassa myös esim. small-caps -mahdollisuus, mutta en ole käyttänyt sitä sitten vuoden 2010. Muita "variantteja" en ole kokeillut, joten en tiedä minkälaisia vaihtoehtoja onkaan... no, kukaan ei ole seppä syntyessään...

Muita en vielä silloin ole osannut, eikä kaikki meinaa jäädä vieläkään päähän. Hyvänä esimerkkinä varjostukset. Tai rotation -mahdollisuus, mitä käytin ensimmäisen kerran jo vuonna 2010. Tai eräät filtterit. Kaikkia ei tule käytettyä, milloin koodin virheellisyyden, milloin hyödyttömyyden takia. Liika on liikaa, vaikka joillekin jo värimaailma on blogimaailmassa liikaa...

KURSORIN VÄRIN MUUTOS: (toimii ainakin Chromella)
::-webkit-scrollbar
{ height: 15px;
width: 15px;
background: #777; }

::-webkit-scrollbar-thumb
{ background: #000;
border: 0px solid;
-webkit-border-radius: 15px;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); }

::-webkit-scrollbar-corner
{ background: #000; }
  • Border-radius on pyöristämistyökalu. 
  • Border pelkästään on ulkoviivatyökalu, josta puhun kohta.
  • Kahta viimeistä koodia kannattaa pitää samanvärisenä.
  • Värejä voi vaihtaa.

SELECTION -MAHDOLLISUUS:
::selection
{ color: #666;
background: #000; }

Kaksi edellämainittua sain aikoinaan entiseltä kaverilta kaupan päällisenä, kun hän väsäsi viime vuonna mulle ulkoasun. Nyttemmin se ulkoasu on historiaa.

ULKOVIIVAT: (eli borderit)
{ border: 1px solid #fff; }
  • Borderit toimivat ulkoviivoina.
  • Bordereita on erilaisia, solid on katkeamaton (eli tavallinen) viiva, dotted on pisteviiva ja dashed katkoviiva. 

HÄIVYTYS: 
{-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out; }

  • Tarkoitettu hoveriin. Tekee linkkiin siirtymisestä ei niin äkkinäistä. Suosittelen tän koodin lisäämistä myös a:link -kohtaan, että tulos olisi tasapainoinen. Numeroa voit vaihtaa, myös desimaaleja voit käyttää tässä koodissa. (esim 1.5s)

SISÄLLÖN SIIRTÄMISTÄ: (marginit ja paddingit)
{ padding: 10px; }
{ margin: 3px; }

  • Margineilla ja paddingeilla on eroa. Marginit siirtävät koko juttua vasemmalle (left), oikealle (right), ylemmäs (up) tai alemmas (bottom). Paddingit siirtävät vain sisällön samalla hommalla ko mitäpä marginit. 
  • Niiden tehtävä on siirtää haluamasi sisältö. Mä olen käyttänyt noita koodeja muun muassa otsikkoon, postausalueen, tunnisteiden, sivunappuloiden ja bannerin siirtoon haluamaani paikkaan.
  • Jo pixelillä on väliä, niin ko aina.





Tässä on ihkaensimmäinen kokonaan itse tehty ulkoasu tässä blogissa.
Olen kyllä kehittynyt syksyn aikana paljon tosta, ja jos sinä hyödyit tästä edes vähän, niin onnitteluni!

Ei kommentteja:

Lähetä kommentti

Onko asiaa? Hyvä.
Vastaanko? Kyllä.

Mutta muista, lähetä vain sellaista palautetta jollaista sie myös mahdollisesti kestäisit.