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
- CSS-Tutorials/-Referenz von W3Schools (Refsnes Data, Sandnes, Norwegen)
- CSS-Grundlagen von MDN Web Docs (Mozilla Developer Network)
Tutorials & Code für bestimmte Design-Aufgaben oder zum Einsatz zentraler CSS-Bausteine
- Organizing your CSS (MDN Web Docs)
- CSS combinator selectors (MDN Web Docs)
- CSS .class selector (W3Schools)
- Multiple class/ID and class selectors (CSS-Tricks)
- Becoming a CSS Grid Ninja (Medium, Elad Shechter)
- CSS-Element positionieren mit top, right, bottom, left (Mediaevent)
- CSS Margin (Mediaevent)
- Wie kann man einen Text mit CSS vertikal zentrieren? (W3Docs)
- Vertical align (CSS-Tricks)
- Text-Rendering (CSS-Tricks)
- Font-Smooth Feature, kein CSS-Standard (MDN Web Docs)
- Aspect ratio boxes (CSS-Tricks)
- Pure CSS popup box (CodePenIO, Prakash)
- Pure CSS Lightbox (CodePenIO, Gregory Schier)
- CSS3-Lightbox komplett ohne Javascript (Stellaplan, Johannes Bucka)
- DiviMode, Divi Areas Pro - Customize the Popup Close Button (nur bei Nutzung der Divimode-Produkte, genutzt als Anregung zur Erstellung eigener Close-Buttons)
- Click on button/outside to show and hide a web form (JSFiddle Code Playground)
- CSS Close X Icon (JSFiddle Code Playground)
- How to create browser specific CSS code (BrowserStack)
- 3 CSS techniques to improve browser compatibility (BrowserStack)
- 7 Common cross-browser compatibility issues to avoid (BrowserStack)
- CSS Media Queries (javascriptkit.com)
- Width vs. Device Width in CSS Media Queries (javascriptkit.com)
- HTML Viewport Meta Tag (javascriptkit.com)
- Yesviz.com Devices Insights - Informationen über Viewport-Größe, Auflösung/Pixelanzahl, Pixels per inch und Display-Spezifikationen verschiedener Devices sowie die entsprechenden CSS Media Queries
- Yesviz.com Devices Insights für Huawei Mate 20 lite (als Beispiel)
Exkurs: JavaScript
- JavaScript getCookie/setCookie Functions (W3Schools)
- JavaScript popups and window methods (javascript.info)
CSS-Designelement-Generatoren
- EnjoyCSS - Fortgeschrittener CSS3-Generator zur Entlastung bei Routine-Coding-Aufgaben
- AngryTools - Umfangreiche CSS-Generator-Plattform einschließlich Flexbox, Grid-Layout, Android Buttons und Media-Query-Codegenerierung
- SciWeavers i2style CSS-Codegenerator
- CSS3 Button-Generator
- Button-Generator
- Best CSS Button Generator
- CSSButtonGen
- ColorZilla Ultimate CSS Gradient Generator
- CSS Gradient Generator
- MyColorSpace Gradient Generator
- Gradient CSS Generator (cssgenerator.org)
- Gradientfinder - CSS Image Gradient Finder & Generator
- Box-Shadow-Generator (html-css-js)
- CSS-Generatoren für andere Gestaltungselemente (html-css-js)
- Javierbyte img2css - Image-to-CSS Konverter, wandelt Bilddateien in ihr CSS-Äquivalent um (Javier Borquez)