Skip to toolbar

CSS oppikoulu osa 1

Spread the love
Reading Time: < 1 minute

CSS:n (Cascading Style Sheets) käytännön tarkoitus on luoda visuaalinen ulkonäkö, eli ilme, webin sivustoille. Käytännössä CSS:llä luodaan myös käyttöliittymiä perinteisemmässä merkityksessä, eli sillä tyylitellään web-selaimen komponentteja: napit, menut, hotspot-alueet. Myös pieniä hyödyllisiä yksityiskohtia, kuten animaatioita, voidaan lisätä CSS:n avulla.

Oma oppimistarinani CSS:stä

Tähän asti olin täysi n00bie CSS:ssä. Sen rooli oli ollut projekteissa suhteellisen pieni; joko osana jotain komponenttikirjastoa – jolloin en juurikaan nähnyt tarvetta perehtyä konepellin alla olevaan CSS:ään – tai tein projekteja joissa muotoilua ja ilme sujui myös heikohkolla osaamisellani.

Nyt halusin oppia lisää! CSS oli jäänyt kytemään, selkeästi.

Projektini: CSS analog clock (kello)

Opin parhaiten kun teen jotain konkreettista. Projektiksi otin “seinäkellon”, eli tavoitteena on luoda CSS:llä analoginen kellotaulu: 2 viisari (tuntiviisari ja minuuttiviisari), numerot 1-12 kuten oikeassa kellossa; ja tietysti oikean kuluvan ajan kytkeminen kelloon, siten että se näyttää oikeaa aikaa.

Wp 15565296219855889889769771086003

Siinä on siis speksi.

Seuraavassa osassa pilkon analogisen kellon rakentamisen osasiin, ja kerron miten opin projektin avulla CSS:ää.

Ennenpitkää kun CSS:ää opiskelee, törmää mitoittamiseen. Jokainen designeri haluaa kontrollia käyttöliittymänsä käyttäytymiseen ja myös staattiseen ulkonäköön. Webissä asioita ei voi varsinaisesti hakata (ainakaan kovin helposti) pikselintarkasti kiveen, mutta taitavalla CSS:n käytöllä saavutetaan hyvä lopputulos.

Kellon kanssa kyse on myös mielenkiintoisesta kysymyksestä: miten ihmeessä saadaan tietokoneelta oikea “realtime clock” kellonaika siirtymään CSS:ään, siten että viisarit ovat oikeissa asennoissa?

Nähdään pian osassa 2!

Facebook Comments

Published by jukkasoft

Hi! A bit updated description. Code enthusiasta, technology optimist, but also a realist. In my blog I wrote 80% of technology related articles, mostly in English and Finnish. I like to envision and ponder about things, how life could be, what we are doing wrong today, and so on. "Invented" a facebook -like system in 2000, as a short product pamphlet. Haven't yet realized the 20+ ideas that might have become big things. Maybe learning this skill one of these days!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: