narjesia
   Startseite
...außerdem hier:
Computer & IT
CSS-Tools
Fonts
Vortragsvideos erstellen
Visitors' map
Datenschutz managen

CSS-Tools - Hilfen zur Gestaltung von HTML-Seiten im Web mit CSS

Moderne Websites verwenden heute die Kombination aus der Auszeichnungssprache HTML5 und der Gestaltungssprache CSS3. Struktur und Inhalte werden in HTML5, Anweisungen zu Design und Layout in CSS3 erstellt. Damit werden die Darstellungsvorgaben weitgehend von den Inhalten getrennt.

Im Internet finden sich nicht nur zahlreiche Anleitungen zu oder komplette Referenzen von CSS-Befehlen mit Beschreibung der Syntax und der Parameter, sondern auch automatische Generatoren für Web-Designelemente wie Buttons, Header oder Gradient-Verläufe, nützlich besonders für Designelemente, die ein aufwendigeres CSS-Coding erfordern.

Insbesondere diese CSS-Generatoren waren es, die mich dazu ermutigten, die lange anvisierte und immer nötiger werdende Umstellung meiner Websites auf HTML5/CSS3 im Frühjahr 2021 in Angriff zu nehmen. Für meine in 2000 und 2003 an den Start gegangenen Websites hatte ich zunächst eine Designstudie mit der damals von 1&1 zur Verfügung gestellten Software „NetObjects Fusion“ erstellt, die auf Basis von HTML3-Tables und Image-Dateien (etwa für beschriftete Buttons) arbeitete. Das erzeugte HTML-Tables-Gerüst übernahm ich dann für jede HTML-Seite und füllte es mit Texten und den nötigen zu erzeugenden Image-Dateien für Buttons, Banner und Überschriften in Spezialfonts - letzteres ist recht aufwendig und nicht website-pflegefreundlich. Dank der CSS-Generatoren und der Entdeckung von CSS Grid gelang es mir schließlich, mit reinen CSS-Mitteln das bisherige Layout im Wesentlichen zu reproduzieren, und so wurde der Weg zur Umstellung der Seiten auf HTML5/CSS3 frei. Im weiteren Verlauf konnte ich schließlich mit Hilfe einiger unten genannter Links auch die JavaScript-Popup-Windows durch CSS-Lightboxen ersetzen.

Meine Empfehlungen aus dem Web

Die folgende heterogene Zusammenstellung umfaßt alle Links, die ich im Zuge der Umstellung meiner Websites auf CSS zu Rate gezogen habe. Hierzu gehören Tutorials über Sprachelemente, Syntax, Selektoren oder Konzepte wie CSS Grid, Anleitungen und Code-Snippets für die Schaffung bestimmter Design-Elemente bis hin zu Code-Blöcken für CSS-Lightboxen und Close-Buttons sowie schließlich CSS-Codegeneratoren, die beispielsweise für selbst entworfene Gradientenbanner oder Buttons mit aufwendigen Rändern den nötigen CSS-Code zum direkten Gebrauch erzeugen.

Grundlegende universelle CSS-Tutorials/-Befehlsreferenzen

Tutorials & Code für bestimmte Design-Aufgaben oder zum Einsatz zentraler CSS-Bausteine

Exkurs: JavaScript

CSS-Designelement-Generatoren

[narjesia Startseite] [...was mich interessiert] [Computer & IT Index]
created by
narjesia
  Banneranzeigen-Verbund