Dipl. Inform. Fabian Schmengler | Magento Certified Developer | Magento Certified Solution Specialist
Lern-Kaffeepause! Heute ein paar Tipps zu “Form Usability”, ein Thema das auch Backend-Entwickler nicht links liegen lassen sollten.
Und für die Form-Validierung: Prüfe, ob ein “@” vorkommt. Nicht mehr und nicht weniger. Wer wissen möchte, warum, lese hier: The 100% correct way to validate email addresses.
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.
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:
Du brauchst ein paar Icons für deine (Web) App, aber hast niemanden mit Mad Photoshop Skills™ parat? Diese drei Seiten werden dir helfen:
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.
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.
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.
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/
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:
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
Continue reading “Farbpaletten-Tools (nicht nur) für Gelegenheits-Designer”
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.
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
