Hvordan kjøre CSS3 i IE

5

CSS3 lar nettdesignere utfolde seg friere, med mye av dens effektive funksjonalitet. Selvfølgelig fungerer minimalt av dette i Internet Explorer, men dét finnes det en løsning på – den heter CSS3 PIE!

Problemet

Du har garantert opplevd det. Man har proppet koden full av forfriskende, moderne og tidsbesparende CSS3. For eksempel border-radius som gjør kunsten med å lage avrundede hjørner meget enklere. I tillegg er det gøy å fråtse i bruken av box-shadow, multiple backgrounds, gradients og så videre.

Så du sitter der. Ser på den flotte nettsiden din, med en kanskje desto mer elegant CSS. Ja, du får kanskje ta en titt i IE (Internet Explorer) og se at «alt er som det skal»? (Tror egentlig aldri jeg har tenkt dette om IE, men du fatter poenget.) Du tar en titt i IE, hvorpå du oppdager at den ikke hadde så veldig lyst til å lese noe av CSS3-koden din i dag. Pokker.

Løsningen

Litt festlig at et såpass, tilsynelatende uløsbart problem har en så enkel løsning. Vi skal bruke CSS3 PIE.

1. Last ned CSS3 PIE og pakk ut filen PIE.htc.

2. Legg filen sammen med de andre design-filene dine og noter deg dens filbane.

3.  Legg til behavior: url(mappe/PIE.htc); i ditt CSS3-element.

For eksempel slik:
#fancy-firkant {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(mappe/PIE.htc);
}

Sjekk siden din i IE. Utrolig? Jepp. Det er ikke alltid slik det løses i forhold til CSS-elementet, blant annet er det annerledes ved multiple backgrounds. Jeg foreslår at du leser litt på den greie dokumentasjonen til CSS3 PIE for litt mer konkret info og eksempler.

Du lurer kanskje på om jeg sitter her og babler om denne løsningen uten å ha prøvd den? Da kan jeg fortelle at blant annet søkeboksen, kommentarfeltet og footeren benytter seg av dette. Litt artig.

Vel …

CSS3 PIE tar seg ikke av alle ting IE ikke klarer å lese, for eksempel text-shadow (se støttede funksjoner), men det kommer nok støtte for mer etter hvert. Vi kunne jo forsåvidt fundert på om IE lærte seg å lese selv en dag, men dét ville nok blitt ønsketekning. Vi kan jo ikke drømme oss helt bort …  eller hva?

Lykke til med paibakingen! :-)

Legg igjen en kommentar (5) | Sjekk hele »»
18. august, 2010

Mine kilder til inspirasjon (1)

3


«Kreativ sperre»? Sulten på noe nytt som kan få deg til å tenke litt annerledes? La meg vise deg noen av tingene som inspirerer meg.

Det er viktig å huske på at inspirasjon ikke nødvendigvis er noe du kan se på. De beste kildene til inspirasjon er derimot ikke noe håndfast, men noe du har opplevd og latt deg inspirere av. Videre bør man også huske på at det ikke er så vanvittig enkelt, som at du kan høre en fin sang, for så å male verdens vakreste bilde.

Skjønt, noen ganger kan det virke slik. Én ting får deg til å tenke ut noe flott og du er sikker på at det er denne tingen som gjorde at du kom på den gode idéen, designen, låten og gud vet hva. Men etter min mening var dette bare dråpen som fikk begeret til å renne over – begeret fylt med åndedrag. (Hm, nå fikk jeg lyst på en flaske av dette …) I hvert fall vil jeg dele litt av det som ofte får det til å bli fortreffelig lapskaus i hodet.

Fotografier og grafikk

Det er utrolig mye fantastisk der ute. Med så store mengder av bilder, i form av foto eller grafisk design, gratis tilgjengelig, er det dumt ikke å benytte seg av muligheten til å bare nyte noen slike samlinger.


Flotte steder å titte på slikt kan være Flickr. Fotografer som Morten Prom og Skarphéðinn Þráinsson er verdt å sjekke ut. I tillegg blir jeg ofte fascinert av bildene på The Big Picture, hvor man kan finne f.eks. de sterke bildene av flommen i Pakistan. Bildet i toppen av innlegget er hentet fra en samling gamle fargebilder fra Amerika – disse må du ta en titt på!

Verdensveven

