{"id":253331,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-fantastische-css3-techniken-die-sie-ausprobieren-sollten\/"},"modified":"2022-12-20T14:37:00","modified_gmt":"2022-12-20T11:37:00","slug":"7-fantastische-css3-techniken-die-sie-ausprobieren-sollten","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/7-fantastische-css3-techniken-die-sie-ausprobieren-sollten\/","title":{"rendered":"7 fantastische CSS3-Techniken, die Sie ausprobieren sollten"},"content":{"rendered":"

\n Die Entwicklung von CSS (Cascading Style Sheets) mit HTML war unglaublich. Es gibt unz\u00e4hlige Funktionen wie Flexbox, CSS Grid und benutzerdefinierte CSS-Eigenschaften, die k\u00fcrzlich eingef\u00fchrt wurden.\n<\/p>\n

\n Seine kontinuierliche Weiterentwicklung und sein enormes Potenzial sind es, die die Entwickler dazu anregen, neue CSS-Techniken auszuprobieren und die Grenzen dessen, was es kann, zu \u00fcberschreiten. Die Kombination aus HTML 5- und CSS3-Technologie ist zweifellos ein Flash-Killer.\n<\/p>\n

\n Es ist kein Wunder, dass ein gut ausgef\u00fchrter CSS-Plan fast jede Facette des Designs steuern und zu einer besseren Benutzererfahrung f\u00fchren kann, was durchaus notwendig ist. Schlie\u00dflich haben Besucher bestimmte Erwartungen, wenn sie Ihre Website \u00fcber einen Laptop, Desktop, Tablet oder ein anderes Medium betrachten.\n<\/p>\n

\n Aber was sind die angesagten CSS-Techniken? Ist das nicht eine offensichtliche Frage, die uns in den Sinn kommt, wenn wir \u00fcber die Gestaltung einer attraktiven, benutzerfreundlichen Website sprechen?\n<\/p>\n

\n Aus diesem Grund haben wir einige der frischen CSS-Techniken und Tipps entwickelt, um Ihre Webdesign-F\u00e4higkeiten zu meistern. Jeder enth\u00e4lt einige Erkl\u00e4rungen und Beispielcodeausschnitte.\n<\/p>\n

\n Kommen wir also direkt zur Sache!\n<\/p>\n

\n 1 Vertikal an Flexbox ausrichten
\n<\/h5>\n

\n Fr\u00fchere Entwickler hatten viele Schwierigkeiten, einen Text oder ein anderes Element vertikal zentriert auszurichten. Doch jetzt, nach Einf\u00fchrung der neuen CSS3-Spezifikation Flexbox<\/strong>, ist vieles einfacher geworden.\n<\/p>\n

\n Die Eigenschaft display: flex<\/strong> bietet Benutzern eine m\u00fchelose M\u00f6glichkeit, jeden Text oder jedes Element in der Mitte auszurichten. Hier ist der Beispielcode!\n<\/p>\n

\n HTML:<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  Im obigen CSS-Code beschreibt display: flex das Flexbox-Layout f\u00fcr das Element, w\u00e4hrend align-items: center; ist f\u00fcr die vertikale Zentrierung des Textes verantwortlich.\n<\/p>\n
\n  ERGEBNIS:<\/strong>\n<\/p>\n
\n  2 Responsives CSS-Grid
\n<\/h5>\n
\n  Machen Sie Ihr Raster nicht zu einer Ausnahme, sondern reagieren Sie auch darauf, wie alles andere in Ihrem Design.\n<\/p>\n
\n  Es gibt so viele M\u00f6glichkeiten, wie Sie Ihr Grid mit CSS Grid responsiv machen k\u00f6nnen. Und das Beste daran ist, dass Sie ein flexibleres Raster erstellen k\u00f6nnen, das Ihnen unabh\u00e4ngig von der Ger\u00e4tegr\u00f6\u00dfe das gew\u00fcnschte Aussehen verleiht.\n<\/p>\n
\n  Dar\u00fcber hinaus erm\u00f6glicht Ihnen das CSS-Grid auch, mit ungleichen und gleichen Spaltengr\u00f6\u00dfen zu arbeiten. Es ist ein gro\u00dfartiges St\u00fcck Technologie, vollgepackt mit Optionen, die den Benutzern die Freiheit geben, die Kontrolle \u00fcber ihre Designs zu haben.\n<\/p>\n
\n  Sie k\u00f6nnen verschiedene Haltepunkte, die H\u00f6he mehrerer Dimensionen und andere Platzierungen verwenden, wie im folgenden Beispiel gezeigt.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  Die im obigen CSS-Code verwendete Brucheinheit (fr) ist die flexible Einheit, die den offenen Raum gem\u00e4\u00df Ihren Richtlinien trennt. Jede fr-Anweisung ist f\u00fcr die Spalte, dann k\u00f6nnen Sie die L\u00fccken addieren und das Raster fertig machen.\n<\/p>\n
\n  ERGEBNIS:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 Textanimationen
\n<\/h5>\n
\n  Sie haben vielleicht Hintergrundanimationen mit CSS erstellt, aber jetzt beeinflusst es auch, wie Benutzer mit den Textelementen einer Website interagieren und interagieren. Von Hover-Anpassungen bis hin zum Schweben von W\u00f6rtern in der Luft, CCS3 hat alles m\u00f6glich gemacht.\n<\/p>\n
\n  Websites, die nicht \u00fcber viele verlockende Elemente verf\u00fcgen, um ihre Benutzer anzusprechen, k\u00f6nnen das Beste aus dieser Eigenschaft machen. Hier ist ein kleines Beispiel daf\u00fcr.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n