Beispiel:CSS-clamp-1.html
Aus SELFHTML-Wiki
<!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
}
}
</style>
</head>
<body>
<h1>Zitat mit flexibler Schriftgröße</h1>
<figure>
<blockquote lang="de">
<h3><span class="content">CONTENT</span> IS LIKE <span class="content">WATER</span></h3>
<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>
<style>
path, circle, rect, line {
fill: none;
stroke: black;
stroke-width: 3;
stroke-linecap: round;
}
#water {
fill: steelblue;
stroke: none;
}
</style>
<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>
<p>You put water into a cup it becomes <span class="content">the cup</span>. <br>
You put water into a bottle it becomes <span class="content">the bottle</span>.<br>
You put it in a teapot, it becomes <span class="content">the teapot</span>.
</p>
</blockquote>
<figcaption>
(<cite>Josh Clark (originally Bruce Lee) - Seven deadly mobile myths <br>Illustration by Stephanie Walter</cite>)
</figcaption>
</figure>
</body>
</html>
