Korinaa kuopasta

Jo juttua!

Tilaa RSS tai Atom

Huomioi, että tämä on sivu yhteensä sivusta. Sivuston etusivulla on tuoreimmat julkaisut.

css

Hyvä ihminen! Tämä ei ole blogin etusivu. Täällä on tagiin "css" kytketyt jutut.

Pyöristetyt kulmat jQueryn avulla

Aikaisemmin olisin vaikka vannonut, etten koske tällaisiin jQueryyn liittyviin juttuihin, mutta kyllähän nuo tuollaiset helpottavat ulkoasujen rakentamista.

Nettisivujen ulkoasuissa leiskaan liittyviä elementtejä voi pyöristää asettamalla kuvatiedostoja esimerkiksi taustakuviksi CSS:n kanssa. Kuvatiedostojen sijaan joskus voi olla helpointa käyttää JavaScript-kirjastoa jQuery, johon on tarjolla hyväksi tot […]

"Jonkin jutun" korostaminen CSS:n ja PNG:n alpha channelin avulla.

Jos olisi olemassa jokin sarja, jonka nimi olisi Aika älyttömien otsikkojen sarja, tämä otsikko olisi siinä sarjassa. Ajattelin aluksi laittaa jonkun helpommin avautuvan nimikkeen tälle kirjoitukselle, mutta mitäpä sitä suotta, sillä moisessa tilanteessa en olisi saanut käyttää tuota ensimmäisen lauseen hienoa viittausta typerien otsikkojen sarjaan. Okei! Nyt on tuo lässytysvaihe viety päätökseen ja ehkä […]

Tekstin varjostus CSS:llä.

Tämä on aika lyhyt kirjoitus. Jotkut nettiselaimet hallitsevat jo aika hyvin sellaisen CSS-toiminnon kuin text-shadow, jonka nimi jo kertoo kaiken mitä se tekee. Se tekee varjostuksia tekstiin ainakin uudella Firefoxilla, Chromella, Operalla, mutta ei ainakaan vielä uudella Internet Explorer 8:lla eikä sitä vanhemmilla Explorerin versioilla. Koska tämän efektin toimimattomuus tuossa yhdessä nettiselaimess […]

Satunnainen taustakuva CSS:n ja PHP:n avulla.

Laitoin tänään aamulla tähän blogiin sellaisen uudistuksen, joka ilmenee blogin käyttäjille taustakuvion vaihtumisena satunnaisesti jokaisen sivulatauksen päätteeksi. Tämä satunnaisen taustakuvion valitseminen on toteutettu parilla rivillä PHP-koodia ja CSS-merkkausta. PHP on se, joka valitsee annettujen sanojen sopasta jonkun satunnaisen sanan ja printtaa sen sivun lähdekoodiin avaavan body-elementin sel […]

Logoblogi, CSS-galleria.

Päivän pikalinkit tässä:

Hei Samuel! Juuri tätä tarkoitin.

Taustakuvatesti on päivän sana. Tai linkki. Tuolla testisivulla on siis sellainen jännittävä efekti, jossa parin kuvatiedoston ja CSS-merkkauksen avulla on luotu kolmiulotteista menoa ja meininkiä. PNG-kuvatiedostot, jotka on tallennettu 24-bittisiksi ja osittain läpinäkyviksi (alpha channelilla) on sijoitettu toinen toisensa päälle.

Tällaisen efektin näin ensimmäistä kertaa jollakin englanninkielisellä ne […]

Label, label, label.

Olen mieltynyt hehkuttamaan verkkolomakkeiden label-elementin käyttämistä lomakkeissa. Tämän jännittävääkin jännittävämmän elementin avulla voi sitä oikeaoppisesti käytettäessä suurentaa lomakkeessa esimerkiksi tekstikentän tai pudotusvalikon aktivoimista varten sen klikkauspinta-alaa. Olen puhunut blogissa labelista aikaisemminkin. Ensimmäisen kerran vuoden 2005 marraskuussa.

Oikeaoppisesti tämä elementti […]

Vähän kuin Suomen W3C.

Hallitse ulkoasua CSS:n ja body-elementin avulla.

