Responsive Webdesign mit clamp( )
In diesem Tutorial erfahrt Ihr, wie die clamp() Funktion in einem responsiven Webdesign speziell für Typografie, Bilder, Buttons und Layouts verwendet werden kann.
Responsive Webdesign
Responsive Webdesign ist eine Methode, flexible Webseiten zu gestalten, die sich an die Bildschirmgrößen der Endgeräte jeweils anpassen. Dies ermöglicht eine optimale Darstellung und vereinfacht die Nutzung für die Verbraucher.
Clamp( )
clamp() ist eine CSS-Funktion. Sie begrenzt einen Minimal- und Maximalwert, indem man einen bestimmten Rahmen vorgibt. Dadurch werden weder Texte noch Bilder zu klein oder zu groß.
Für dieses Tutorial benutzen wir folgenden HTML Code als Basis:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic responsive test</title>
<meta name="description" content="code testing">
<link href="html.css" rel="stylesheet">
</head>
<body>
<h1>Basic responsive test</h1>
<button>Drück Mich!</button>
<p>
Manchmal erscheint der Weg vor uns zu lang, das Ziel zu weit entfernt, und die Zweifel in uns zu laut. Doch wahre Stärke liegt nicht im großen Sprung, sondern im kleinen, konsequenten Schritt.
Jeder Sonnenaufgang ist eine Einladung, neu zu beginnen – nicht perfekt, aber ehrlich. Es ist nicht der Sturm, der uns formt, sondern die Entscheidung, trotz allem weiterzugehen.
Mut ist nicht die Abwesenheit von Angst, sondern das Handeln in ihrem Schatten. Vertraue dem Prozess, ehre deinen Weg, und erinnere dich:
Auch die mächtigste Eiche war einst nur eine unscheinbare Eichel, die den Mut hatte zu wachsen.
</p>
<p>
Es gibt keinen festen Zeitplan für das Leben. Kein universelles Drehbuch, das vorgibt, wann du erfolgreich, glücklich oder „fertig“ sein musst.
Manche finden ihre Richtung früh, andere erst später – beide Wege sind richtig. Du bist nicht zu spät. Du bist genau da, wo du sein sollst, mit allem, was du bis jetzt gelernt, überstanden und gefühlt hast.
Jeder Tag bringt dir die Möglichkeit, neu zu wählen, neu zu träumen, neu zu wachsen.
Lass dich nicht von Vergleichen entmutigen – du bist nicht hier, um jemand anderes zu überholen, sondern um dein eigenes Licht zu entdecken und scheinen zu lassen.
</p>
</body>Clamp( ) in der Anwendung bei Typografie
Wie bereits gesagt kann man den Mindest- und Maximalwert der Texte und Bilder angeben, aber auch den Idealwert. Man kann somit angeben, welche Größe man bevorzugt, und wenn es mit dem Endanbieter übereinstimmt und funktioniert, wann diese Größe gewählt wird.
MIN = Mindestwert, IDEAL = Idealwert, MAX = Maximalwert
Beispiel an einer Überschrift:
h1 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}Beispiel an einem Absatz:
p {
line-height: 1.5;
font-size: clamp(1rem, 2vw, 1.5rem);
}Beispiel an einem Container - Element:
.container {
max-width: clamp(300px, 80%, 1000px);
margin: 2rem auto;
padding: clamp(1rem, 2vw, 2rem);
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}Anpassen von Bildern mit clamp( )
Das Bild kann man als nächstes bearbeiten. Da es verschiedene Größen für Bilder gibt, muss man dringend darauf achten, die richtigen Werte einzugeben.
Da Bilder standardmäßig Inline-Elemente sind, müssen wir sie zunächst mit display: block in Block-Elemente umwandeln. Erst dann können sie durch margin-left: auto und margin-right: auto horizontal zentriert werden. Die Funktion clamp() sorgt dafür, dass das Bild nie kleiner als 400 px (auf kleinen Geräten) und nie größer als 1000 px (auf großen Bildschirmen) dargestellt wird – idealerweise passt es sich mit 80 % der Bildschirmbreite an.
img {
display: block;
margin-left: auto;
margin-right: auto;
width: clamp(400px, 80vw, 1000px);
height: auto;
}Bearbeiten von Buttons mit clamp( )
Da man nun die einfachen Grundelemente aus dem Weg hat, kann man sich mit dem <button> beschäftigen. Hierbei ist es einem offen, wie man seinen <button> gestaltet.
Da unser <button> als inline-block identifiziert wurde, verhält er sich nun wie ein Text. Es kann nun ganz einfach neben anderen stehen, aber trotzdem noch die Höhe, Breite etc. ändern.
Die Schriftgröße und der Abstand haben wir schon oben erklärt, aber der border-radius ist eine andere Sache. Da werden die Ecken, wie man im Namen schon erkennen kann, abgerundet und je nach Breite des Endgerätes angepasst. Die Schriftfarbe, Hintergrundfarbe und die allgemeine Gestaltung des <button> kann man nach eigenen Wünschen anpassen. Die transition ist für einen weicheren Übergang zum nächsten Schritt und auch je nach Wunsch einzufügen.
button {
display: inline-block;
font-size: clamp(1rem, 2vw, 1.25rem);
padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 2.5vw, 2.5rem);
border-radius: clamp(6px, 1vw, 16px);
background-color: #800080;
color: #fff;
border: none;
cursor: pointer;
text-align: center;
transition: background-color 0.3s ease, transform 0.2s ease;
}Der letzte Schritt ist nur für einen schöneren Abgang und zur Klarstellung, dass es in der Tat ein Button ist. Diesen kann man je nach Belieben weglassen oder ändern.
button:hover {
background-color: #005fa3;
transform: translateY(-2px);
}
button:active {
transform: scale(0.95);
background-color: #ff69b4;
}CodePen für den Beispiel-Code Typo und Buttons:
https://codepen.io/NadineH01/pen/EaadRZd
Erstellung von Layout-Spalten mit clamp( )
clamp() ist auch ideal für die Erstellung von Layouts mit responsiven Abständen und Abmessungen, die auf die Größe des Browserfensters reagieren.
Die sogenannte minmax() Funktion eignet sich besonders gut als Grundlage für ein responsives Grid, da es sich an das vorgegebene Platzangebot anpasst. In diesem Beispiel wird der Wert 150px als Minimalwert festgelegt und ein davon ausgehendes Maximum von 25% für die linke Spalte. Die rechte Spalte wird durch 1fr definiert, was den restlichen Bereich des Grid beschreibt. Gemäß des Textes wird für die grid-template-rows der Wert 1150px verwendet. Die clamp() Funktion wird hier für die grid-gap zwischen der rechten und linken Spalte verwendet.
.clamp-columns {
max-width: 1200px;
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
grid-template-rows: 1150px;
grid-gap: clamp(5px, 2vw, 20px);
}Um die Spalten nochmals mehr hervorzuheben, färben wir sie im nächsten Schritt in zwei unterschiedliche Farben.
.column-1 {
background-color: #9dbdb8;
}
.column-2 {
background-color: #f0e7d6;
}Damit die Spalten nun auch sichtbar werden und die Texte in den Spalten stehen, muss man noch ein paar Veränderungen an der html Datei vornehmen.
Hierfür umschließt ein <div> mit dem Namen class=clamp-columns beide Paragrafen.
Der erste Paragraf wird nochmals in einem <div> Namens class=”column-1” eingeschlossen. Das gleiche wird mit dem zweiten Paragraf gemacht, diesmal heißt die class jedoch ”column-2”.
<div class="clamp-columns">
<div class="column-1">
<p>
Manchmal erscheint der Weg vor uns zu lang, das Ziel zu weit entfernt, und die Zweifel in uns zu laut. Doch wahre Stärke liegt nicht im großen Sprung, sondern im kleinen, konsequenten Schritt.
Jeder Sonnenaufgang ist eine Einladung, neu zu beginnen – nicht perfekt, aber ehrlich. Es ist nicht der Sturm, der uns formt, sondern die Entscheidung, trotz allem weiterzugehen.
Mut ist nicht die Abwesenheit von Angst, sondern das Handeln in ihrem Schatten. Vertraue dem Prozess, ehre deinen Weg, und erinnere dich:
Auch die mächtigste Eiche war einst nur eine unscheinbare Eichel, die den Mut hatte zu wachsen.
</p>
</div>
<div class="column-2">
<p>
Es gibt keinen festen Zeitplan für das Leben. Kein universelles Drehbuch, das vorgibt, wann du erfolgreich, glücklich oder „fertig“ sein musst.
Manche finden ihre Richtung früh, andere erst später – beide Wege sind richtig. Du bist nicht zu spät. Du bist genau da, wo du sein sollst, mit allem, was du bis jetzt gelernt, überstanden und gefühlt hast.
Jeder Tag bringt dir die Möglichkeit, neu zu wählen, neu zu träumen, neu zu wachsen.
Lass dich nicht von Vergleichen entmutigen – du bist nicht hier, um jemand anderes zu überholen, sondern um dein eigenes Licht zu entdecken und scheinen zu lassen.
</p>
</div>
</div>Hier kommt ihr zur CodePen Datei für die Layout-Spalten:
https://codepen.io/clasje01/pen/dPPQPgq
Hier könnt ihr nun die Zip.Datei unserer Beispiele herunterladen und selbst mit der clamp() Funktion arbeiten.
Quellen:
https://www.codecoda.com/de/blog/entry/css-clamp-fuer-responsive-webseiten
https://www.mediaevent.de/css/clamp-columns.html
https://johnkavanagh.co.uk/articles/dynamic-sizing-with-css-clamp/
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://utopia.fyi/clamp/calculator?a=320,1240
https://utopia.fyi/blog/postcss-utopia
https://kulturbanause.de/blog/min-max-und-clamp-drei-css-funktionen-fuer-dynamischere-websites/
