Etusivu » Sivuston ylläpitäjille » CSS-koodin kokeilusivu

CSS-koodin kokeilusivu

Tällä sivulle on koottu näytille kausiluontoisesti tarvittavia erikoisempia elementtejä, joille on tehty omaa muotoilua omalla CSS:llä. (Muu oma CSS on selitetty auki koodin joukossa. Niitä kommentteja ei tarvitse lukea ennen kuin kohtaa ongelmia.)

Tätä sivua voi käyttää myös uuden CSS:n kokeiluun ilman että sitä tarvitsee tehdä millään julkisella sivulla.

Käynnissä olevat melontakilpailut

Tällaisella etusivulle laitettavalla painikkeella (ilman tarvetta CSS-classille) voi ohjata melontakilpailuiden lähtölistoihin, tuloksiin ja muuhun kisainfoon. Ei pidä hämmentyä siitä, että painiketta tehdessä se väyttää vielä mustalta!

Erityinen huomautus

Jokin tekstikappale voidaan merkitä CSS-classilla huom1 tai huom2 ja sitten se näyttää tältä:

Tämä on huomautus! Tarkemmin sanottuna “tason 1” huomautus. Käytetty class on huom1 .Tässä on varmuuden vuoksi niin paljon tekstiä, jotta se menee useammalle riville. Tässä on myös jokin linkki, jotta nähdään sellaisenkin väri.

Tämä on toinen huomautus! Tarkemmin sanottuna “tason 2” huomautus. Käytetty class on huom2 .Tässä on varmuuden vuoksi niin paljon tekstiä, jotta se menee useammalle riville. Tässä on myös jokin linkki, jotta nähdään sellaisenkin väri.

Varjo valkoiselle kuvalle

Jos kuvan tausta on valkoinen, ja kuvan reunat halutaan jostain ihmeen syystä näkyviin, kuvalle voi asettaa hennon varjon classilla .varjostettu .

Yleensä näyttää paljon paremmalta ilman, koska sivujen taustaväri on valkoinen. Tämä tehtiin melojalogon esittelyä varten sivun seura aivan lopussa.

Typografia

Sivustolla käytetty leipäteksti on teeman määräämä. Jotta käytössä olisi myös sen kursivoitu leikkaus, CSS:n alkuun on lisätty @import-koodi sen lataamiseksi Google Fonts -palvelusta.

Otsikkofontiksi haetaan sen sijaan Adoben web-fontti, mikä ei ole pitemmän päälle kestävä ratkaisu.

Parasta olisi saada tarvittavat fontit vihuri.info-palvelimelle (ja käyttää niitä @font-face-mentelmällä) mutta se vaatii omat ponnistelunsa. Adoben fontti saattaa lakata toimimasta ajan myötä.

Sivua on päivitetty viimeksi 16.3.2024.

Liiton tiedotteita

Kalenterissa seuraavaksi

Katso säännölliset tapahtumat ja kalenterin kuukausinäkymä Kalenteri-sivulla.