En varm Arboga 10,2 tack

I söndags gick Maria, jag och Vincent till en pizzera i Kalmar för att inta vår middagsmåltid. Under måltiden kom en ensam herre i 60-årsåldern in på restaurangen. Han var törstig på öl, men inte vilken öl som helst. Nej, han var minsann en äkta finsmakare…

- Hej, jag ska ha en öl. Har ni Arboga 10,2?
- Nej, tyvärr.
- Någon annan extra stark öl då?
- Det kan vi säkert ordna… jo vi har Mariestads 7,0.
- Då tar jag en sån, men den ska vara varm. Har ni några ute på lagret som inte kylts ner?
- Jag ska höra med min kollega…

Herrn fick tillslut sin rumstempererade extra starka öl, men verkade ändå lite bitter över att styrkan inte var maxad. Kanske trädde inte spritsmaken fram på ett tillfredställande sätt?

Inhandlat digital systemkamera

Jag köpte en digital systemkamera i fredags. Det blev budgetvarianten Nikon D3000, vilket får duga ett tag för en nybörjare som mig. Tanken är att den ska användas till bilder för mina webbplatser.

För att bekanta mig med kameran tog jag idag lite meningslösa bilder, bl.a. på denna fiskmås…

Eget typsnitt med CSS (cross-browser)

Många väljer av estetiska skäl att använda bilder istället för rubriker på sin webbplats. Bilder som rubriker har i huvudsak två nackdelar:

• Det är tidskrävande och oflexibelt
• Sökmotorer går miste om viktig information

Med CSS3 begränsas du inte till de typsnitt som besökaren installerat på sin dator. Genom att lägga typsnittet på servern och referera till det via CSS öppnas helt nya möjligheter.

Det huvudsakliga problemet är att IE inte stödjer TrueType-typsnitt. För att fixa detta krävs att typsnittet finns som både TrueType (TTF) och OpenType (EOT). Ett TTF-typsnitt kan enkelt konverteras online till EOT med hjälp av TTF to EOT Font Converter. Ladda sedan upp bägge typsnitten till servern…

Exemplet nedan ser ut som en skärmdump från Commodore 64 BASIC, men skenet bedrar. Jag har endast använt mig av CSS3 och typsnittet ”Commodore 64″ (prova gärna att markera gärna texten).

Så ser koden ut:

<style type=”text/css”>
@font-face {
font-family: ”Commodore 64″;
src: url(‘/c64.eot’); /* IE */
src: local(‘Commodore 64′), url(‘/c64.ttf’) format(‘truetype’); /* non-IE */
}

.c64-screen  {
width: 320px;
height: 200px;
font-family: ”Commodore 64″;
font-size: 10px;
color: #7777ff;
background: #110099;
border: #7777ff 32px solid;
padding-top: 1px;
line-height: normal;
}

.c64-header  {
text-align: center;
}
</style>

<div class=”c64-screen”>
<div class=”c64-header”>
**** COMMODORE 64 BASIC V2 ****<br /><br />
64K RAM SYSTEM &nbsp;38911 BASIC BYTES FREE<br /><br />
</div>
READY.
</div>

Livsnjutaren Aila

Vår livsnjutare till katt parkerad i soffan.

Rundade hörn med CSS – Utan bilder

Mitt Photoshop Action för rundade hörn i Photoshop har kommit till stor användning för mig och många andra. Idag var jag på jakt efter en metod att skapa rundade hörn utan i bilder i CSS. Detta har varit möjligt i FireFox sedan lång tid tillbaks, men på alla forum och bloggar stor det samma sak; ”There is no way to do it in Internet Explorer”.

Efter en stunds letande hittade jag dock sidan curved-corner med ett CSS-skript är helt cross-browser. Det går nu alltså få runda hörn helt utan bilder i FF, Chrome, Safari, IE6, IE7 och IE8!

Tanka hem border-radius-demo.zip och lek med runda hörn!