Kuopassa.net

input[type='range'] { cursor: grab; } input[type='range']:active { cursor: grabbing; }

Lue kokonaan…

Niiden hiljattain uudistuneet nettisivut muistuttavat hyvin paljon toisiaan. Ehkä ovat samojen tekijöiden käsialaa. Yksinkertaisia, voimakkaita värejä. Jos Postin, Ilmatieteen laitoksen ja Suomi24:n nettisivuilla ei olisi logoa, ja jos sisältöön ei kiinnittäisi erityisemmin huomiota, olisi hankala erottaa sivustoja toisistaan.

Lue kokonaan…

Monirivinen tekstikenttä textarea venyy nykypäivän nettiselaimissa sen oikeassa alakulmassa olevaa kulmaa liikuttamalla. Tuon kulman avulla tekstialuetta voi venyttää, vanuttaa horisontaalisesti ja vertikaalisesti. CSS:n avulla venymiselle voi asettaa rajoituksia. Moniriviseen tekstikenttään kun voi asettaa sellaisia määrityksiä kuin min-height, max-height, min-width ja max-width. Lisäksi on olemassa jollain nörtähtävällä tavalla hauska temppu, jolla voi säätää annetaanko tekstialuetta venyttää ollenkaan vai halutaanko se rajoittaa sallituksi vaikkapa vain pystysuuntaisesti.

Lue kokonaan…

Monirivinen tekstikenttä, eli textarea-tagi, on viime aikoina useissa nettiselaimissa saanut sellaisen piirteen, että sen leveyttä ja korkeutta on voinut säätää kentän oikeassa alakulmassa sijaitsevasta kulmapalasta vetämällä. Sen voi estää useilla nettiselaimilla laittamalla CSS-merkkauksen jatkoksi onelinerin.

Lue kokonaan…

Otsikon kuvaamaa touhua esittelen juuri uudistamallani kotisivujeni etusivulla. Voin stailata myös sinun sivujasi kohtuullista vaivanpalkkaa vastaan. :-)

Lue kokonaan…

HTML-merkkauksen seassa esimerkiksi tekstikappale voi näyttää tältä: <p class="keskelle ja lihavoituna">. Tuo sisältää siis ryhmäselektorit keskelle, ja sekä lihavoituna. Se voi ensi alkuun tarkoittaa, että yksi CSS-asetus laitetaan keskittämään tekstikappale ja viimeinen sana voi tarkoittaa vaikka, että laitetaan teksti boldatuksi. Keskimmäisellä sanalla luokittelusta voi tehdä hauskempaa ja täsmällisempää.

Lue kokonaan…

Jos nettisivuilla olevien lomakkeiden label-tagit on laitettu kuntoon kunnolla, labelia klikkaamalla voi aktivoida jonkun tekstikentän, pudotusvalikon tai jotain muuta. Sen vuoksi labelin merkitseminen asianmukaisella kursorilla voi auttaa käyttäjää osumaan johonkin tiettyyn lomake-elementtiin. Kasvattamalla käyttäjän mahdollisuuksia osua johonkin kenttään, voi kasvattaa mahdollisuuksia saada se käyttäjä lähettämään lomakkeen tiedot — lomakkeen lähettäminen voi tuottaa esimerkiksi uuden kommentin tähän blogiin tai se voi auttaa suorittamaan ostostapahtuman jossain verkkokaupassa. :-) Laitan nettisivuja tehdessäni labelien lisäksi "käsikursorin" pudotusvalikkoihin, radio- ja checkbox-nappuloihin, buttoneihin sekä lomakkeen lähettävään input-nappulaan jos buttonia ei ole jostain syystä käytetty. Kursorikikan voi ottaa käyttöön alla olevalla CSS-merkkauksella.

Lue kokonaan…

CSS:n vaikutusvalta nettisivujen ulkoasun säätämisessä tuntuu kasvavan kasvamistaan. Olen viime kuukausien aikana löytänyt useita ulkoasujen tekemistä helpottavia CSS-kikkoja, joita monet modernit nettiselaimet tukevat. Tekstin varjostuksen ja laatikoiden varjostuksen sekä kulmien pyöristämisen lisäksi yksi toiminto, joka avaa monia mahdollisuuksia, on transition. Siirtymäefekti toimii ainakin tekstin värin, sen varjostuksen ja reunaviivojen kohdalla. En ole tutkinut sitä niin huolellisesti kuin olisi syytä.

Lue kokonaan…

Muistiinpanoksi itselleni: -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); kääntää elementtiä yhden asteen taaksepäin. Tämän tempun avaamia mahdollisuuksia pitää tutkia. Äkkiseltään tuntuisi siistiltä kokeilla voiko kokonaisen nettisivuston ulkoasuineen ja sisältöineen kääntää vaikka 45 asteen kulmaan. Ihan piruuttaan.

Lue kokonaan…

Älysin vasta joitakin viikkoja sitten kuinka CSS-muotoilujen avulla voidaan tehdä se, mitä olen tehnyt suoraan HTML-merkkaukseen vuosien ajan. Uskoin pitkään, ettei table-elementin kohdalla voi saada solujen ympärille ilmestyviä tyhjiä tiloja, paddingeja tai mitä lienevätkään, poistettua muuten kuin kirjoittamalla HTML-tiedoston sisälle cellspacing="0" ja cellpadding="0". Nyt tiedän paremmin.

Lue kokonaan…

Asiaa makuasiasta. Tehdessäni sivustolle, jossa jollakin sivulla käytetään lomaketta, ulkoasua CSS:n avulla, vaihdan eräissä tapauksissa oletuksena olevan kursorin informatiivisempaan. Suosin esimerkiksi lomakkeen lähetysnappuloissa muotoa <button>Lähetä</button> yleisemmän input-vaihtoehdon sijaan. Buttonin käyttäminen ensinnäkin mahdollistaa ilman selektoria siihen tähtäämisen CSS:n avulla. Toisekseen on helpompi plärätä sivun lähdekoodia ja löytää sieltä lomakkeen tiedot lähettävä elementti, kun sen kohdalla lukee button. Käyttämäni nettiselaimet ovat niin pitkään kuin muistan laittaneet tuollaisille buttoneille kursoriksi tavallisen nuoliosoittimen.

Lue kokonaan…

Nettisivujen latautumisaikojen pienentäminen ja siirrettävien tiedostomäärien vähentäminen on viimeisimpiä kiinnostuksen kohteitani. Google antaa jonkin verran painoarvoa niille nettisivuille, jotka latautuvat rivakasti. Myös suoraan käyttäjille surffauskokemus on miellyttävä jos sivun latautumista ei tarvitse odotella. Lisäksi kolmantena plussana on säästää esimerkiksi mobiililaitteiden kuluttamaa siirtokaistaa. Viimeisestä mainitsin jo kertaalleen kirjoituksessa Miten piilottaa turhaa sisältöä kommentoinnin esikatselussa, jossa esiteltiin kikka sulloa kommentoinnin esikatseluvaiheen yhteydessä tavaraa piiloon.

Lue kokonaan…