Tyylitiedostojen avulla voidaan hallinnoida koko nettisivuston ulkoasua. Jokaisen sivuston sivun. CSS:n teho on juuri siinä, että hyvin pienellä vaivannäöllä, ideaalitilanteessa vain yhden tyylitiedoston, kautta voidaan muokata kaikkien sivuston ulkoasussa olevien tavaroiden esitystapaa.

Joskus voi vastaan tulla sellainen tilanne, jossa halutaan tehdä globaalilla tasolla toimivan tyylitiedoston kautta muut […]

Textpatternin julkaisujen arvostelu Ajax-vetoisella pluginilla.

Textpattern Resources -sivustolla 8. päivä kuluvaa kuukautta julkaistu liitännäinen wlk_helpful on osoittautunut erittäin näppäräksi toiminnoksi. Sen avulla Textpattern-sivustoilla käyttäjät voivat yksinkertaisesti klikkaamalla arvostella artikkeleita. Liitännäisen avulla kukin artikkeli saa joko positiivisia tai negatiivisia pisteitä, jonka jälkeen arvosteltuja julkaisuja voi printata ruudulle julkaisuje […]

Disabled="disabled"

Eräät nettiselaimet tukevat CSS-muotoilun asettamista myös sellaisiin verkkolomake-elementteihin, jotka on otettu pois käytöstä. Että jotta tuota jos siis lomakkeessa on sellainen nappula tai tekstikenttä, or whatever, se on ilmoitettu nettisivun lähdekoodissa jotakuinkin näin:

disabled="disabled

Tässä vaiheessa täytyy tunnustaa, että kirjoitan tätä blogimerkintää vailla käytännössä todettuja testituloksia. […]

File input -kentän esitystavan muokkaaminen CSS:n avulla.

Tässä on toimii-jos-toimii -periaatteella rakennettu viritys, jonka avulla saadaan muotoiltua input="file"-tyyppiä edustavan (X)HTML-lomakkeen tiedostonsiirtoelementin ulkonäköä puhtaasti CSS-merkkauksen avulla. Suuria ja ylväitä sanoja. Käytännössä tämän lomake-elementin säätäminen halutunnäköiseksi onnistuu ihan vain hapuilemalla. Tä […]

Jutun juurta.

Onpas siitä taas kulunut pitkä aika kun viimeksi kirjoittelin tänne. On ollut kiireitä, niitä on edelleen. Kunhan sitä kullankallista luppoaikaa alkaa ilmaantumaan, voisin kirjoitella esimerkiksi näistä jutuista:

Tiedostonsiirtolomakkeen ulkoasun muokkaaminen CSS:n avulla. Tästä on olemassa jo toimiva demo, jonka innoittajana toimi Niceonen blogissa mainittu Shaun Inmanin esittelemä keino säätää file input […]

Läpinäkyvyys CSS:n avulla.

img {
opacity: .8;
filter: alpha(opacity=80);
}

Tuo CSS–merkkaus laittaa kaikille nettisivun kuville, jotka on upotettu nettisivuun img-mötikän avulla, läpinäkyvyydeksi 20%. Tämä on vain esimerkki. Kyseisen alpha-kanavan läpinäkyvyyden voi naulata myös esimerkiksi tekstikappaleisiin (p), taulukkoihin (table) tai linkkeihin (a). Se voidaan tietysti asettaa myös halutuille id- ja ryhmäselektoreille. Läpinäkyvyy […]

Nätimpiä nappuloita lomakkeisiin.

Particletree julkaisi hiljattain äärimmäisen kiehtovan artikkelin verkkolomakkeiden nappuloiden muotoilusta.

Tyypillinen nappula:

<input type="submit" value="Lähetä" />

“Uudenlainen” nappula:

<button type="submit">Lähetä</button>

Kummatkin napit toimivat ja käyttäytyvät samalla tavalla. Molemmat on myös W3C:n mukaan ihan OK. Asian ydin ja jutun juuri tuossa Particletreen kirjoituksessa on se, että jälkimmäistä […]

1 pieni CSS-vinkki.

Nettibisnes.Info-blogi, jossa on “resursseja tee-se-itse-webmasterille”, listaa hiljattain julkaistussa blogimerkinnässään 10 pientä CSS-vinkkiä. Kirjoituksessa esitellään temppuja ja kikkoja. Niistä on hyötyä sivuston ulkoasua hiottaessa, käytettävyyttä parannettaessa ja hakukoneoptimointia harrastettaessa. Blogimerkintä on pääpiirteittäin aivan näppärä tiedonlähde, mutta siinä on eräs pieni hämmästystä […]

