2 2 8 34 0 0 0

Anzeige von Elementen

display

Die Anzeige legt fest, wie ein Element angezeigt werden soll.
Mindestens drei Browser aktuellsten Standes sollen die Attributwerte verarbeiten können, um hier Eingang zu finden.

Attributwerte ändern
:nonekeine Anzeige
:blockerzeugt ein Blockverhalten.
:inlineerzeugt ein Inlineverhalten.
:inline-blockerzeugt ein Inlineverhalten nach außen und ein Blockverhalten nach innen.
:flexLayouts flexibel anpassen - das ist wohl mit den beiden Absätzen schwer zu demonstrieren.

Wertausgabe bei Aktivierung: bei mouseDown im Attributwert mit goldgelber Unterlegung

Erstes Absatzelement: Hier wird demonstriert, was der Attributwert bewirkt.

Zweites Absatzelement

resize

Die resize-Eigenschaft legt fest, ob ein Element durch den Nutzer in seiner Größe verändert werden kann. Hier ist overflow: auto; wichtig, um eine Größenveränderung herbeiführen zu können.

Die Größenänderung von blockerzeugenden Elementen

Neben resize: both; (Höhe und Breite sind veränderbar) sind noch resize: horizontal; (Breite ist veränderbar) und resize: vertical; (Höhe ist veränderbar) wichtig.

Merkmal: gepunktetes Dreieck rechts unten!
Da das Element rechts positioniert ist, wirkt sich die Größenänderung natürlich nach links aus! Das musste ich unbedingt probieren.

Edge, Chrome und Opera reagieren etwas nervös, d.h. Veränderungen sind schwer zu steuern.
Die Veränderung der Größe ist nur möglich, wenn das Element überhaupt die overflow-Eigenschaft erhält und eine abweichende Eigenschaft von visible erhält.

Das hier habe ich angefagen, wieder weggelegt, noch mal und noch mal draufgeschaut: Mir will einfach nicht in den Sinn kommen, wozu man das braucht! Es wird sicherlich hochgeschätzte Geister geben, die das wissen. Mir bleibts verborgen, außer zu Simulationszwecken wie im vorangegangenen Beispiel.

Nun habe ich mal angefangen, was solls!

21
22
23
24
25
26
27		 .resize { /* 1. Beispiel div-Element rechts oben ohne Beschränkung*/
 font-size: 14px; background-color: DarkOrange; color: white; position: relative; 
 overflow: auto; resize: both; /* die sind wichtig!!! */
 width: 240px; padding: 3px 6px; margin-left: 16px ; 
 min-height: 70px; min-width: 100px;  max-height: 150px; max-width: 370px; 
 float: right; border: solid 1px darkred; 
}

clip

clip gilt als veraltet und soll nun von clip-path ersetzt werden. Nun gut!

Chrome und Opera verarbeiten CSS. Firefox kennt das noch(!?!) nicht. Ersatzweise muss auf eine SVG-Maskierung ausgewichen werden.
MSIE fällt hierfür aus! MSIE

Vorweg: Ich habe bewusst an einigen Stellen unterschiedliche Notationen für CSS und SVG-defs vorgenommen, um die Wirkung zu testen. Dabei stieß ich auf ein Problem im Zusammenhang mit der Angabenreihung. Wird clip-path: url() nach den clip-path: Attributen gesetzt, verlieren diese ihre Gültigkeit. Also erst proprietäre Anweisungen setzen analog zu -webkit-... und so.

demo-clip-path








Abbildung CSS: ( Chrome und Opera )

Maskierung und Textumfluss

Mit clip-path und shape-outside kann man Text um eine Maske fließen lassen. Wie neu das ist, kann ich nicht sagen. Alle Demos, die ich finden konnte, waren Imageabbildungen von weiß ich was, InDesign vielleicht? Jedenfalls war keine gerenderte Darstellung von mir zu finden.

ein Bier

Es gibt kein Bier auf Hawaii,
es gibt kein Bier.
Drum fahr ich nich nach Hawaii,
drum bleim mer hier.
Es ist so heiß auf Hawaii,
kein kühler Fleck
und nur vom Hulahula geht
kein Durst nicht weg.

Meine Braut die heißt Marianne ...


MSIE MSIE sollte keine Rolle mehr spielen und kann das nicht. Dazu gesellt sich nun auch der Firefox bis 49.0.2. Der Umfluss mittels Attribut shape-outside hat noch keinen Einzug gefunden.

Vorweg: Die Attributwerte werden im CSS mit Prozent und im SVG-ClipPath (für Firefox) als Dezimalbruch notiert. Das hat den Nachteil, dass die Clipping-Punkte einer Darstellung von den Pixelwerten umzurechnen sind. Das ist für komplexere Masken eine FrickeleiRechnerei. Von Vorteil ist, dass sich die Maske der Größe des referenzienden Elementes anpasst, falls sich dieses größenveränderbar verhält.
Und wenn nicht? Dann ist zu überlegen, ob man diese Arbeit aufsichnehmen will.
Ich habe alle Zeit der Welt (bis Abruf). Das wird nicht jeder von sich behaupten können.
Wenn dann noch die Microsoft-Browser und Firefox mitspielen, wird es zu einer Überlegung für gehobenes Layout, da es nie Mainstream werden wird bei der Rechnerei.


Abbildung CSS: ( Chrome und Opera )

11
12
13
14
15
16
17
18
19
20		 .original{
 -webkit-clip-path: url("#original");
 clip-path: url("#original");
 -webkit-clip-path: polygon(
  0 0, 60% 0, 75% 20%, 89% 22%, 97% 48%, 90% 65%, 75% 72%, 75% 80%, 63% 95%, 0 95%); 
 clip-path: polygon(
  0 0, 60% 0, 75% 20%, 89% 22%, 97% 48%, 90% 65%, 75% 72%, 75% 80%, 63% 95%, 0 95%); 
 shape-outside: polygon(
  0 0, 60% 0, 75% 20%, 89% 22%, 97% 48%, 90% 65%, 75% 72%, 75% 80%, 63% 95%, 0 95%);
}

Abbildung SVG Definition im defs-Bereich: ( Firefox )

48
49
50
51		   <clipPath id="original" clipPathUnits="objectBoundingBox">
   <polygon points="0 0, .6 0, .75 .2, .89 .22, .97 .48, 
                  .9 .65, .75 .72, .75 .8, .63 .95, 0 .95" />
  </clipPath>


Dokument geändert am: 20. Sep. 2022 12:18