What is the first thing you do when it’s time to create a new CSS file? You might start from scratch with a blank CSS every time. You might use Eric Meyer’s reset.css. You might probably work with one of the numerous CSS-frameworks, such as Blueprint CSS or YAML or even use the CSS stuff from that YUI framework. You might even start with your CMS’s standard theme and adjust things from there…

One thing you might forget when you hack in the first lines of CSS (and this happens to the best of us) is to use reallife markup instead of that boring “Lorem ipsum…” designers seem to have a faible for. This is where this markup snippet comes into play: it should help you with filling your wireframe layout with some actual HTML-markup.

So just plain HTML, huh?

This snippet provides a wide range of commonly used markup, that should be supported by most rich editors (a.k.a. WYSIWYG editors).
Since every coder has his own preferences towards class names. I decided to leave out the fancy stuff you could do with classes at all, as this would force some people to spot, delete, or rename those classes afterwards, which would be counterproductive. So this is plain HTML.

Download

Since each and every CMS treats the markup you insert into its page editor differently, I decided to provide both: a version with regular HTML and one without the paragraphs for those CMS that come with their own paragrapher-functionality.
Sample Markup v0.2 (text file, 8 KB)
Sample Markup v0.2 without paragraphs (text file, 8 KB)

Some notes: the HTML-elements included in the snippet are: p, a, abbr, acronym, samp, code, pre, ol, ul, li, blockquote, cite, q, table, caption, thead, tfoot, tbody, tr, td, th, em, strong, sup, sub, div, span

That’s basically it. Just create a code snippet in your favorite editor and remember: Sample markup is the new lorem ipsum.
Am I missing something? Looking forward your improvement suggestions.

Changelog:

• v0.2 fixed a sad error, my bad.
  additionally set up a subversion repository for these files (2010-05-05)
• v0.1 Initial version. (2009-10-9)

So what this does is: First, it requires you to set up a list with images and another div with links (the controls). have a wrapper div surround this. When clicking on a ‘pager’ link, it will then slide the whole list in its parent div.

(via rajubitter)

Wenn ich mich hier so respektvoll verneige, dann tu ich das weil mir jemand anschaulich und einfach erklärt hat wie CSS funktioniert bzw. diverse Tricks und herangehens- und Denkweisen demonstrierte.

Nun berichtet Douglas Bowman, der einst kontrovers die Vorzüge von CSS anhand der Microsoft-Seite erklärte, warum er nun nach Jahren Google verläßt. Und vieles von dem was man da liest wird in ähnlicher Form auch anderen Designern bekannt vorkommen: so ist von 40 blau-Schattierungen die Rede, weil man sich nicht für eins aus zwei blaus entscheiden konnte, oder von Argumentationen für und wider einer 3 Pixel oder doch lieber 5 Pixel starken Umrandung.

In der Tat ein Armutszeugnis für Google, wenn sich ein Designer und Webstandardista von Bowmans’ Kaliber offen über solchen Starrsinn beschwert. Nun, wer seinen Designer (wohlgemerkt ein Fachmann) mit soetwas sabotiert, macht in jedem Fall etwas falsch und muss sich den Vorwurf dann auch gefallen lassen.

Für mich (nach Jahren) ein Grund mal wieder öfter in Bowman’s Blog zu sehen. Ich bin sehr gespannt was da kommt…

1. img { -ms-interpolation-mode: bicubic; }

Das ganze kann man bei css-tricks.com ansehen und nachlesen. Die Anweisung selbst ist natürlich proprietär, also außerhalb der CSS-Standards. Der Vollständigkeit halber sollte man (vielleicht) auch noch anmerken, dass Bilder, die man über die Attribute width und height skaliert suboptimal sind, da sie mehr Ressourcen verbrauchenals nötig - ein letztes Mittel, wenns mal schnell gehen muss, sozusagen.
(via IlT)

Imageflow 0.8

Dieser Ansatz ist vor allem durch die Cover Flow Technik bekannt geworden, welche von dem Künstler Andrew Coulter Enright entwickelt wurde und nun - von Apple aufgekauft - unter anderem in iTunes zum Einsatz kommt.