Arvosanan esittäminen. Tyylikkäästi.

Kasa tähtiä viiden tähden riveissä, yhteensä kuusi rivistöä. Osa tähdistä on tummanharmaita ja osa sinivihreitä.

Tässä kirjoituksessa kerrotaan miten Textpatternilla julkaistun artikkelin yhteydessä esitettävän arvosanan tai -numeron voi korvata sen graafisella vastineella. Arvosana syötetään TXP:ssä sille varattuun custom_field-kenttään. Kenttään syötetty numero tai muu arvo tunnistetaan TXP:n sisäänrakennetun if_custom_field-toiminnon avulla ja korvataan CSS:n avulla sen graafisella vastineella.

Idea on yksinkertai […]

Listan rivit laatikoiksi.

Listoille löytyy käyttöä. Laitetaan tänään luettelorivit laatikoiksi. Tätä ideaa on sovellettu mm. tässä blogissa, jossa jokaisen blogimerkinnän otsikon alapuolella esitetään järjestämätön lista. Listassa on kolme riviä, jotka on muljautettu vierekkäin.

Luodaan ensin järjestämätön lista ja pistetään sinne luettelorivejä:

<ul>
<li>Julkaistu: pp.kk.vvvv</li>
<li>Kategoria: <a href="#">Sekalaista</a></li>
<li>Kom […]

Asioiden laittamista, sijoittamista.

Tänään tuntuu siltä, että position: relative; ja position: absolute; ne yhteen soppii, pannaan ne...

CSS:n avulla voi sijoittaa nettisivun lähdekoodiin ilmoitettuja elementtejä haluttuun kohtaan nettisivun ulkoasussa. Lähdekoodiin merkattu navigaatio saattaa löytyä sivun lähdekoodin lopusta, kun se ulkoasussa näkyykin aivan sivun yläosassa.

Tein tuossa jokin aika sitten erään Eskon kotisivuille ulkoasua. Ul […]

Mainoksia minisivustolle?

Taustakuva hr-elementille.

Demosivulla jokainen hr-elementti saa taustakuvan perinteisen vaakaviivan sijaan. Homma tietysti CSS:n avulla toimii, eli näin:

hr {
    margin: arvo;
    border: 0;
    height: arvo;
    width: 100%;
    background: url(../hakemistopolku/kuvaan.png) no-repeat 50% 0;
    }

Melko pitkälti samanlainen temppu on käytössä tuolla Kuopassa.com:in portfolio-osastolla. Sivujen alaosassa näkyvä koristekuva pal […]

Navigaatio, fixed.

Ja taas jatkuu näiden elämääkin suurempien vinkkien jakelu. Laitetaan vaikkapa nettisivujen navigaatio sivun yläosaan siten, että se pysyy siinä vaikka sivua vieritettäisiin, skrollattaisiin, ylös tai alas.

Tuo esittelysivu paljastaa melko hyvin sen, mitä tuolla äskeisellä kömpelöllä kuvauksella tarkoitin.

Esittelysivussa näytetään ilman kehyksiä ja ilman JavaScriptia toteutettu navigaatio. Navigaation, eli […]

CSS-tiedosto vanhoille Internet Explorer -selaimen versioille.

Internet Explorer 7 tullee piakkoin levitykseen ja sen CSS-tuen kerrotaan olevan huomattavasti edeltäjiään kehittyneempi. Ehkä 7. versiota varten ei tarvitse tehdä omia räätälöityjä CSS-määrityksiä... Vanhemmat IE:n versiot kuitenkin tulevat olemaan jatkossakin riesana. Tyylitiedoston vanhoille Internet Explorerin versioille voi määritellä tällaisella ehtolauseella:

<!--[if lte IE 6]>
<link href="polku/cs […]

Kuvien laittaminen riviin (pieni vinkki).

Tässäpä kuuman kesäillan herkullinen vinkki: img-elementtien laittaminen ruotuun onnistuu yksinkertaisimmillaan näin:

img {
    display: inline;
     }

Yllä näkyvä esimerkki on pieni CSS-taika, jonka avulla saadaan laitettua kaikki nettisivulla näkyvät img-palaset riviin, ellei jokin toinen CSS-komento toisin käske.

