Gabriel Grimm
Azubi Fachinformatiker - Anwendungsentwicklung
CSS-Generatoren Teil 2
In einem vorherigen Post haben wir dir bereits ein paar CSS-Generatoren gezeigt, die dein Leben als Web-Entwickler einfacher machen. Das waren aber noch lang nicht alle. Für diesen Post habe ich drei weitere herausgesucht, die dir helfen werden deinen Workflow zu optimieren.
Der erste Generator bezieht sich auf CSS Grid. Er hilft dir, ein Grid zu erstellen und die Elemente so zu sortieren, wie du es möchtest. Du kannst die Anzahl der Reihen und spalten sowie die Anzahl, Größe und Position der Elemente im Grid angeben.
Falls du CSS Grid noch nicht kennst, es ist ein einfacher Weg, den Inhalt einer Website zu gestalten. Über die Basics habe ich einen Post geschrieben, falls es dich interessiert.
CSS Grid Basics
Um eine Website zu gestalten, haben Web-Entwickler früher Tabellen, Positioning oder Inline-Block verwendet...
Jeden den Webdesign interessiert, kennt border-radius. Mit Border-radius können die Ecken deiner HTML-Elemente abzurunden. Aber das ist nicht das Einzige, was dieses Attribut kann. Der nächste Generator hilft dir, dass meiste herauszuholen, wodurch du dazu in der Lage bist, Formen zu erstellen, die deine Website aus der Masse herausstechen lässt.
Fancy Border Radius Generator
A visual generator to build organic looking shapes with the help of CSS3 border-radius property
Wie man so schön sagt, das Beste kommt zum Schluss. Bei der Suche nach interessanten Generatoren bin ich auf Web Code Tools gestoßen. Auf Web Code Tools gibt es nicht nur CSS-Generatoren für alles Mögliche wie Hintergründe, Animationen, Farben, Filtern oder Texten. Es gibt vieles mehr. Diese Website bietet ebenfalls Generatoren für HTML, Meta Tags, Open Graph Meta Tags, JSON-LD und Twitter Cards an.
The ultimate tools for web development | Web Code Tools
The ultimate web code generators. Generate HTML, CSS, JSON-LD, Twitter Cards, Open Graph and more! No coding skills required.
Meta Tags:
HTML-Elemente, die den Inhalt der Webseite beschreiben, damit Suchmaschinen diese besser kategorisieren können.
Open Graph Meta Tags:
Mit Open Graph Meta Tags kann man kontrollieren wie URLs auf sozialen Netzwerken aussehen. Diese sind Teil von Facebooks [Open Graph Protocol](https://ogp.me/)
JSON-LD:
JSON-LD hilft dir die Daten auf deiner Website zu strukturieren, was es wiederum einfacher macht für Suchmaschinen deine Seite zu verstehen.
Twitter Cards:
Twitter Cards sind erweiterte Tweets mit zusätzlichem Content, der auf externe Seiten verlinken kann.
HTML-Elemente, die den Inhalt der Webseite beschreiben, damit Suchmaschinen diese besser kategorisieren können.
Open Graph Meta Tags:
Mit Open Graph Meta Tags kann man kontrollieren wie URLs auf sozialen Netzwerken aussehen. Diese sind Teil von Facebooks [Open Graph Protocol](https://ogp.me/)
JSON-LD:
JSON-LD hilft dir die Daten auf deiner Website zu strukturieren, was es wiederum einfacher macht für Suchmaschinen deine Seite zu verstehen.
Twitter Cards:
Twitter Cards sind erweiterte Tweets mit zusätzlichem Content, der auf externe Seiten verlinken kann.
Falls du Teil 1 von CSS Generatoren noch nicht gelesen hast, hier ist ein Link!
Wie CSS-Generatoren beim Webdesign unterstützen.
Das Styling einer modernen Webseite kommt heutzutage nicht ohne CSS (Cascading Style Sheets) aus...
By accepting you will be accessing a service provided by a third-party external to https://www.nrml.de/