css

Flat UI ett tema till Twitter Bootstrap

Jag har under senare tid ofta sparat undan en hel del sidor med så kallat Flat-utseende eller som man också kan kalla för Metro-utseende. Jag tycker det är väldigt snyggt och avskalat på något sätt och ofta ganska kraftfulla och starka färger vilket livar upp om man använder det på rätt sätt i härlig symmetri också.

Idag snubblat jag över något väldigt snyggt, men för mig ett nytt fenomen, men troligtvis inte det sista  utan troligtvis bara en början.

Tema till Twitter Bootstrap

Så istället för att komma med ett nytt eget CSS-ramverk vilket det börjat bli inflation av så har man skapat ett tema till ett av de mest spridda och kända, nämligen Twitter Bootstrap. Så på ett mycket enkelt sätt så kan du få till detta Metro/Flat-utseende på din applikation eller webbplats.
Den använder sig av exakt samma klasser som Bootstrap, men med ny kostym.

Mycket snyggt sätt och smart approach.

Du hittar det Flat UI här.

Så gör du gråskaliga bilder cross-browser med CSS

Har ni som jag svurit över att det inte funnits något smidigt sätt att göra svartvita / gråskaliga bilder utan att behöva skapa dom i Photoshop?
Här har ni lösningen som är cross-browser säker nere till IE6 vilket är mer än bra.
Jag skapade här ett exempel med hover-effekt och lade även på CSS3 transition (nej, det är inte cross-browser) för en mjukare övergång.

Hoppas det kan spara hår och tid för någon annan.

jarnesjo-grancanariajarnesjo-grancanaria

img.gray { 
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

    -webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

img.gray:hover { 
    filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

jsFiddle: http://jsfiddle.net/jarnesjo/ys2Lf/5/
jsFiddle resultat: http://jsfiddle.net/jarnesjo/ys2Lf/5/embedded/result/