Über CSS
CSS sind s.g. Stilvorlagen mit denen das Aussehen einer HTML-Seite gestaltet werden kann. Mit der Einführung durch das W3C im Jahr 1998 wurde die Trennung von Inhalt und Design vollzogen. Das HTML-Document enthält nur den Inhalt (Text, Links usw.), Aussehen (Text- und Hintergrundfarben uvm.) sowie eventuelle Funktionalitäten werden mit Formatklassen in der Stilvorlage festgelegt. Das erklärt auch, warum Seiten die so aufgebaut sind, für Suchmaschinen eine grössere Attraktivität besitzen, da sie auf das Verarbeiten von Text und somit Inhalt spezialisiert sind. Obwohl bei der Gestaltung von Webseiten, aufgrund gravierender Nachteile Verlängerte Ladezeiten,
unattraktiv für Suchmaschinen,
schlecht zu pflegen!, auf Tabellen Tabellen sollen für die Darstellung von tabellarischem Inhalt verwendet werden und nicht zum Seitenlayout!
W3C verzichtet werden soll, erstaunt es immer wieder wie viele Webseiten auch heute noch mit Tabellen gestaltet und verkauft werden. Ein auf CSS aufgebautes Design ist deutlich flexibler.
Apps's für ihre Webseite
Diese 'Site' wurde ins Leben gerufen, um die Fähigkeiten von CSS zu demonstrieren und zu verbreiten.
Auf CssApps finden sie fertige Lösungen für viele Probleme, die bei der Gestaltung von Webseiten auftauchen. Das Angebot umfasst Beispiele aus den Bereichen CSS-Navigation, CSS-Fotogalerien, CSS-Layout's und verschiedenen anderen Stilvorlagen, die in keine der vorgenannten Kategorien einzuordenen sind.
Alle hier vorgestellten App's bauen auf den vom W3C definierten Standard, CSS2.1 bzw. CSS3. Lezteres ist zwar in einigen Bereichen noch kein offizieller Standard, wird aber von den meisten aktuellen Browsern auf breiter Front unterstüzt.
Viele der hier angebotenen Lösungen wurden und werden noch heutet mit Java-Script Programme die auf ihrem Browser ausgeführt werden. Wird auch missbräuchlich genutzt! bzw. Flash Ist eine Erweiterung in ihrem Browser der Fa. Macromediea© bzw. Adobe©. Legt s.g. Supercookies an, die ihre Privatsphäre kompromittieren können! umgesetzt. Beide Ansätze führen immer wieder zu erheblichen Sicherheitsrisiken, verhindern eine barrierefreie Webseitengestaltung und sind deshalb hier nicht anzutreffen.
Die hier angebotenen App's unterliegen der Creatives Commons Lizenz und sind auf ihren privaten Webseiten kostenlos einsetzbar. Ein Link auf diese Seite ist in jedem Fall erwünscht und ist auch sonst immer willkommen. Die Nutzung auf kommerziellen Webseiten bedarf unbedingt der Zustimmung des Autors!
App kopieren
Die APP's sind im Quelltext der Seiten einseh- und kopierbar. Zum einen im head-Bereich zwischen <style> und </style> sowie im body-Bereich zwischen 'App-Start' und 'App-End'. Dem halbwegs mit CSS vertrauten Nutzer sollte es damit leicht fallen die Stilvorlagen auf seiner Webseite zu integrieren. Ein genaue Anleitung finden Sie auch hier.
Sollten sie Schwierigkeiten haben oder ihnen eine Anpassung zu aufwendig erscheinen, biete ich ihnen meine Dienstleistung zu akzeptablen Preisen an. Nehmen sie in einem solchen Fall Kontakt mit mir auf.
Browser und Standardkonformität
Alle hier vorgestellten Beispiele wurden strikt nach den geltenden bzw. aktuell gültigen Normen CSS2.1 / CSS3 erstellt. Proprietäre Insbesondere beim IE hat man immer wieder versucht eigene, nicht standardkonforme Formatanweisungen einzuführen. Formatierungen und somit nicht dem Standard entsprechend, kommen hier nicht zum Einsatz. Alle Apps wurden mit aktuellen Versionen der Browser -Firefox-, -Chrome-, -Opera-, -Safari-, und dem -IE- getestet. Obwohl man beim grössten Softwareverkäufer der Welt inzwischen erkannt hat, das man verlorene Marktanteile ihres Browsers nur mit besserer Untertüzung der geltenden Standards zurückerobern kann, zeigt der IE als einziger immer noch die eine oder andere Schwäche .
- Fotogalerie für Mobilgerätemit Vollbildanzeige
- Navigation für Mobilgerätevertikale Ausrichtung
- CSS3 Fotogaleriemit rechts/links Navigation
- CSS3 Fotogaleriemit Rollover-Effekt
- ParallaxenAnimation mit Hintergrund
- CSS3 BildergalerieVollbildshow für alle Bildformate
- CSS3 Fotogaleriemit 'fliegenden' Fotos
- CSS3 Bildergaleriemit prismatischem Bildübergang
- CSS3 Fotogaleriemit radialem Bildwechsel
- CSS3 Fotogalerie Imit dynamischer Formatanpassung
- CSS3 Diashowmit CSS3-Keyframes
- Dreiseitiger Flyerpräsentiert eine Speisekarte
- CSS3 Animationeiner Drahtseilbahn
- Info-Akkordeonfür eine mehrseitige Präsentation
- Kompaktmenüist sehr dezent
- Responsive Layoutpasst sich jeder Fenstergrösse an
Firefox 47.63%
Chrome 30.80%
Opera 0.23%
Safari 10.00%
IE 3.07%
Mobile 0.53%
sonstige 7.73%