Sitemap

• HomeStartseite
• NewsWas gibt's Neues auf michaelsinterface.de?
• LabExperimente mit CSS und Javascript.
  • CSS
    • css.dropdownTabmenuEin CSS-Dropdown-Menü, das in seinen Tabs jeweils eine Liste an Untermenüs beherbergt.
    • horizontal.scrollBoxEine CSS-Box, deren Inhalt horizontal scrollfähig ist.
    • css.menuTooltipIn diesem Experiment wird beim Überfahren der einzelnen Menüpunkte ein "Hinweisfenster" eingeblendet, in dem zusätzliche Informationen notiert werden können.
    • css.hoverSelectorsDieses Experiment demonstriert beim Überfahren der Eltern- bzw. Nachbarbox das Hover-Verhalten für ihr Nachfahren-, Kind- und Nachbarelement, sowie das Öffnen dieser Elemente als CSS-Popups.
    • 2column.listEine einfache (nicht-verschachtelte) Aufzählungsliste, deren Listeneinträge zweispaltig angeordnet sind.
    • list.showcasesEine horizontal ausgerichtete Liste, deren Listenpunkte hier als "Schaukasten" für besonders hervorzuhebende Informationen dienen.
    • css.tabmenuEin horizontales CSS-Tabmenü in diversen Farb-Variationen.
    • css.fieldsetDieses CSS-Modell "simuliert" das <fieldset>- und <legend>-Tag, die zum Gruppieren von Formularelementen dienen.
    • png.opacityEine Box mit semitransparentem PNG-Hintergrundbild - incl. Workaround für den IE6, der das PNG-Format nicht unterstützt.
    • 3cols.equalHeightEin dreispaltiges CSS-Layout, dessen Spaltenhöhen sich unabhängig von ihrem Inhalt im Viewport automatisch angleichen.
      • 3cols.equalHeight | basicDreispaltiges Basismodell.
      • 3cols.equalHeight | headerDreispaltig mit Headerbereich.
      • 3cols.equalHeight | header + footerDreispaltig mit Header-, und Footerbereich.
      • 3cols.equalHeight | header + topNavi + footerDreispaltig mit Header-, TopNavi- und Footerbereich.
    • css.layoutHier stelle ich diverse Positions- und Float-Techniken für tabellenlose CSS-Layouts vor.
      • css.layout | position.01
      • css.layout | position.02
      • css.layout | position.03
      • css.layout | position.04
      • css.layout | position.05
      • css.layout | position.06
      • css.layout | position.07
      • css.layout | position.08
      • css.layout | position.09
      • css.layout | float.01
      • css.layout | float.02
      • css.layout | float.03
      • css.layout | float.04
      • css.layout | float.05
      • css.layout | float.06
      • css.layout | float.07
      • css.layout | float.08
      • css.layout | float.09
    • css.displayDieses Modell empfindet ein kleines Interface-Display mit Control-Buttons nach, und war mein Beitrag zum "css2k2-Challenge".
    • css.barcodeEin "handelsüblicher" Barcode, der auf purem CSS basiert, und keinerlei Grafiken enthält.
  • JavaScript
    • link.innerHTMLDer Inhalt einer Box wird ein- bzw. ausgeblendet, und entsprechend des Status der Linktext getauscht.
    • swap.imageCommentDie Bildergalerie wurde um eine Funktion erweitert, die das Anlegen von Kommentaren zu den einzelnen Bildern ermöglicht, die analog zum Bildertausch eingeblendet werden.
    • swap.imageEine kleine simple Bildergalerie, bei der beim Klick auf die Thumbnails in einer "ImageBox" die größeren Bilder getauscht werden.
• TutorialsKommentierte Anleitungen zu diversen CSS- und JS-Anwendungen.
  • CSS
    • css.documentationIn dieser CSS-Referenz habe ich die gängigen CSS2-Eigenschaften zusammengefasst, und stelle sie anhand von Quellcode-Beispielen und Online-Demos näher vor.
    • exchange.classNameDieses Anwendungsbeispiel ist vor Jahren aus dem Umstand erkoren, da der IE6 (und älter) die allg. :hover-Pseudoklasse nicht unterstützt, um für Elemente beim Überfahren mit der Maus ein dynamisches Verhalten zu definieren.
    • image.bgColorDie CSS-Eigenschaft 'background-color' steuert (füllt) in diesem Demo die transparente Palettenfarbe einer GIF- oder PNG-Grafik, und wird beim Überfahren der Grafik getauscht.
    • image.opacityDie CSS3-Eigenschaft 'opacity' steuert die Transparenz von Elementen, und wird in diesem Tutorial auf Grafiken angewendet, die beim Überfahren mit der Maus ihre Transparenz verändern.
    • menu.buttonsEine kurze Einführung, wie sich Links zu Menübuttons gestalten lassen.
    • scroll.tableWie wäre es mit einer Tabellenzelle, deren Inhalt gescrollt werden kann?
      • scroll.table.v2
      • scroll.table.v3
      • mp3.playlist
  • JavaScript
    • blur.linksEs gibt Situationen, in denen der gepunktete Rahmen beim Anklicken eines Links oder Formular-Buttons nicht erwünscht ist. Das Tutorial stellt hierfür eine Lösung vor, die auf JS basiert.
    • exchange.displayDieses Tutorial beschäftigt sich mit dem Ein- und Ausblenden von HTML-Elemnten mittels der CSS-Eigenschaft 'display' und ihren beiden Eigenschaftswerten 'block' und 'none'.
    • move.layer
      • horizontalDIV-Box horizontal bewegen.
      • verticalDIV-Box vertikal bewegen.
    • show.hideDIV-Box anzeigen und verstecken.
• ResourcesWeiterführende Links rund um HTML, CSS & JS.
• SitemapInhaltsverzeichnis des Webprojekts
• ContactKontakt-Formular