Beispiel:CSS-clamp-1.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./Beispiel:Grundlayout.css"> <title>Zitat mit flexibler Schriftgröße</title>
<style>
blockquote {
font: 1.2em/1.4 Georgia, serif; font-size: clamp(1em, 4cqi, 2em); text-align: center; margin: 0;
h3 {
font-size: clamp(1.5em, 6cqi, 4em); margin: 0; word-break: keep-all;
white-space: normal; }
p {
font-style: italic; margin: 0;
} .content { color: steelBlue; } } figure {
container-type: inline-size;
border: medium dotted steelblue; } figcaption {
margin-top: 1em; font-size: 0.8em;
}
body {
animation: resize 5s infinite alternate linear;
border: medium solid;
padding: 1em;
}
@keyframes resize {
from {
width: 15em
}
to {
width: 60em
}
} /* Frickl can't use two stylesheets *
path, circle, rect, line {
fill: none;
stroke: black;
stroke-width: 3;
stroke-linecap: round;
}
#water {
fill: steelblue;
stroke: none;
}
</style> </head> <body>
Zitat mit flexibler Schriftgröße
<figure>
CONTENT IS LIKE WATER
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 00 1240 500">
<title>Content is like</title>
<path id="water" d="M870 288s53 10 107 10c29 0 53-3 95-8 38-5 64 7 91 5v60c0 4-4 7-7 7H876c-2 0-6-3-6-6zm-356-7s15 1 25 9c9 7 31 7 44 4l3 13v101c0 4-5 8-8 8h-61c-4 0-9-3-9-9V307zm-275 43s21 11 36 11c10 1 26-6 42-3 15 2 22 7 31 7 9 1 21-2 32-4 10-1 15 0 15 0s7 30-19 56c-18 16-33 18-47 18s-36-4-54-32c-26-9-33-30-36-53ZM62 355s22 2 33 0 31-3 43 1c11 4 24 1 24 1s3 21-15 37c-13 11-28 15-43 14-10-1-20-6-27-13-8-8-15-17-15-40Zm630-61s13 9 26 10c11 1 26-5 34-5s16 1 16 1v92h-76zM620 63s-1 15-6 23-2 21 7 25c7 2 15-5 17-12 3-14-8-27-18-36Z"/>
<path id="cup" d="M62 331h100v30c0 33-30 47-52 47-20 0-48-16-48-47zm101 10c7 0 12 3 12 10v8c0 6-5 11-13 11m-85 46h70"/>
<g id="teapot">
<path d="M396 344c0 36-29 65-65 65-24 0-45-13-56-32 0 0-35-7-36-58 0-29-16-26-17-34s8-6 15-3c17 7 23 37 36 32 6-10 13-19 23-25h70c18 12 30 32 30 55Zm-105 72 83 1"/>
<path d="M391 370c13-17 43-16 43-42 0-21-24-36-46-16"/>
<path d="M297 288c0-12 0-11 25-12 0-3 0-9 7-9h4c7 0 7 6 7 9 24 0 26 2 25 12"/>
</g>
<g id="bottle">
<path d="m535 197-27 110v100c0 5 4 9 9 9h60c5 0 9-4 9-9V307l-27-110"/>
<rect width="35" height="12" x="530" y="185" rx="8"/>
</g>
<g id="mobile">
<rect width="100" height="168" x="680" y="249" rx="8"/>
<path d="M692 261h76v131h-76z"/>
<circle cx="730" cy="405" r="6"/>
</g>
<g id="widescreen">
<path d="M854 190c0-5 4-9 9-9h306c5 0 9 4 9 9v178c0 5-4 9-9 9h-123v20l20 20H966l20-20v-20H863c-5 0-9-4-9-9z"/>
<rect width="293" height="166" x="870" y="196" rx="8"/>
</g>
</svg>
You put water into a cup it becomes the cup.
You put water into a bottle it becomes the bottle.
You put it in a teapot, it becomes the teapot.
<figcaption>
(Josh Clark (originally Bruce Lee) - Seven deadly mobile myths
Illustration by Stephanie Walter)
</figcaption>
</figure>
</body> </html>