Imageflow nennt sich ein feines Javascript, welches eine beliebige Anzahl Bilder auf stylische Weise darstellt. Auf jeden Fall mal ansehen! Auch wer wie ich nicht unbedingt auf Effekthascherei steht wird zugeben müssen, dass es nicht nur sehr platzsparend und leicht zu bedienen ist. Es sieht in erster Linie auch sehr gut aus. Leider benötigt die intensive clientseitige Größenberechnung der Bilder einiges an Ressourcen. Wie gut bzw. wie flüssig die Animation abläuft hängt sowohl von der Rechnerleistung und der Geschwindigkeit des jeweiligen Browsers beim Ausführen des Javascripts ab. Hier machen IE und Safari keine gute Figur.

Für Anhänger von Javascript-Frameworks heißt es vorerst abwarten, doch es wird wohl nur eine Frage der Zeit sein bis es Ports für die speziellen Frameworks gibt. Momentan gibt es neben dem Originalskript noch eine MooTools-Variante. Ich hoffe dass da auch bald was für jQuery kommt.

Beispielintegration in WordPress - PHP-Codeschnipsel

Für den Moment funktioniert es aber ohne großen Aufwand: 1) Javascript eingebunden 2) ein Verzeichnis für Bilder erstellt 3) einen eigenen Unterordner /cache/ für die Reflexionen angelegt 4) nun nur noch eine einfache Funktion erstellt, die im Verzeichnis nach Bildern sucht und diese ausgibt. Dabei werden Bildbeschreibungen automatisch aus dem Dateinamen generiert.

So braucht man lediglich Bilder ins passende Verzeichnis hochladen und die Galerie wächst. Noch einfacher und hübscher geht das sicher nicht.
Hier ein Beispiel, wie die Funktion aussehen kann, die die Bilder in einem Verzeichnis findet und ausgibt. (In meinem Fall, einem WordPress-Theme habe ich diese Funktion einfach in die Dateui functions.php des Themes gepackt.)

1. 1.function generate_imageflow_images() {
2. 2.$photo_directory="bilder/"; // include trailing slash
3. 3.$index_directory=$photo_directory; // directory indexed for photos (for instance, you could instead index your thumbnail directory)
4. 4.$file_extension=".jpg"; // extension
5. 5.$sep = "_"; // this char will be replaced with white-space for displaying an image-title
6. 6.$sort=2; // 0: no sorting; 1: sorts files alphabetically; 2: sorts files by date
7. 7.$dir=opendir($index_directory);
8. 8.if ($sort==2) {
9. 9.while($file=readdir($dir)) {
10. 10.if (strrchr($file,".")==$file_extension) {
11. 11.$files[filectime($index_directory . $file) . $file]=$file;
12. 12.}
13. 13.}
14. 14.} else {
15. 15.while ($file=readdir($dir)) {
16. 16.if (strrchr($file,".")==$file_extension) {
17. 17.$files[$file]=$file;
18. 18.}
19. 19.}
20. 20.}
21. 21.closedir($dir);
22. 22.if ($sort>0) {
23. 23.ksort($files);
24. 24.}
25. 25.foreach ($files as $key => $val) {
26. 26.$clean[substr($val, 0, -(strlen($file_extension)))] = $val;
27. 27.}
28. 28.foreach ($clean as $desc => $filename) {
29. 29.printf(
30. 30."<img src=\"%1$s/path/to/reflect.php?img=%2$s%3$s&fade_start=40\" alt=\"%4$s\" />",
31. 31.get_bloginfo('url'),
32. 32.$photo_directory,
33. 33.$filename,
34. 34.str_replace(array("_","-"), " ", $desc));
35. 35.}
36. 36.}

Inzwischen (vielleicht ist es ja schon aufgefallen) gibts in diesem Blog eine Premiere: das erste unfertige Redesign eines unfertigen Redesigns ;). Nun ja, zumindest das grelle rot, an das ich mich fast schon gewöhnt hatte, mußte nun dem frischen grün weichen, mit dem ich mich schon bedeutend komfortabler fühle. ;) Das sehen auch css-galleries.com, die Galerie CSSRemix.com und CSSBloom.com so und waren so freundlich meinen Blog in deren Showcases mit aufzunehmen.Ein Dankesehr an die Betreiber dieser Seiten.

Galerien

