robsite

In tool

Wordoid

Generator für leicht aussprechbare aber sinnlose Wörter. Praktisch um zittelbare Startup-Namen zu streiben.

· tool, wort ·

jQuery Masonry

jquery-masonry

Ordnet Elemente vertikal so an, dass es möglichst kleine Lücken zwischen ihnen gibt.

Edit: Version 1.1 kann nun Elemente live resizen und dabei animieren: Demo

· jquery, tool, webdesign ·

CSS3 Tools

CSS3 bietet viele feine Funktionen für runde Ecken, Schatten, Gradients oder Web-Fonts. Noch machen dabei alle Browser ihr eigenes Ding, weswegen der Standard noch nicht finalisiert ist. Hier ein paar Tools, die einem das Bauen von browserunabhängigem CSS3 erleichtern:

CSS3, Please!

hat live veränderbare Snippets für border-radius, box-shadow, lineare Gradients, Rotationen und WebFonts. Mehr soll bald kommen.

Der

CSS3 Gradient Generator

generiert lineare Gradients für Webkit und Firefox, während die

ein schickes Interface bieten, mit dem man sich lineare und radiale Gradients, Schatten, Text-Strokes und diverse 2D- und 3D-Transformationen zusammenklicken kann. Chris Casciano erklärt dann noch, wie man box-shadow-ähnliche Schatten im IE hinbekommt.

Ich hab auch mal meine paar CSS3- und HTML-TextMate-Snippets zusammengepackt: Textmate HTML- und CSS3-Snippets - 5 KB

Die Beipiele sehen am besten aus in Safari und Chrome.

$('body').mousemove(function(ev) { var deg = ev.pageY % 360; var degx = ev.pageX % 360; var rad = deg/180 * Math.PI; var bsx = 60*Math.sin(rad); var bsy = 60*Math.cos(rad); var tsx = -bsx/60; var tsy = -bsy/60;

$('#css3gradgen').css({ '-moz-transform': 'rotate('+deg+'deg)', '-o-transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-webkit-box-shadow': '#666 ' + bsx + 'px ' + bsy + 'px 50px', '-moz-box-shadow': '#666 ' + bsx + 'px ' + bsy + 'px 30px', 'box-shadow': '#666 ' + bsx + 'px ' + bsy + 'px 30px', 'text-shadow': 'rgba(0,0,0,0.7) '+tsx+'px '+tsy+'px 1px'});

$('#css3westciv').css({'-webkit-perspective': ev.clientY + 'px'}); $('#css3westciv a').css({'-webkit-transform' : 'rotateY('+degx+'deg)'}); }); });

· css, tool ·