Html5 und CSS3 Tricks

Jeder Webentwickler braucht eine Trickkiste, um in diesem wettbewerbsintensiven Geschäft einen Vorteil zu haben. Das Wissen um ein paar Geheimnisse kann dazu beitragen, Ihren Ruf in der Webprogrammierung zu festigen, da Sie Designeffekte erzielen können, die ein typischer Webentwickler nicht erreichen kann. Nachfolgend finden Sie 11 CSS-Geheimnisse, die Sie nicht verpassen dürfen, wenn Sie Ihre Webprogrammierfähigkeiten verbessern möchten.

1. Erstellen von Übergängen ohne Verwendung von JavaScript oder CSS-Animationen

Die Verwendung von JavaScript oder CSS-Animationen kann für einige einfache Übergangseffekte zu viel des Guten sein. Um beispielsweise ein Bild so aussehen zu lassen, als würde es von einem kleinen Punkt zu einem Bild voller Größe wachsen, können Sie mehrere ähnliche Übergänge verwenden, die sich durch ihre Höhe und Breite unterscheiden. Viele Übergänge können innerhalb weniger Sekunden angezeigt werden, um eine ziemlich flüssige, animationsähnliche Anzeige zu erstellen, ohne das kompliziertere JavaScript von sogar CSS-Animationen verwenden zu müssen. Die meisten Browser unterstützen diese Funktion, außer Internet Explorer.

2. Scrollen des Elements sowie des Hintergrunds

Viele CSS-Experten sind mit zwei Haupt-Scroll-Optionen vertraut – scrollen und fixiert. Mit der Scroll-Option können Sie die Seite scrollen. Wenn die Seite andererseits nicht gescrollt werden kann, ist die feste Option wirksam. Dennoch wissen einige Entwickler nichts von einer neu eingeführten dritten Alternative, background-attachment local. Unter dieser neuen Option ist es jetzt möglich, sowohl das Element als auch den Hintergrund zu scrollen, um tolle visuelle Effekte zu erzeugen. Derzeit unterstützen die meisten Browser diese CSS-Funktion, einschließlich Opera, Internet Explorer, Safari und sogar Google Chrome.

3. Positionierung von Inhalt, Padding und Borders

Grundsätzlich beinhaltet dieser Prozess die Verwendung der CSS-Box-Sizing-Funktion. Normalerweise gibt es zwei Alternativen, die standardmäßige Content-Box-Option und die Border-Box-Alternative. Wenn Sie sich für die Content-Box-Alternative entscheiden, werden die Polsterung und der Rahmen außerhalb einer angegebenen Breite und Höhe positioniert. Kurz gesagt, die Größe der Inhaltsbox umfasst weder die Umrandung noch die Polsterung. Sollten Sie sich dagegen für die Boarder-Box-Alternative entscheiden, beinhaltet die angegebene Boxengröße auch die Polsterung und den Boarder. Die Kenntnis dieses Unterschieds kann Ihnen als Webentwickler helfen, bei der Positionierung verschiedener Elemente innerhalb einer Webseite präziser zu sein.

4. Inhalte mit fester Breite erstellen und gleichzeitig den Hintergrund fließend halten

Dieses Geheimnis ermöglicht es Webentwicklern, Webseiten so zu konfigurieren, dass der Inhalt innerhalb einer festen Breite bleibt, während sich der Hintergrund frei an die Breite des Browserfensters anpassen kann. Der Hintergrund kann in verschiedenen Anzeigeeinstellungen gestaltet werden. Andererseits wird der Inhalt in eine Hülle mit fester Breite eingepasst. Dieser tolle Effekt lässt sich mit der Option „Margin Auto“ erzielen, die in der Lage ist, den verfügbaren Platz innerhalb einer Browserseite durch prozentuale Maßangaben statt absoluter Festwerte auszunutzen. Eine gute Möglichkeit, diese Funktion zu nutzen, besteht darin, 50 % der Gesamtbreite dem Inhalt zu widmen und dann zuzulassen, dass der dynamische Hintergrund je nach Fenstergröße zwischen 50 % und 100 % des Browserbereichs einnimmt.5. Textausrichtung in Browsern ohne Silbentrennungsfunktion Einige Browser haben keine Silbentrennungsfunktion für Text, was normalerweise dazu führt, dass der Text nicht lesbar ist, wenn die Blocksatz-Ausrichtungsfunktion unter CSS-Codierung verwendet wird. Glücklicherweise haben einige Browser eine automatische Silbentrennungsfunktion. Für diejenigen, die keine Silbentrennung haben, ist es am besten, die Verwendung von Blocksatz zu vermeiden; was den Text lesbarer macht.

5. Textausrichtung in Browsern ohne Silbentrennungsfunktion

Einige Browser haben keine Silbentrennungsfunktion für Text, was normalerweise dazu führt, dass der Text nicht lesbar ist, wenn die Blocksatz-Ausrichtungsfunktion unter CSS-Codierung verwendet wird. Glücklicherweise haben einige Browser eine automatische Silbentrennungsfunktion. Für diejenigen, die keine Silbentrennung haben, ist es am besten, die Verwendung von Blocksatz zu vermeiden; was den Text besser lesbar macht.