Beispiel:CSS-clamp-2.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">
<title>Bild mit vertikalen Image Credits</title>
<style>
*, ::before, ::after {
box-sizing: border-box;
}
figure {
margin: 0;
font: 1.2em/1.3 Source Serif Pro, Georgia, serif;
font-size: clamp(1em, 4vw, 1.25em);
}
figure > div {
position: relative;
}
figure img {
width: 100%;
display: block;
}
figure footer {
font: 0.8em/1 Source Sans Pro, Calibri, sans-serif;
text-align: right;
hanging-punctuation: first last allow-end;
}
@media (min-width: 25em) {
figure footer {
position: absolute;
top: 0;
right: 0%; /* % fixes IE bug */
bottom: 0;
transform: rotate(.5turn);
color: white;
writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: left;
padding: 0.5em 1em 0.5em 0.25em;
background: linear-gradient(to left,#1040, #1042 .75em, #1046 1.5em);
}
}
figure footer a {
color: currentColor;
text-decoration: none;
white-space: nowrap;
}
figcaption {
margin-top: 0.5em;
}
</style>
</head>
<body>
<h1>Bild mit vertikalen Image Credits</h1>
<figure lang="de">
<div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/640px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg"
srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/1280px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 1280w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/1024px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 1024w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/640px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 640w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/320px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 320w"
sizes="100%"
alt=""
aria-describedby="caption"
/>
<footer>
Foto: Ansgar Koreng,
<small><a href="https://creativecommons.org/licenses/by-sa/3.0/de/deed.de" target="_blank">CC BY-SA 3.0</a></small>
</footer>
</div>
<figcaption id="caption">Berlin-Mitte: Blick von der Hugo-Preuß-Brücke in Richtung Regierungs­viertel während der blauen Stunde</figcaption>
</figure>
</body>
</html>
