Allt om färdiga open source lösningar för webben » CSS

swfIR image replacement|swfIR bild ersättaren

Stefan — Sun, 26 Apr 2009 08:32:11 +0000

swfIR är som sIFR fast med bilder istället för text. Det är ett script som byter ut valda bilder på hemsidan och laddar in dem i flash istället. Detta gör att du kan lägga på samma effecter du kan ha i flash på dina vanligt inladda bilder på hemsidan, tex: Skuggor, rundade hörn rotera bilder eller lägga på en snygg border.swfIR is like sIFR but replaces images instead of texts. It’s a script that replace shoosen images in your html page and replace them with flash instead. That make it posible to add effects like Shadows, rounded corners, rotate or add borders.

swfIR: http://www.swfir.com/
Demo: Elastic, Rotate, Rounded, Multiple
Ladda nerDownload: swfIR V1

JQuery Cycle Plugin

Stefan — Mon, 27 Oct 2008 11:55:50 +0000

En kollega till mig testade jQuery pluginet Cycle.
Den är SEO-vänlig och man kan göra om vilka element som helst till slideshows.

Det finns vissa begränsningar för IE (som vanligt) i form av att vissa av easing algoritmerna inte fungerar (BackIn t.ex.) men med tanke på vad Cycle erbjuder så gör det nog inte så mycket.

Cycle erbjuder fade mellan bilder eller text, card shuffle style transition, curtain scroll, regular scroll, osv. På ett sätt påminner syntaxen om TweenLite till flash.

Kodexempel:
$(‘[jQuery selector]‘).cycle({fx:’fade’});

Demo: http://malsup.com/jquery/cycle/
Ladda ner: http://malsup.com/jquery/cycle/download.html

YUI CSS Reset

Stefan — Wed, 22 Oct 2008 10:05:34 +0000

Yahoo har faktiskt gjort en hel bunt med smarta lösningar.
En sak jag stör mig på väldigt mycket är hur alla webbläsare renderar olika HTML-taggar. Det problemet är löst fixat genom att använda Yahoos CSS-fil som nollställer formateringen så allt ser likadant ut i alla webbläsare vad gäller marginaler och storlekar.

Varje gång jag bygger en sida är detta det första jag lägger till.

Ladda ner: http://sourceblogg.se/wp-content/uploads/2008/10/reset.css
Exempel på nollställning: http://developer.yahoo.com/yui/examples/reset/reset-simple_source.html