Insbesondere die letzteren beiden sind auch aus Sicht von Fotografen mit Photoblogs, Betreibern von Bilddatenbanken oder auch für Nutzer der Blogging-Plattform Wordpress interessant. Die Seiten zeigen nämlich dass man die Open Source Software Wordpress professionell zu anderen Zwecken als dem reinen Bloggen verwenden kann.
Gegenüber den unzähligen Photogalerie und Photoblog-Skripten wie folderblog, minigal, 4homepages, photopress, zenphoto, gallery2, etc. etc. bietet Wordpress nämlich einige entscheidende Vorteile:
Features, die man beim Verfassen von Artikeln, Beiträgen und Seiten nutzt machen gerade bei einer Photogalerie auch Sinn:

• 1. Kommentarfunktion, die darüberhinaus mit Spam-Karma oder Akismet effektiv vor ungebetenem Kommentarmüll geschützt wird
• 2. Pings, Trackbacks und Pingbacks
• 3. Eine individuell anpassbare Suchfunktion
• 4. sehr Suchmaschinen-freundlich da jedes Bild eine unikate, aussagekräftige URL erhält
• 5. Dem in Wordpress integrierten Multiuser-Support

Wo es mir grad einfällt…

Etwas Verwirrung verursacht derweilen deviantart.com bei mir: dort bin ich zwar (nicht mehr ganz so) frisch angemeldeter Neuling und habe angefangen die ersten Arbeiten hochzuladen, jedoch meldet sich dort inzwischen schon ein Wizzard zu Wort nach dem Motto: “Jahresbeitrag in Höhe…” und da endet meine Lust mich in Kleingedrucktes zu vertiefen dann auch aprupt… Falls sich schonmal jemand eben dieses Kleingedruckte angetan hat wärs super nett, wenn er/sie mir das mal für DAUs in einem Satz erklären könnte. Warum soll ich für meine Arbeit, eine Community mit meinem Input zu bereichern auch noch löhnen? Seltsam das. Oder nur falsch aufgeschnappt? Ist einem klar wieso Flickr so erfolgreich ist…

…zurück zum Thema

Neben dem noch ausstehenden Relaunch meines Photoblogs (in einer ähnlichen Designvariante) gilt es noch den ein oder anderen Fehler aus diesem Weblog zu beseitigen: im Internet Explorer sehen die Blöcke in der Seitenleiste etwas verhunzt aus, Opera stellt Umlaute in Suchergebnissen (Live-Suche) falsch dar, etc.
Wenn jemandem noch was auffällt, dann einfach ne Notiz da lassen oder eine E-Mail an erikpoehler [at] gmx [dot] de. Kritik ist jederzeit willkommen, wobei es natürlich auch die entsprechende Muse und nicht zu letzt die nötige Zeit zur Fehlerbestimmung und -Behebung meinerseits erfordert. Eine Antwort bekommt man aber (meist umgehend) von mir. Freue mich auf jeden Verbesserungsvorschlag. Zu guter letzt, sei heute noch auf ein Fundstück aus Manuela Hoffmanns Weblog pixelgraphix.de, und zwar dem DesignSnack.com hingewiesen. Ebenfalls ein großteils schöner und umfangreicher Fundus an CSS-Webdesigns.

Ich denke die klaren Vorteile von Standards-konformem Markup liegen im praktischen Nutzen und der

