Bygg en tidningssajt med WordPress – del 3

Fokus.se finns nu i en särskild iPhone-variant. Den bygger på en fantastisk plugin vid namn WPtouch som i ett trollslag gör ditt Wordpress anpassat för iPhone, och i viss mån även för Android och andra moderna mobila enheter.

Att få det hela att funka är lika enkelt som att installera vilken plugin som helst, förutsatt att du inte cachar sidan, då krävs det lite extra meck med .htaccess och så. Men skam den som nöjer sig med en default-installation. I synnerhet eftersom iPhones webkit är den mest kapabla renderingsmotorn för webben hittills, och får åtminstone mitt hjärta att klappa lite fortare.

Nu när du har installerat WPtouch, låt oss kika på några av de saker du kan göra med css3 i iPhone. Eftersom detta inlägg handlar om iPhone tänker jag inte gå in på vilka andra webbläsare som eventuellt är med på noterna.

Skuggor

Du känner till det som drop shadow, eller outer glow i Adobe CS. Och nu kommer det till webben. Attributen lägger helt enkelt en skugga på block-element respektive text-element. Du kan specificera offset, blur och färg.

-webkit-box-shadow: 0 0 5px #777;
-webkit-text-shadow: 1px 1px 0 #eee;

Gradienter

Med css3 slipper du göra dina gradienter som små bakgrundsbilder, och göra om, göra om och göra om, för att få till en perfekt färgövergång. Med -webkit-gradient kan du skriva färgerna direkt i cssen, med alla funktioner du är van vid från ditt favoritbildredigeringsprogram.

Och bäst av allt: du kan specificera färger med rgba(röd,grön,blå,alpha), och alltså ha transparens i gradienterna, något som inte ens Adobe illustrator CS3 klarar av på ett vettigt sätt.

background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), to(rgba(200,200,200,0.0)), color-stop(.6,#ddd));

Runda hörn

En så enkel sak som ett rundat hörn är riktigt klumpigt att göra med css2. Massor med jobbiga extra-divvar och bakgrundsbilder, fula javascript eller dylika hacks krävs. I css3 behöver du däremot bara skriva:

-webkit-border-radius: 8px;

Överkurs

Iphone tillåter inte Flash, istället har man implementerat egna lösningar som gör det Flash gör och mer, fast snyggare och med bättre känsla. Du kan animera och transformera med css och skapa interaktion för touchscreen med javascript. Du kan till och med spara information i en lokal databas. Möjligheterna är såklart enorma, och jag har inte möjlighet att gå igenom allt här och nu, så ge dig ut och googla och experimentera.

Och spana in referensen för Safari css. Och har du ingen iPhone kan du registrera dig som utvecklare och ladda ned en. Och på css3.info kan du läsa massvis om hur läget ligger gällande andra css3-implementationer.

Ha kul!