Kategorien
Stylesheets Webentwicklung

How to use CSS property resize

html code beispiel

resizeoutline

Die Eigenschaft resize bestimmt, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann.

Die CSS-Eigenschaft resize ermöglicht weiterhin die Steuerung, ob und wie ein Element in der Größe verändert werden kann. Sie akzeptiert verschiedene Werte:

  • none: Das Element kann nicht verändert werden.
  • both: Das Element kann sowohl in der Breite als auch in der Höhe verändert werden.
  • horizontal: Das Element kann nur in der Breite verändert werden.
  • vertical: Das Element kann nur in der Höhe verändert werden.
  • initial: Setzt die resize-Eigenschaft auf den Standardwert, normalerweise “both”.
  • inherit: Erbt den Wert von der übergeordneten Elementkette.

Mit outline kann ein Rahmen zum Hervorheben um Elemente herum gelegt werden, der aber nicht die Box breiter macht.

Beachten Sie, dass nicht alle Elemente diese Eigenschaft standardmäßig unterstützen, und die tatsächliche Umsetzung kann je nach Browser variieren. Es ist wichtig sicherzustellen, dass das Element, das Sie ändern möchten, die resize-Eigenschaft unterstützt, um eine konsistente Benutzererfahrung zu gewährleisten.

Eine Veränderung der Größe ist nur möglich und sinnvoll, wenn die overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.
Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Kategorien
Stylesheets Webentwicklung

How to use the target attribute

Prozess Pyramide farbige Darstellung

target

Die Eigenschaft target (target attribute) ersetzt das nicht mehr valide HTML-Attribut target="".

Mit den Werten none, window und tab kann festgelegt werden, ob der Browser einen Link im gleichen Fenster, in einem neuen Fenster oder als neuen Tab öffnen soll.

Der :target-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, die Ziel eines Verweises sind.

Beispiel:

a:target { 
  color: red; 
}

In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter Schrift dargestellt.

Kategorien
Stylesheets Webentwicklung

Coole Effekte für HTML Text-Elemente

Text Schatten
Text Schatten
box-shadowtext-shadow

Mit box-shadow kann einem Kasten ein Schatten einfach und ohne Bilder gegeben werden.

Dagegen bietet text-shadow die Möglichkeit Text mit sogar mehreren Schatten (im Opera) zu versehen. Damit können schöne Effekte wie Leuchten usw. erzielt werden.

h1 { text-shadow: .2em .2em #ccc; }
  • stellt für Überschriften (H1) einen hellgrauen Schatten ein.