• 1. Logik Warum sollte man Inhalt zb mit dem veralteten <font> auszeichnen (zu deutsch: Schrift) wenn darin Text ist? Oder Seitenbereiche aus Gestaltungsgründen in Tabellenzellen sperren? Eine Tabelle ist nicht zum Gestalten da - das ist sie auch im Schulbuch früher nie gewesen oder auf jeder anderen Tabelle, die man auf Papier gedruckt, in Händen hält. Gegen alle WYSIWYG-Marotten sollte man sich einfach mal auf die gute alte Logik zurückbesinnen. Elemente fliegen nicht ohne Grund aus den Spezifikationen.
• 2. dass man seine Inhalte so für Suchmaschienen lesbar und auffindbar macht ist wohl der wichtigste (in erster Linie für den Seitenbetreiber) Punkt.
• 3. dicht gefolgt von der Usability und Accessibility: man kann froh sein wenn Besucher die über eine Suchmaschine auf die eigene Seite kommen mehr als ein paar Sekunden bleiben. Dann hat man interessante Inhalte und im Idealfall auch gut gestaltet und Besucher finden sich zurecht. Wenn aber dieser erste Eindruck getrübt wird, zB. weil Dinge nicht wie erwartet funktionieren (damit meine ich dass sie vllt. nur in einem bestimmten Browser funktionieren oder aber weil man dem Besucher Vorschreibungen macht zB. mit target=”_blank” etc.) vergrault man die neu gewonnenen Besucher. Deshalb sind Standards wichtig, denn die besagen nicht nur was Elemente beinhalten sondern legen zumindest einen Rahmen fest und machen Vorschläge wie die Browser diese Elemente handhaben könnten - wie die Softwarehersteller das dann umsetzen ist nochmal eine andere Frage.
  Benutzt man aber Markup, dass es in den Standards nicht (oder nicht mehr) gibt, hat der Seitenbesucher schlechte Karten, dessen browse-Verhalten oder dessen bevorzugten Browser man nicht kennen kann. Proprietäres Markup trifft eine unnötige und unproffessionelle Vorauswahl und sperrt u.U. Nutzer aus.
• 4. gaaanz weit hinten kommt in meinen augen dann erst das ideologische - denn mehr ist ein validator-test ja nun auch nicht - bgcolor, valign und center sind proprietär (ist doch so, oder? - zumindest aber deprecated ;)) und die brauser stellens trotzdem so dar wie mans erwartet. soll heißen: standards sind nicht gleich wirklichkeit. aber man sollte schon seinen teil dazu beitragen das web für webschreiber und surfer angenehmer zu machen. eine standards-basierte browser-welt eine hack-freie sache für webdesigner wäre.
• 5. Zukunftssicherheit (gibts nicht wirklich - aber zumindest gefühlt ;)) nein im ernst: Je mehr Leute auf Standards aufmerksam gemacht werden und sich an diese halten, desto mehr Bedeutung bekommen diese, desto wichtiger werden sie für brauserhersteller, desto mehr verlass auf regeln kann der webschreiber haben. (“im firefox sieht es anders aus”)
• 6. ganz am Ende sei erwähnt, dass sich eine Menge Geeks und Nerds viel Arbeit mit den Standards machen. Für ein besseres Web.

Bleibt noch anzufügen, dass der Schritt von Transitional auf Strict-Doctypes jedem Anfänger angeraten ist. Denn viele “Unsinnigkeiten” die die Validatoren bei Transitional-Dokumenten noch durchgehen lassen werden erst in Strict-Dokumenten mokkiert. Wer html Lernen will, kann es auch gleich richtig machen. Im Artikel Transitional vs. Strict Markup erläutert Roger Johansson die Unterschiede. Ich sehe es inzwischen ähnlich: die Wahl des Strict-Doctypes beschert dem Internet einen noch größeren Fortschritt als es XHTML tut. Was nicht heißen soll, dass XHTML nicht wünschenswert ist, aber mit XHTML Transitional hat man nichts gekonnt… und wie die Browser mit XHTML 1.1 umgehen ist bekannt. Zum Thema XHTML 1.1 empfehle ich auch diese Diskussion in den Kommentaren des Artikels zum IE7 und den Artikel “Schlüssige Argumente für XHTML” von Schneegans.de der die Thematik sehr detailliert (und amüsant) unter die Lupe nimmt. (und ganz nebenbei mein Slatystain-Wordpress-Theme als Werk eines Wannabe’s entlarvt ;-)

Im Weblog von napyfab will die WM-Feierlaune nicht vorüber gehen. Nagut, als Italiener hat er ja auch allen Grund dazu … (wann hat schonmal ein Zweitliga-Team den Titel geholt? :D) … neben dem bereits erwähnten Livesuche-Tutorial bin ich in dem Blog, neben allen Fanwimpeln und WM-Fotos, aber auch noch auf ein Skript aufmerksam geworden: Reflections.js versieht Bilder mit einem durchaus hochglänzendem Spiegelungseffekt. Sehr edel das. (auch eine Beispiel-Seite und eine Live-Demo gibts es).
Einziger Wermutstropfen ist, dass im Opera 8.x weder das Originalbild noch die Spiegelung zu sehen ist. Im Opera 9 solls aber funktionieren. Dass der Effekt aber auch in älteren Versionen sauber herunterstuft wäre für mich allerdings schon ein Muss.