Jos halutaan laittaa riviin kaikki sellaiset kuvat (img), jotka ovat div-palikan sisällä, o […]

Kevään 2006 CSS Reboot.

Kevät 2006: CSS Reboot

Kevään 2006 CSS Reboot käynnistyy 1. päivä toukokuuta kello 06.00 GMT.

Luettelon rivit nappuloiksi.

Tämän blogin ulkoasun oikeassa laidassa näkyy kaksi tuollaista oranssia nappulaa. Nappuloissa lukee RSS ja Atom. Nappulat ovat linkkejä RSS- ja Atom-syötteisiin.

Nappulat on rakennettu tavallisen järjestämättömän listan lista-alkioista. Alla esimerkki tällaisesta luettelosta.

<ul
><li><a href="#">RSS</a></li
><li><a href="#">Atom</a></li
></ul>

Koodiesimerkissä ehkä ainoa kummallinen juttu on noiden väkäs […]

Tyylitiedoston koolla on väliä.

Tyylitiedoston koko saattaa kasvaa yllättävän suureksi. Kun CSS-tiedoston koko kasvaa parinkymmenen kilotavun mittoihin, muuttuu kyseisen tiedoston muokkaaminen ja päivittäminen suorastaan vaivalloiseksi.

Jospa ei tallennettaisikaan kaikkia sivuston tyylimäärittelyitä samaan tyylitiedostoon, vaan tallennettaisiin eri osioissa käytettävät CSS-määritykset omiksi tiedostoikseen?

Voimme vaikkapa tallentaa omaks […]

CSS-tiedosto XML-tiedostolle.

Netissä on paljon ladattavia ohjelmia, joilla voi valmistaa sivukartan Googlea varten. Eräs tällainen ohjelmisto on CoffeeCup Google SiteMapper, jonka voi ladata maksutta shareware-versiona tietokoneelle.

Kyseinen ohjelmisto penkoo nettisivuston tiedostot läpi ja tuottaa löytämistään tiedostoista XML-tiedostona sivukartan, jonka voi tallentaa kovalevylle ja lähettää suoraan Googlelle.

Raa’an, tyylittelemättö […]

Se mainos, kelluva.

Laitoin pari päivää sitten Kannukkaan -sivuston mainoksen blogin vasempaan yläkulmaan. Naputtelin siitä aiheesta blogimerkinnän.

Nyt laitetaan samainen mainostaulu kellumaan, joka onnistuu käyttämällä tätä CSS-koodia:

#blogipropaganda {
position: fixed;
left: -5px;
top: 0;
width: 156px;
}

Valitettavasti position: fixed ei oikein toimi nykyisillä Internet Explorerin versioilla. Mahdollisesti tulevaisuude […]

Se mainos.

Laitoin eilen illalla mainoksen tuohon sivun vasempaan yläkulmaan. Mainostaulu löytyy kuitenkin lähdekoodia tarkastelemalla vasta aivan sivun alalaidasta.

Lyhyehköä CSS-koodia käyttämällä sain sijoitettua kuvan täsmälleen haluamaani paikkaan:

#blogipropaganda {
position: absolute;
left: -5px;
top: -5px;
width: 156px;
}

Ehostusta.

Teokset-osiota ehostettu. Yhdellä vaatimattomalla kuvalla ja CSS-merkkauksella loin varjostuksen esikatselukuviin.

Kyseessä olevan efektin luomiseksi CSS-merkkaus on tämännäköinen:

.taustavarjostus { width: 90px; height: 70px; padding: 0; background: url(../images/plus/varjostus_portfolio.png) no-repeat 100% 90%; }

Kuva, johon varjostus liitetään, on kooltaan 40 × 50 kuvapikseliä. Käytän itse taulukkoa, jo […]

Ei taulukoita, ei divejä.

CSS:n avulla ainakin yksinkertaisen verkkosivun ulkoasun rakentaminen onnistuu ilman noita table- tai div-elementtejä. Tässä minun aikaansaannokseni: blogileiska.

Korinaa kuopasta on weblog. Edelleen.

Tämä blogintapainen kirjoitusalusta sisältää Webiin, nettisivuihin ja nettisivujen tekemiseen liittyviä kirjoituksia Peteltä.