kosmar

In der letzten Zeit gestalte ich immer öfter direkt in CSS oder schreibe Codern meine Idee zumindest in Code auf. Dabei muss man andauernd irgendwas im Internet nachschauen. Was, wie, wie genau, warum nicht und in welchem Browser etc.

Hier eine Liste von hilfreichen Referenzen, Tools, Dings; hauptsächlich damit ich sie selbst schneller wiederfinde:

• CSS-Gradients sind der allerletzte Sch… …rei. Total cool im Prinzip, aber auch total schwierig im Grafikprogramm abzuleiten oder gar im Kopf auszudenken. Und Firefox kann keine Notation mit rgba, verflixt nochmal. Der CSS3-Gradient-Generator hilft.
• Absolut praktisch auch der Gradient Scanner, um den Code direkt aus einer Grafik, einem Screendesign abzuleiten.
• CSS-Transitions sind eine Offenbarung. Ein Nervpunkt: andauernd mit Browser-Prefixen rumhantieren. Ein anderer: Das Easing kann ich mir im Hirn nur ganz schwer previewen. Und da man das Easing per Bézier-Ankerpunkte selbst basteln kann (w00t), macht man das dann auch. Mit dem CSS cubic-bezier Builder ein Riesenspaß für die ganze Familie.
• Webfonts sind das fast Allerneuste. Und die meisten sind leider nicht so besonders gut. Als Fließtext. Und das testen ist recht aufwändig. Good web fonts will da helfen, leider noch etwas dünn.
• Sich selbst ein Webfont-Päckchen schnüren lassen, sprich die ganzen Font-Formate konvertieren, Subsets machen, weitere Optimierungsoptionen und direkt mit aktuellem Code zum Einbinden: dem Font-Squirrel sein @font-face-Generator, natürlich.
• Die Webfonts im Directory von Google zeichnen sich dadurch aus, dass sie schnell und einfach einzubinden sind, zudem kostenlos und die Qualität insgesamt ok bis sehr gut ist.
• Für Chrome gibt es dazu noch eine Extension, um einen beliebigen URL in einem der Google-Webfonts anzuzeigen. Großartig um zu Testen.
• Ähnliches, aber noch etwas mehr macht der FontFriend, ein JS-Bookmarklet zur Preview eines Dokuments mit einem lokalen @font-face (drag and drop) oder gWebfonts und einigen Optionen (line-height, text-transform, nur spezielle Selektoren …). Außerdem zeigt er an welche Fonts auf der aktuellen Page verwendet wurden (wow!). Ein echter Knaller.
• Unerlässlich um herauszufinden, ob man diese und jene CSS3-Anweisung benutzen will: Can I Use.
• Trotz @font-face sind Fontstacks natürlich nicht tot, und ein Fallback muß sowieso her. Gute Quelle: CSS-FontStack, Supercooles Profitool ist aber, obwohl knackhäßlich: Der Font stack builder von Codestyle. Einfach ausprobieren, verwirrt erstmal kurz, ist aber sehr hilfreich.
• Hier ist die GoogleWebFontLoaderAPI-Dokumentation. Falls man die mal braucht.
• Wissenwertes über font-smoothing (Webkit im Speziellen) und wie man es (im Allgemeinen) per JS detecten könnte
• Komplexere Schatten per CSS ist nur einer der Erstaunlichkeiten auf der Site von Nicolas Gallagher
• Schnell mal die Anweisungen für border-radius zusammenklicken.
• Box-shadows, gradient, border-radius photoshopmäßig zusammenklappern
• Border-radius so richtig verstehen, weil jede Ecke hat ja zwei Radii, jaja.
• Mehr Links zu CSS, Webfonts und @font-face

tbc … add your own in the comments. (Thx @schoschie, @yellowled)