Muss es immer gleich Javascript sein?

Nicht bei jedem Bild sieht sowas gut aus, und ist schnell mal “too much” oder “overdozed”…
Aber auch ohne Javascript lässt sich Bildern und Vorschaubildern ein wenig Effektleben und Glanz verpassen: mit CSS.

Ein wenig opacity gefällig?

Bevor es an den Glanz geht müssen wir uns mit “opacity” beschäftigen: Was lässt sich mit opacity anstellen? Opazität, die Eigenschaft durchscheinend zu sein, ist das Gegenteil von Transparenz. Wir erhöhen also die Transparenz indem man die Opazität herabsetzt: img {opacity:0.75;} (das Bild erscheint opak, es wird somit transparent).
Das ist zwar CSS3 (d.h. jeder CSS-Validator schlägt bei der Verwendung dieser Eigenschaft Alarm), das sollte einen aber nicht davon abhalten es zu verwenden. Leider wars das jetzt auch schon mit der einfachen CSS-Theorie. Wie so oft sieht es in der Praxis, Dank der vielen verschiedenen Süppchen, die die Browser-Hersteller kochen, etwas diffizieler aus.

Beispielseite 1:

Hovereffekt mit opacity

Nach meinem Wissen, gibt es aber in allen Browsern (Opera nur mit Umwegen - dazu später mehr) bis auf das Auslaufmodell “Internet Explorer/Mac”, einen Weg Transparenzen für Bilder umzusetzen.

Auf der Beispielseite kann man sich selbst ein Bild machen: Thumbnail-Galerie mit und ohne opacity-Hovereffekten.

Probleme mit den meisten Browsern lassen sich beheben: Damit es in allen Browsern klappt muss man leider zu proprietären Mitteln greifen:

1. Gecko-Browser (Firefox/Mozilla/Flock/Netscape/K-Meleon/etc.):
   konnten bis Ende letzten Jahres nichts mit opacity anfangen. Das proprietäre -moz-opacity erfüllte bis dato aber den gleichen Zweck. Inzwischen (bitte nicht nach der genauen Gecko-Version fragen) sind Firefox & Co. aber auf opacity gut zu sprechen, trotzdem sollte man auf -moz-opacity noch nicht verzichten - für ältere Versionen dieser Browser.
2. Internet Explorer 6/Win:
   opacity kennt er nicht, nutzt aber eine hauseigene Alpha-Blending Variante: filter:alpha(opacity=50);
3. Opera:
   Für den Opera Browser muss man sich etwas anderes einfallen lassen: hier braucht man ein angepaßtes bzw. erweitertes Markup, man muss also seinen html-Code anpassen. Dazu mehr in einem späteren Artikel.
4. Safari:
   hat keine Probleme mit opacity, die Version 1.1 soll aber auf -khtml-opacity bestehen.
5. Internet Explorer/Mac: stellt das nach meinem Wissen nicht dar. Hier wird aber ebenfalls der Workaround für Opera greifen. Beim IE/Mac zu beachten: Alpha-Transparenzen werden nur dann richtig dargestellt wenn background-repeat auf none gesetzt ist.

Am Ende käme also eine CSS-Regel heraus, die in etwa so aussieht:
img.opaque {
opacity:0.75;
filter:alpha(opacity=75);
moz-opacity:0.75;
-khtml-opacity:.75;
 }

Weil jede der einzelnen Regeln den selben Zweck - nur halt in unterschiedlichen Browsern - erfüllen soll, kann man das auch so einbinden, dass selbst der CSS-Validator zufrieden ist.

CSS:
<style type="text/css" media="screen">
a img.opaque {opacity: .75;}
a:hover img.opaque {opacity: .99;}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
a img.opaque {filter:alpha(opacity=75);}
a:hover img.opaque {filter:alpha(opacity=100);}
</style><![endif]-->

