Formulare/Gestaltung mit CSS
Für die bedienungsfreundliche Nutzbarkeit von Webseiten spielt ein gutes UI-Design eine große Rolle. Nur wenn interaktive Elemente schnell und intuitiv erkannt und bedient werden können, werden die Nutzer Ihrer Webseite die vorhandenen Angebote nutzen.
In diesem Kapitel lernen Sie, wie Sie Call-To-Action-Buttons mit den passenden HTML-Elementen erzeugen und mit CSS an verschiedene Viewports und das Look and Feel der Webseite anpassen.
Inhaltsverzeichnis
Vorüberlegungen
Im Forum gibt es immer wieder Fragen, wie man Buttons "unauffälliger gestalten könne".[1], was Gunnar Bittersmann zu folgendem Beispiel motivierte:
<p>Vielleicht nicht die beste Idee, einen <button class="seamless">Button</button> nicht aussehen zu lassen wie einen <button>Button</button>.
</p>
Buttons und andere Eingabeelemente sollten immer sowohl mit Maus als auch Tastatur ansteuer- und bedienbar sein!
Wartungsfreundliches CSS
Code so übersichtlich zu gestalten, dass er später leicht les- und änderbar ist, ist eine der größten Herausforderungen im Webdesign. Einer der wichtigsten Grundsätze, um Code wartungsfreundlich zu gestalten, ist DRY ("Don't repeat yourself!"). So ist es sinnvoll CSS-Regelsätze weitgehend zusammenzufassen, um spätere Änderungen zentral vornehmen zu können.
Dieses Tutorial soll zeigen, wie Sie mit der Verwendung des relativen Längenmaßes em gegenüber einem Einsatz von festen Pixelwerten flexible und später einfach zu ändernde Layouts erreichen. So kann die Anzahl der Stellschrauben bei späteren Änderungen weiter reduziert werden. Es basiert auf einem Beispiel von Lea Verou aus ihrem Buch CSS-Secrets.[2]
Button mit festen Pixelwerten
button {
padding: 6px 16px;
border: 1px solid green;
background: #5a9900 linear-gradient(#8db243, #5a9900);
border-radius: 0 8px 8px;
box-shadow: 0 lpx 5px gray;
color: white;
text-shadow: 0 -1px 1px #333;
font-size: 20px;
line-height: 30px;
}Der Button enthält CSS-Festlegungen mit festen Pixelwerten.
Bei einer späteren Änderung der Größe des Buttons müssen die einzelnen Werte jeweils für sich geändert werden.
Bezug auf die Schriftgröße
Einige CSS-Werte stehen nicht für sich alleine, sondern beziehen sich auf andere, vorher getroffene Festlegungen. So ist der Zeilenabstand direkt von der Schriftgröße abhängig. Wenn die Bedeutung des Buttons hervorgehoben werden soll, kann er etwas größer dargestellt werden. Im oberen Beispiel müssen dafür sowohl die CSS-Eigenschaften font-size als auch line-height angepasst werden, hier werden beide nun miteinander verknüpft:
button {
font-size: 20px;
line-height: 1.5;
}
Die Zeilenhöhe passt sich nun automatisch an eine Anpassung der Schriftgröße an. Ein Wert von 150% (kurz: 1.5) lässt genug Platz nach oben und unten.
Bei einer etwaigen Änderung der Schriftgröße der Elternelemente, bzw. des gesamten Dokuments muss hier der Wert für die Schriftgröße des Buttons entsprechend angepasst werden. Besser ist es, relative Längenmaße auch für die Schriftgröße zu verwenden:
button {
font-size: 125%;
line-height: 1.5;
}
Die Schriftgröße des Buttons wird nun auf 125% des vererbten Werts festgelegt. (Der Wert von 125% entsteht aufgrund der Beobachtung, dass die voreingestellte Schriftgröße in den meisten Browsern 16px beträgt.)
em oder rem fest.Eine Standardschriftgröße sollte, wenn überhaupt, nur zentral für das html oder body-Element festgelegt werden.
skalierbare Werte für Ränder und Schatten
Wenn die Schriftgröße nun geändert wird, vergrößert sich der Button. Gleichzeitig bleiben die auf die originale Größe abgestimmten Effekte unverändert, sodass die Proportionen nicht mehr stimmen und der Button „komisch“ aussieht.
Abhilfe schafft eine Verknüpfung der Ränder und Schatten mit der Schriftgröße:
button {
padding: .4em .8em;
background: #5a9900 linear-gradient(#8db243, #5a9900);
border: thin solid green;
border-radius: 0 .4em .4em;
box-shadow: 0 .2em .4em gray;
color: white;
text-shadow: 0 -.05em .05em #333;
font-size: 125%;
line-height: 1.5;
}
In diesem Beispiel wurden alle Werte bis auf die Dicke des Rands in em notiert.
Bei einer späteren Änderung der Schriftgröße skalieren die Werte für (Innen)-Abstände, Ränder und Schatten einfach mit.
Farbgestaltung
Neben der Skalierbarkeit der Abmessungen sollte auch Augenmerk auf die Farbgestaltung gelegt werden. Häufig gibt es mehrere Buttons mit unterschiedlichen Funktionen auf der Webseite.
Im derzeitigen Zustand müssen die vier Deklarationen für border-color, background, box-shadow und text-shadow geändert werden. Dabei bleibt der Arbeitsaufwand für ein Berechnen der Farbwerte der einzelnen Schattierungen und Farbtöne noch unberücksichtigt. Der verwendete graue Schatten funktioniert nur bei einem weißen Hintergrund, auf einem farbigen Hintergrund wäre er wirkungslos.
Diese Mühe können Sie sich durch die Verwendung von halb-transparentem Weiß bzw, Schwarz für hellere und dunklere Farbtöne sparen:
button {
background: #3839ab linear-gradient(hsl(0 0 100% .2), transparent);
border: thin solid rgb(0 0 0 / .1);
box-shadow: 0 .2em .4em rgb(0 0 0 / .5);
color: white;
text-shadow: 0 -.05em .05em rgb(0 0 0 / .5);
}
button.cancel {
background-color: #c32e04;
}
button.ok {
background-color: #5a9900;
}
button:focus,
button:hover {
box-shadow: 0 .3em 0.6em rgb(0 0 0 / .8);
}
Der farbige Hintergrund wird nicht mehr mit drei Farbwerten realisiert. Der erste Wert diente ursprünglich nur als Fallback, falls der Verlauf nicht dargestellt werden konnte. Nun erfüllt er seine Funktion als Hintergrundfarbe, über die nun ein Verlauf gelegt wird. Dieser besteht aus einem weißen Farbwert mit einer Transarenz im Alphakanal von 0.2 und dem Wert transparent. Dabei wurde für den ersten Wert die hsl-Scheibweise verwendet.
Rand und die beiden Schatten werden rgb-Werte für Schwarz mit unterschiedlichen Transparenzwerten zugewiesen.
Die Farbgestaltung der beiden Buttons geschieht nun über einen einzigen Wert, die Hintergrundfarbe in background-color. Der in der zusammenfassenden Eigenschaft background notierte Verlauf nimmt diese Werte auf und färbt den Button entsprechend.
Wie oben erwähnt, werden durch CSS-Formatierungen die Default-Einstellugen für :hover und :focus deaktiviert. Diese wurden nur durch einen neuen Regelsatz für einen dunkleren Schatten ergänzt.
Anwendungsbeispiele
<h2>Einsatz von HTML-Elementen</h2>
span-Element mit Klasse:
<button type="button">Passwort <span class="hinweis">ändern!</span></button>
<button type="button"><strong>Passwort</strong> <span class="hinweis">ändern!</span></button>
<h2>Einbinden von Bildern</h2>
<button type="button" class="speichern">
<span aria-hidden="true">✔</span> Speichern!
</button>
<button type="button" class="abbruch">
<span aria-hidden="true">✘</span> Abbrechen!
</button>
<button type="button" class="hinweis weiss">
<img src="Mülleimer.png" alt=""> Löschen!
</button>
In der ersten Gruppe wird der Text unterschiedlich dargestellt. Im linken Button wurde dem span-Element die Klasse hinweis zugewiesen, wodurch die rote, fette Schrift erzeugt wird.
Rechts ist das erste Wort innerhalb eines strong-Elements und dadurch fett dargestellt.
In der zweiten Gruppe wurden die Buttons durch eingebundene Grafiken verständlicher.
Die beiden linken Buttons haben zusätzlich zum Text Unicode-Symbole zur Veranschaulichung.
Manche Unicode-Zeichen wie der hier verwendete HEAVY CHECK MARK 2714 haben in auf Mobilgeräten verwendeten Fonts eine eigene, nicht durch CSS zu ändernde Textfarbe. Hier wäre der Einsatz von SVG-Icons zu empfehlen.
- Siehe auch: → Unicode: Darstellung
Bonbon-Buttons
Bonbon-Buttons zeigen die Möglichkeiten der Gestaltung durch CSS.
.bonbon {
width: 13em;
height: 2em;
font-size: 1.25em;
background: linear-gradient(to bottom, white, yellow);
box-shadow: inset 0 0 .3em #fff, inset 0 -1px .3em #fff;
border: thin solid #5ea617;
border-radius: 1em;
margin: 1em;
}
.bonbon.rot {
background: linear-gradient(to bottom, white , red);
}
.bonbon.orange {
background: linear-gradient(to bottom, white, orange);
}
.bonbon:hover,
.bonbon:focus {
box-shadow: rgb(0 0 0 / 0.7) 0px .25em 1em, inset rgb(0 0 0 / 0.15) 0px -.5em 1em;
}
Verläufe im Hintergrund und Schlagschatten sorgen für einen 3D-Look.
Diese Bonbon-Buttons dienen eher dazu, die Möglichkeiten von CSS3 aufzuzeigen, als dass sie praktisch anwendbar wären.
Ghost-Buttons
Unter Ghost-Buttons versteht man Links oder Buttons, die auf ein Minimum reduziert werden. Sie verzichten auf typische Link-Effekte wie text-decoration, besitzen keine Hintergrundfarbe und haben meist nur einen sehr dünnen Rand. Damit sind sie quasi ein Schatten ihrer selbst – ein Geist.
Beim Berühren oder Drüberfahren mit der Maus ändern sie dann Text- und Hintergrundfarbe.
p.choice {
margin-top: 6em;
}
button {
position: relative;
margin: 2em;
padding: .5em 1em;
width: 8em;
background: transparent;
color: white;
border: thin solid white;
border-radius: .2em;
cursor: pointer;
transition: all ease 2s;
}
button:hover, button:active {
outline: none;
background: white;
color: darkblue;
}
button::before, button::after {
position: absolute;
width: 100%;
height: 150px;
left: 0;
color: white;
}
button::before {
content: " ";
top: -120px;
background: none center no-repeat transparent;
background-size: 30px 30px;
transition: all ease 1s;
transform: rotate(0deg);
}
button:hover::before {
background-size: 80px 80px;
transform: rotate(360deg);
}
button::after {
bottom: -520%;
transition: transform ease-in .5s, opacity ease-out 1s;
}
#win::before {
background-image: url(/images/2/29/Win.png);
}
#and::before {
background-image: url(/images/3/32/And.png);
}
#mac::before {
background-image: url(/images/6/69/Mac.png);
}
#win::after {
content: "7, 9, 10";
transform: translatex(-200%);
opacity: 0;
}
#win:hover::after {
transform: translatex(0);
opacity: 1;
}
#and::after {
content: "4.3, 4.4, 5.0";
transform: translatey(200px);
opacity: 0;
}
#and:hover::after {
transform: translatey(0);
opacity: 1;
}
#mac::after {
content: "iOS 7, iOS 8";
transform: translatex(200%);
opacity: 0;
transition: transform ease-in .5s, opacity ease-out 1s;
}
#mac:hover::after {
transform: translatex(0);
opacity: 1;
}
In diesem Beispiel werden die Buttons nach dem Vorbild sogenannter Ghost-Buttons gestaltet. Hierbei handelt es sich um sehr minimalistisch gehaltene Elemente, die sich gerade deshalb vom Hintergrund abheben.
Siehe auch
Weitere Artikel zum Thema em:
- CSS/Wertetypen/Maßangaben/relative Einheiten (em, rem, ex und ch)
- Vergessen Sie den Begriff Pixel!
- CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil
Weblinks
- ↑ SELF-Forum: Navigation nachbauen vom 24.02.2019 von Gunnar Bittersmann
- ↑ lea.verou.me: Publications
