Lisardo: Ressourcen zu CSS und HTML2010-08-08T13:26:44ZCopyright (c) 2010, PeterExpressionEnginetag:lisardo.de,2010:08:08Testumgebungen für CSS3tag:lisardo.de,2010:Ressourcen/6.9282010-08-08T12:20:15Z2010-08-08T12:20:15ZPeterJens Grochtdreis beschreibt hier einige Tools für CSS3, die sowohl als Testumgebung wie als CSS3-Generatoren eingesetzt werden können: CSS3, Please. The Cross-Browser CSS3 Rule Generator, CSS gradient generator von display:inline, border radius und CSS3-Playground by Mike Plate. Seite jetzt besuchen =>
]]>Schatten css only - Crossbrowsertag:lisardo.de,2010:Ressourcen/6.9272010-08-07T13:22:43Z2010-08-07T13:22:43ZPeterSchatten um Objekte, nur mit CSS und auch in den Internet Explorern. Ein Beispiel für eine Kombination von CSS3-, Mozilla- und webkit-Syntax, kombiniert mit den IE-Filtern. Seite jetzt besuchen =>
]]>Lösungen für Tooltippstag:lisardo.de,2009:Ressourcen/6.9042009-12-01T20:00:48Z2009-12-01T20:00:48ZPeterHenry Jones stellt hier 11 verschiedene Lösungen für Tooltipps auf Webseiten vor: für jQuery, MooTools und reinem CSS. Seite jetzt besuchen =>
]]>Freies CSS Drop-Down Menu Frameworktag:lisardo.de,2009:Ressourcen/6.8592009-03-23T21:19:41Z2009-03-23T21:19:41ZPeterEin Framework für DropDown-CSS-Menüs, funktional in allen gängigen Browsern mit minimalem Einsatz von JavaScript, ausschließlich für IE 5 und 6. Lizenziert unter der GNU General Public License. Seite jetzt besuchen =>
]]>hasLayout - Definition, Probleme und Tippstag:lisardo.de,2008:Ressourcen/6.8322008-08-26T15:00:16Z2008-08-26T15:00:16ZPeter»hasLayout« ist ein eigenwilliges Konstrukt im Internet Explorer – und die Ursache für zahllose Browserbugs. Das Verständnis dieser Besonderheit der Internet Explorer erleichtert die CSS-Arbeit erheblich. Hier ist das englischsprachige Original zu finden und hier die deutsche Übersetzung. Seite jetzt besuchen =>
]]>Safari CSS Referencetag:lisardo.de,2008:Ressourcen/6.8132008-08-17T12:16:43Z2008-08-17T12:16:43ZPeterEine Referenz der CSS-Anweisungen, die Safar (bzw. Webkit) versteht. Enthält auch die experimentellen CSS-3-Eigenschaften. Seite jetzt besuchen =>
]]>CSS3 Eigenschaften für Webkit-Browser, einschließlich iPhonetag:lisardo.de,2008:Ressourcen/6.8112008-08-17T12:05:16Z2008-08-17T12:05:16ZPeterEs gibt doch einige Unterschiede zwischen Safari für den Desktop und das iPhone. John Allsop hat einige getestet und sie sauber in einer Gegenüberstellung aufgelistet. Seite jetzt besuchen =>
]]>Schöne Formulare in XHTML+CSStag:lisardo.de,2008:Ressourcen/6.7992008-05-21T15:01:52Z2008-05-21T15:01:52ZPeterEin barrierefreies Formular mit Accesskeys, mit einer leicht verständlichen, deutschsprachigen Anleitung. Interessant ist auch die Diskussion in den zahlreichen Kommentaren, die auf Besonderheiten in verschiedenen Browsern eingeht. Seite jetzt besuchen =>
]]>Prettier Accessible Formstag:lisardo.de,2008:Ressourcen/6.7982008-05-21T14:53:59Z2008-05-21T14:53:59ZPeterNick Rigby erläutert bei »A LIST apart« eine weitere Methode, schöne und gleichzeitig barrierefreie Formulare zu erstellen. Das Besondere an seinem Ansatz ist die CSS-Anweisung display: inline-block;, mit dessen Hilfe er dem <label>-Attribut eine feste Breite zuweisen kann. Damit vermeidet er den Einsatz von floatenden Elementen. Vorteil: auch die IE unterstützen diese Technik. Nachteil: diesmal fallen die Mozilla-Browser raus (incl. Firefox). Um Firefox doch zu unterstützen setzt er den proprietären Tag -moz-inline-box ein, kombiniert mit einem doch recht aufwändigen JavaScript. Ich halte diesen Ansatz zwar für sehr interessant, aber auch für reichlich aufwändig. Seite jetzt besuchen =>
]]>Dropdown- und Flyoutmenüs mit CSS und JavaScripttag:lisardo.de,2008:Ressourcen/6.6622008-03-14T09:52:20Z2008-03-14T09:52:20ZPeterEs gibt mittlerweile eine Reihe von Dropdown- und Flyout-Menüs, die mit mehr oder weniger JavaScript auskommen. Basis ist im wesentlichen das Pulldownmenü von Eric Meyer, das mit reinem CSS auskommt und kein JavaScript benötigt, allerdings auch nur in modernen Browsern funktioniert, die ausreichend CSS2 unterstützen – also nicht im Internet Explorer. Patrick Griffiths und Dan Web entwickelten in Ihrem Artikel »Sun of Suckerfish Dropdowns« diesen Ansatz weiter und ergänzten ihn um um ein kleines JavaScript, das die fehlende Funktionalität in den Internet Explorern ab Vs. 5 bereit stellt. Christian Heilmann baut diesen Ansatz noch einmal weiter aus und stellt mit »YADM – Yet another dynamic menu« kleines Framework für Pulldownmenüs zur Verfügung. Eine weitere Variante von Suckerfish ist bei solarDreamStudios zu finden.
Die umfangreichste Sammlung an Menüs (Dropdown oder Flyout) ist zweifellos bei Stu Nichols auf CSSplay zu finden. Er hat es mittlerweile geschafft, diese Menüs nur mit Hilfe von CSS auch im Internet Explorer 6 zum Laufen zu bringen (mit trickreichen Conditional Comments, die das Menü in Tabellen packen). Zusätzlich bietet er auch Varianten mit kurzen JavaScripts an, allerdings auf einer eigenen Seite.
Achtung: die Menüs von Stu Nichols sind nur für den nicht kommerziellen Einsatz frei; eine Verwendung in kommerziellen Projekten erfordert eine schriftliche Zustimmung und eine Spende.
(14.3.2008) Seite jetzt besuchen =>
]]>sIFR3: Dynamische Schriftersetzung auf Webseiten mit Flashtag:lisardo.de,2008:Ressourcen/6.7662008-02-24T17:50:29Z2008-02-24T17:50:29ZPetersIFR3 ist eine Bibliothek aus JavaScripts, mit deren Hilfe auf Webseiten Text in beliebigen Tags oder CSS-Containern durch Flashfilme ersetzt werden kann. Dadurch ist eine typografisch einwandfreie Darstellung von beliebigen Schriften möglich. Im Gegensatz zu anderen Schriftersetzungstechniken ist sIFR3 suchmaschinenfreundlich, auch in CMS-Systemen einfach zu implementieren, flexibel und sogar halbwegs barrierefrei. Die Technik hat allerdings auch einige Nachteile; eine genauere Diskussion finden Sie in diesem Artikel, ein Beispiel hier. Seite jetzt besuchen =>
]]>Zen Gardentag:lisardo.de,2008:Ressourcen/6.7642008-02-22T19:12:28Z2008-02-22T19:12:28ZPeterMehr als 200 unterschiedlich gestaltete Varianten einer einzigen HTML-Seite. Die Herausforderung für alle Webdesigner: das HTML darf/kann nicht verändert werden, einzige Gestaltungsmöglichkeit sind eigene Cascading Style Sheets. Ein einzigartiges CSS-Archiv. Seite jetzt besuchen =>
]]>Typografie im Internettag:lisardo.de,2008:Ressourcen/6.7632008-02-22T18:23:16Z2008-02-22T18:23:16ZPeterEine schön gestaltete Einführung in Typografie von Matthias Kammerer mit Schwerpunkt auf der Anwendung im Internet. Themen sind Schriftauszeichnungen, Anführungszeichen und typische Fehler bei der Anwendung. Seite jetzt besuchen =>
]]>Typografie auf Webseitentag:lisardo.de,2008:Ressourcen/6.7622008-02-22T18:20:14Z2008-02-22T18:20:14ZPeterMichael Jendryscheck fasst ein seinem Artikel eine Vielzahl von Imformationen zum Thema Typografie im Web zusammen: korrekte Umsetzung von Leerzeichen, Abständen, Strichen, Anführungszeichen, Apostroph, Zahlen und Währungszeichen, mathematische Symbole und Formeln. Seite jetzt besuchen =>
]]>CSS-Stile für Paginierungentag:lisardo.de,2007:Ressourcen/6.6992007-07-05T19:56:51Z2007-07-05T19:56:51ZPeterEine Sammlung von 17 verschiedenen CSS-Stilen für Seitenzahlen bzw. Paginierung von Webseiten. Seite jetzt besuchen =>
]]>HTML Entity Character Lookuptag:lisardo.de,2007:Ressourcen/6.6982007-07-05T19:46:07Z2007-07-05T19:46:07ZPeterHier können Sie für Sonderzeichen sehr bequem die passenden Entities suchen: in das Suchfeld einfach das gewünschte Zeichen eingeben und sofort erscheinen (via AJAX) die passenden Entities. Sehr praktisch. Für Mac-Anwender bietet leftlogic auch ein Dashboard Widget zum Download. (via pixelgraphix - dort sind in den Kommentaren noch weitere Tools für Mac-Anwender zu finden. ) Seite jetzt besuchen =>
]]>Mikroformatetag:lisardo.de,2007:Ressourcen/6.6522007-03-07T18:55:25Z2007-03-07T18:55:25ZPeterBei Einfach für Alle findet man eine kleine Linksammlung zum Thema Mikroformate. Unter anderem ein mehrteiliges Tutorial von Stefan Münz (dem Gründer von SelfHTML), einen Generator für vCard/hCard sowie eine Werkzeugsammlung, mit deren Hilfe man sich die Erstellung von Mikroformaten erleichtern kann. Eine kurze Einführung gibts meinem Artikel »Microformats schwer im Trend«. Seite jetzt besuchen =>
]]>Formularelemente mit CSS gestaltentag:lisardo.de,2007:Ressourcen/6.6292007-01-11T15:33:08Z2007-01-11T15:33:08ZPeterRoger Johansson gibt einen umfassenden Überblick über die Gestaltung von einzelnen Formularelementen mit CSS – sehr wertvoll sind vor allem die zahllosen Screenshots, die acht Browser auf Mac und Windows direkt miteinander vergleichen (via F-LOG-GE) Seite jetzt besuchen =>
]]>Drucken von Webseitentag:lisardo.de,2006:Ressourcen/6.6252006-12-02T21:24:10Z2006-12-02T21:24:10ZPeterEine knappe Übersicht über gängige Methoden, den Ausdruck von Webseiten zu optimieren und für den Anwender bequemer zu gestalten von Björn Seibert auf markup. Auch die Kommentare zum Artikel sind interessant. Seite jetzt besuchen =>
]]>Moderne Formulargestaltungtag:lisardo.de,2006:Ressourcen/6.6222006-12-02T19:47:06Z2006-12-02T19:47:06ZPeterIm Dr. Weblog beschäftigt sich Vitaly Friedmann mit »Formulare und Umfragen: Moderne Lösungen« und präsentiert Formulare in modernem, schönen Gewand. Seite jetzt besuchen =>
]]>
Jens Grochtdreis beschreibt hier einige Tools für CSS3, die sowohl als Testumgebung wie als CSS3-Generatoren eingesetzt werden können: CSS3, Please. The Cross-Browser CSS3 Rule Generator, CSS gradient generator von display:inline, border radius und CSS3-Playground by Mike Plate. Seite jetzt besuchen =>
]]>
Schatten um Objekte, nur mit CSS und auch in den Internet Explorern. Ein Beispiel für eine Kombination von CSS3-, Mozilla- und webkit-Syntax, kombiniert mit den IE-Filtern. Seite jetzt besuchen =>
]]>
Henry Jones stellt hier 11 verschiedene Lösungen für Tooltipps auf Webseiten vor: für jQuery, MooTools und reinem CSS. Seite jetzt besuchen =>
]]>
Ein Framework für DropDown-CSS-Menüs, funktional in allen gängigen Browsern mit minimalem Einsatz von JavaScript, ausschließlich für IE 5 und 6. Lizenziert unter der GNU General Public License. Seite jetzt besuchen =>
]]>
»hasLayout« ist ein eigenwilliges Konstrukt im Internet Explorer – und die Ursache für zahllose Browserbugs. Das Verständnis dieser Besonderheit der Internet Explorer erleichtert die CSS-Arbeit erheblich. Hier ist das englischsprachige Original zu finden und hier die deutsche Übersetzung. Seite jetzt besuchen =>
]]>
Eine Referenz der CSS-Anweisungen, die Safar (bzw. Webkit) versteht. Enthält auch die experimentellen CSS-3-Eigenschaften. Seite jetzt besuchen =>
]]>
Es gibt doch einige Unterschiede zwischen Safari für den Desktop und das iPhone. John Allsop hat einige getestet und sie sauber in einer Gegenüberstellung aufgelistet. Seite jetzt besuchen =>
]]>
Ein barrierefreies Formular mit Accesskeys, mit einer leicht verständlichen, deutschsprachigen Anleitung. Interessant ist auch die Diskussion in den zahlreichen Kommentaren, die auf Besonderheiten in verschiedenen Browsern eingeht. Seite jetzt besuchen =>
]]>
Nick Rigby erläutert bei »A LIST apart« eine weitere Methode, schöne und gleichzeitig barrierefreie Formulare zu erstellen. Das Besondere an seinem Ansatz ist die CSS-Anweisung 
Es gibt mittlerweile eine Reihe von Dropdown- und Flyout-Menüs, die mit mehr oder weniger JavaScript auskommen. Basis ist im wesentlichen das Pulldownmenü von Eric Meyer, das mit reinem CSS auskommt und kein JavaScript benötigt, allerdings auch nur in modernen Browsern funktioniert, die ausreichend CSS2 unterstützen – also nicht im Internet Explorer. Patrick Griffiths und Dan Web entwickelten in Ihrem Artikel »Sun of Suckerfish Dropdowns« diesen Ansatz weiter und ergänzten ihn um um ein kleines JavaScript, das die fehlende Funktionalität in den Internet Explorern ab Vs. 5 bereit stellt. Christian Heilmann baut diesen Ansatz noch einmal weiter aus und stellt mit »YADM – Yet another dynamic menu« kleines Framework für Pulldownmenüs zur Verfügung. Eine weitere Variante von Suckerfish ist bei solarDreamStudios zu finden.
sIFR3 ist eine Bibliothek aus JavaScripts, mit deren Hilfe auf Webseiten Text in beliebigen Tags oder CSS-Containern durch Flashfilme ersetzt werden kann. Dadurch ist eine typografisch einwandfreie Darstellung von beliebigen Schriften möglich. Im Gegensatz zu anderen Schriftersetzungstechniken ist sIFR3 suchmaschinenfreundlich, auch in CMS-Systemen einfach zu implementieren, flexibel und sogar halbwegs barrierefrei. Die Technik hat allerdings auch einige Nachteile; eine genauere Diskussion finden Sie in diesem Artikel, ein Beispiel hier. Seite jetzt besuchen =>
]]>
Mehr als 200 unterschiedlich gestaltete Varianten einer einzigen HTML-Seite. Die Herausforderung für alle Webdesigner: das HTML darf/kann nicht verändert werden, einzige Gestaltungsmöglichkeit sind eigene Cascading Style Sheets. Ein einzigartiges CSS-Archiv. Seite jetzt besuchen =>
]]>
Eine schön gestaltete Einführung in Typografie von Matthias Kammerer mit Schwerpunkt auf der Anwendung im Internet. Themen sind Schriftauszeichnungen, Anführungszeichen und typische Fehler bei der Anwendung. Seite jetzt besuchen =>
]]>
Michael Jendryscheck fasst ein seinem Artikel eine Vielzahl von Imformationen zum Thema Typografie im Web zusammen: korrekte Umsetzung von Leerzeichen, Abständen, Strichen, Anführungszeichen, Apostroph, Zahlen und Währungszeichen, mathematische Symbole und Formeln. Seite jetzt besuchen =>
]]>
Eine Sammlung von 17 verschiedenen CSS-Stilen für Seitenzahlen bzw. Paginierung von Webseiten. Seite jetzt besuchen =>
]]>
Hier können Sie für Sonderzeichen sehr bequem die passenden Entities suchen: in das Suchfeld einfach das gewünschte Zeichen eingeben und sofort erscheinen (via AJAX) die passenden Entities. Sehr praktisch. Für Mac-Anwender bietet leftlogic auch ein Dashboard Widget zum Download. (via pixelgraphix - dort sind in den Kommentaren noch weitere Tools für Mac-Anwender zu finden. ) Seite jetzt besuchen =>
]]>
Bei Einfach für Alle findet man eine kleine Linksammlung zum Thema Mikroformate. Unter anderem ein mehrteiliges Tutorial von Stefan Münz (dem Gründer von SelfHTML), einen Generator für vCard/hCard sowie eine Werkzeugsammlung, mit deren Hilfe man sich die Erstellung von Mikroformaten erleichtern kann. Eine kurze Einführung gibts meinem Artikel »Microformats schwer im Trend«. Seite jetzt besuchen =>
]]>
Roger Johansson gibt einen umfassenden Überblick über die Gestaltung von einzelnen Formularelementen mit CSS – sehr wertvoll sind vor allem die zahllosen Screenshots, die acht Browser auf Mac und Windows direkt miteinander vergleichen (via F-LOG-GE) Seite jetzt besuchen =>
]]>
Eine knappe Übersicht über gängige Methoden, den Ausdruck von Webseiten zu optimieren und für den Anwender bequemer zu gestalten von Björn Seibert auf markup. Auch die Kommentare zum Artikel sind interessant. Seite jetzt besuchen =>
]]>
Im Dr. Weblog beschäftigt sich Vitaly Friedmann mit »Formulare und Umfragen: Moderne Lösungen« und präsentiert Formulare in modernem, schönen Gewand. Seite jetzt besuchen =>
]]>