Javascript:
if ((navigator.appName.indexOf('Netscape')+1)) {
document.write('<style type="text/css" media="screen">
a img.opaque { -moz-opacity: .5;}
a:hover img.opaque {-moz-opacity: .999;}
</style>');
}
Zur Erklärung: In der ersten <style>-Angabe legen wir fest, was alle Browser können sollten, bzw. es früher oder später wohl auch interpretieren werden: Standard-konformes CSS. Darauf folgt ein Conditional Comment, welches lediglich der Internet Explorer interpretiert (das ist zwar gegen den eigentlichen Sinn eines html-Kommentars - schließlich ist ein Kommentar für Notizen da und nicht um auszuführenden Code zu beherbergen - aber wer sich mal etwas mit Webdesign und insbesondere dem IE beschäftigt hat, weiss, dass es nur selten mit Logik zugeht). Die erste Zeile des Kommentars besagt, dass nur Versionen des IE kleiner Version 7 den Kommentar verarbeiten sollen. Dann kommt der erwähnte Alpha-Blending-Filter und wir schließen das Kommentar schnell wieder, ohne weiter darüber nachzudenken… Anstelle der <style>-Elemente kann man natürlich auch auf externe CSS-Dateien ver<link>en.
Das Javascript macht nichts anderes, als für Gecko-Browser ein weiteres <style>-Element in das Dokument zu schreiben, ohne aber unser Stylesheet beim Validator-Test durchrasseln zu lassen. Reine Kosmetik für CSS-Fetischisten also… ;)

HeY! Wo bleibt der Glanz?

Von der Opacity zum Glanz ist es jetzt nur noch ein kleiner Schritt. Bei den transparent gemachten Bildern scheint die Hintergrundfarbe durch. Auch wenn dieser Hovereffekt schonmal ganz nett aussieht, hab ich mir überlegt, wie man dem blassen Aussehen und dem Sättigungsverlust entgegenwirken kann. Herausgekommen ist ein Hintergrundbild welches man dem Link zuweist. Je nach aktueller Transparenz überlagert das eigentliche Bild dieses Hintergrundbild unterschiedlich stark - mit dem Effekt, dass ein leichtes glänzen durchschimmert.
. Am besten eignet sich der Effekt wohl für Thumbnail-Ansichten in Bildergalerien, wo man sich natürlich entsprechend der Thumbnailgröße oder dem gewünschten Effekt ein eigenes Hintergrundbild für die transparenten Thumbnails getsalten wird.
Mit der Zeile a {background:url(thumb-bg.jpg) no-repeat 50% 50%;} weist man das Bild dem Link zu … fertig!

Beispielseite 2:

Hovereffekt mit opacity und Hintergrundbild

getestet mit folgenden Browsern:

• Opera nicht ohne Markup-Trickserei zu realisieren (mehr dazu später in einem eigenen Artikel)
• Internet Explorer/Mac mir kein Weg bekannt
• Internet Explorer 6 mit Active X Transition-Filtern machbar
• Netscape Navigator (den übrigens kein Mensch braucht) ohne Probleme
• Firefox ohne Probleme
• Flock ebenfalls ohne Probleme
• K-Meleon ebenfalls ohne Probleme
• Safari ohne Probleme

beide Techniken zusammen

Um dem ganzen jetzt noch die funkelnde Glossy-overdose-Krone aufzusetzen: kombinieren wir doch mal beide Techniken miteinander…

Ausblick, Alternativen, Ideen und weiterführender Lesestoff zum Thema

Mit ein wenig CSS-rumgepfriemel und einem Hintergrundbild lassen sich also Bilder oder Thumbnail-Seiten in den meisten Browsern mit einem Glanzeffekt versehen.
Leider ist die opacity-Eigenschaft nur mit viel Detailarbeit und proprietärem Gedöns “Cross-Browser-” und “Plattform-übergreifend” zu nutzen.
Nachteile: Der Sättigungsverlust, die leichte Verfärbung der Bilder ist mit zunehmender Transparenz deutlich zu erkennen und nicht immer schön anzusehen.
Vorteile: Wie auch bei der Javascript-Geschichte mit dem Reflections.js, belässt man die Bilder in unverändertem Originalzustand und bleibt somit flexibel. Wenn man diese Effekte nun kombiniert hat man eine Unmenge an Gestaltungsmöglichkeiten. Man denke nur an Prototype oder moo.fx …