5 Minuten Tipps: Form Usability

Lern-Kaffeepause! Heute ein paar Tipps zu “Form Usability”, ein Thema das auch Backend-Entwickler nicht links liegen lassen sollten.

[CSS] Inset Box Shadow auf Grafik

Ich arbeite an einer Website auf der viele Bilder einen Schatten nach innen haben sollen. Um sie nun nicht alle in Photoshop bearbeiten zu müssen, kam mir der “inset” Wert für das CSS3 Attribut “box-shadow” gelegen, dieser kann auf Bilder jedoch nicht ohne weiteres angewendet werden. Meine Lösung dazu möchte ich hier zeigen.

CSS box-shadow over img - example
So sollte es aussehen.

Auf img Elemente direkt angewendet, bleibt der Schatten hinter dem Bild, ist also nur bei Grafiken mit Transparenz überhaupt sichtbar. Führt man ein Wrapper-Element ein, das den Schatten zugewiesen bekommt, liegt dies zunächst mal auch hinter dem Bild, lässt sich aber mit z-index positionieren. Leider muss das Bild nach hinten gesetzt werden, den Wrapper vor das Bild setzen ist nicht möglich 1:

Continue reading “[CSS] Inset Box Shadow auf Grafik”

Notes:

  1. Kann mir das jemand erklären? 100% Durchblick beim z-index habe ich offenbar noch nicht.

Kostenlose Icons und Online Icon-Generatoren

Du brauchst ein paar Icons für deine (Web) App, aber hast niemanden mit Mad Photoshop Skills™ parat? Diese drei Seiten werden dir helfen:

Iconfinder.net

Meine erste Icon-Ressource im Netz ist www.iconfinder.net, eine sehr große Datenbank von Icons und Icon-Sets in verschiedenen Formaten und Größen. Sie sind unterschiedlich lizensiert, es sind also nicht alle Sets kostenlos aber sogar “frei für den kommerziellen Gebrauch” finden sich etliche. Nach der Art der Lizenz lässt sich auch filtern.

Iconfinder.com Icon Download Database

ICONSDB.com Icon Customizer

Icons DB hat tausende völlig freie, einfarbige und individualisierbare Icons. Wenn du schnell einige einfache, flache Icons benötigst, findest du sie höchstwahrscheinlich hier. Der Clou: Alle können in beliebiger Farbe und Größe als ICO, PNG, GIF, JPG oder ICNS heruntergeladen werden.

Iconsdb.com Online Icon Generator

Iconizer.net Icon Generator

Iconizer ist eine große Icon-Datenbank, sehr ähnlich wie Iconfinder, bietet aber zusätzlich Individualisierbarkeit. So können auch komplexe mehrfarbige Icons fast beliebig in Farbe und Größe angepasst werden.

Iconizer.net Icon Generator

Noch ein Tipp:

Wähle deine Icons mit Bedacht, so dass sie leicht erkennbar sind für die meisten wenn nicht alle deiner Zielgruppe. Auch weitverbreitete Icons wie Ketten für “Link” sind nur für Geeks wie uns selbstverständlich, nicht für den Ottonormalverbraucher.

Ich empfehle diesen Artikel als Denkanstoß: http://stiern.com/articles/usability/usability-in-icons/

Farbpaletten-Tools (nicht nur) für Gelegenheits-Designer

Wer ab und zu ein einfaches Design auf die Beine stellen muss, ohne von Dingen wie Farbenlehre viel Ahnung zu haben, braucht sich deshalb noch lange nicht ins farbige Fettnäpfchen zu setzen. Hier drei Ressourcen für harmonische Farbpaletten:

1. Paletton

Einfach die Punkte im Farbenrad mit der Maus ziehen und live eine passende Palette erhalten, inklusive Vorschau, wie die Farben als Webseite wirken. Presets für Helligkeit und Sättigung wie “Pastel”, “Shiny” oder “Dark” sind nützlich als Startpunkt,

Link: http://paletton.com

Paletton.com Farbpaletten-Generator Screenshot Continue reading “Farbpaletten-Tools (nicht nur) für Gelegenheits-Designer”

CSS: 3D Ribbon Generator

Inspiriert von diesem Artikel auf pvmgarage.com habe ich kürzlich einen Generator für 3D CSS Ribbons geschrieben und ihn auf css3d.net veröffentlicht. Er erstellt CSS und HTML code für einen cross-browser kompatiblen Ribbon Effekt (nicht beschränkt auf CSS 3!), basierend auf Parametern für Größen und Farben. Die roten Überschriften im untenstehenden Screenshot sind auch so generiert:

Viel Spaß damit!

Wenn Du interessiert daran bist, wie es funktioniert, besuche den obigen Link oder lies über den CSS Dreieck Trick auf css-tricks.com.

CSS Top margin vor scheinbar aus dem Nichts

Ein typisches CSS problem aber ich stolpere immer wieder darüber: Die ganze Seite ist 10-20 pixel nach unten verschoben, trotz aller vorstellbaren Varianten von margin:0 in den <html> und <body> Elementen.

Was war es? Ein <h1> irgendwo im floating layout, dessen margin-top alles nach unten verschob.

Notiz an mich selbst: Immer auf die Überschriften achten!

Nützlicher Link: Margin Collapsing