… som noen har funnet på å kalle Internett, eller slang som «nettet». Noen jeg anbefaler – forøvrig mest rettet mot grafiske designere, nettdesignere og fotografer – er Smashing Magazine, Abduzeedo Styleboost, LogoPond, Webdesignmagasinet og The Design Inspiration. Dette er delvis brukergenererte nettsteder, som poster kvalitetsinnhold for alle og enhver. Er det allerede noen av nettstedene du ikke besøker, så anbefaler jeg deg å gjøre det!

Reise bort

Ganske klisjéfylt inspirasjonskilde, men det funker. Det har etter hvert gått opp for meg at jeg har klekket ut noen design eller idéer, mens jeg har vært på hytta på fjellet (les: helt uten alt som heter PC og Internett [forøvrig dårlig dekning for mobiler, for kverrulantene som mener jeg burde sjekket ting på iPhonen min ;)]). Ved å koble av kan man ofte begynne å tenke i nye, spennende mønstre og vips så er du kreativ når du kommer hjem – kanskje.

Fortsettelse følger …

Jeg innså etter etter hvert at dette innlegget ble litt lengre enn planlagt, så en andre og siste del er like rundt hjørnet på bloggen. Har du noen tanker om hva som inspirerer deg, så er kommentarfeltet ditt! :)

Legg igjen en kommentar (3) | Sjekk hele »»
17. august, 2010

Ny design er tingen!

9


Det skulle en liten pause til før bloggen ble gjenopplivet, men jeg håper det var verdt det. Bloggen mattisaas er redesignet og klar for en fin fremtid.

Ny design er ny motivasjon. Jeg har satset mer på det minimalistiske, og har valgt å jobbe litt ekstra for god lesbarhet. I tillegg har jeg kost meg litt med noen CSS3-detaljer og ikke tatt altfor mye hensyn til IE. Hvem bryr seg vel om dét? ;)

Framover vil jeg, som alle sier ved relanseringen av bloggen deres, skrive hyppigere enn før og fortsette å skrive om temaene som opptar meg, samt type saker jeg har lagt merke til at du liker. For de som ikke kjenner til Mattis fra før, ligger det en revidert(!) beskrivelse av ham her.

Gleder meg til å blogge videre og setter – som alltid – pris på tilbakemeldinger fra deg. Håper bloggen faller i smak. God lesning! :)

PS: Det er fortsatt en del småting som plutselig kommer på plass her og der, men det er jo litt av dét som gjør det spennende. Alt skal ikke være perfekt. ;)

Legg igjen en kommentar (9) | Sjekk hele »»

Bilde av ny Spotify lekket?

5


Ganske så tilfeldig kom jeg i kveld over et screenshot av Spotify. Dog var det noe som var annerledes, og jeg tenkte straks at dette var bloggstoff. Kanskje er det en fremtidig versjon det er snakk om? :)

Det var på bildelagringstjenesten TinyPic jeg kom over bildet; bildet her. Klikk på bloggpostbildet over for å se det i full størrelse. Selvsagt må man ta dette med en klype salt, det er mye fjas som flyter rundt på nettet (blant «lekkede» bilder av en ny iPhone som gjør min egen versjon til en murstein ;)). Men sett at det kan være noe noen i Spotify har tenkt på, kan vi titte litt nærmere på hva jeg har merket meg som er annerledes i den nye versjonen:

  • Tykk menylinje i horisontal meny. Her med kun ikoner, ser ut til å være nogen lunde samme funksjoner som tidligere.
  • MySpace-integrasjon? Logoen oppe sammen med Facebook- og Twitterlogoen er en MySpace-logo (om jeg ikke er blind). Kanskje skal det ha noe sammenheng med det kjente bandnettstedet som egentlig går i nedoverbakke med årene?
  • Sangtekster kan man se over albumgrafikken nede til venstre; View Lyrics. En etterlengtet funksjon for Singstar fans, antar jeg… ;)
  • EQ. Nede i høyre hjørnet er det kommet et nytt ikon som ser ut til å være for en equalizer. Det er i hvert fall en funksjon som er savnet, også av undertegnede.

Hva tenker du om screenshot-et? Vil vi få se noe slikt, og er det i så fall noe du gleder deg til? :)

Legg igjen en kommentar (5) | Sjekk hele »»
16. mai, 2010