HTML/Tutorials/Formulare/Gestaltung mit CSS
Informationen zu diesem Text
- Lesedauer
- 30min
- Schwierigkeitsgrad
- mittel
- Vorausgesetztes Wissen
- Grundkenntnisse in
• HTML
• CSS
Für die bedienungsfreundliche Nutzbarkeit von Webseiten spielt ein gutes UI-Design eine große Rolle. Nur wenn UI-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 UI-Elemente wie Call-To-Action-Buttons und Flip Flop-Schalter mit den passenden HTML-Elementen erzeugen und mit CSS gestalten.
Inhaltsverzeichnis
Vorüberlegungen[Bearbeiten]
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>
semantisches HTML[Bearbeiten]
Buttons sind im Allgemeinen Bedienfelder, mit denen eine Aktion ausgelöst werden kann. Für sie sollten stets die semantisch passenden Elemente wie das button-Element verwendet werden. Gründe für seinen Einsatz werden im Selfhtml Blog-Artikel input oder button für submit-Elemente? genannt.
Oft gibt es aber auch mehrere Buttons, die mehrere Möglichkeiten zur Auswahl bieten. Hier würde eine Verwendung von button-Elementen zwingend den Einsatz von JavaScript zur Auswertung erfordern. Eine Verwendung des select-Elements oder von Radio-Buttons bzw. Checkboxen ist auch ohne JavaScript oder CSS noch funktionsfähig. So können Auswahlmenüs und auch Toggle-Buttons realisiert werden.
In den Kapiteln Radio-Buttons verstecken und FlipFlop-Schalter erfahren Sie, wie solche Radio-Buttons und Checkboxen mit CSS gestylt werden können.
Darstellung mit CSS[Bearbeiten]
Auch wenn es noch einige Stimmen gibt, die das Styling von Buttons ablehnen, ist es doch sinnvoll die Gestaltung von UI-Elementen an verschiedene Viewports und das Look and Feel der Webseite anzupassen.
Besonders bei mobilen Geräten mit sehr kleinen Viewports ist es sinnvoll, Buttons nicht in der Standard(schrift)größe, sondern größer darzustellen, da Finger und Daumen mehr Platz benötigen als ein Mauszeiger.
Verwenden Sie als Hintergrund die Akzentfarbe, um Buttons schnell und intuitiv erkennbar zu machen.
Anwendungsbeispiele[Bearbeiten]
<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">✔ Speichern!</button>
<button type="button" class="abbruch" >✘ Abbrechen!</button>
<button type="button" class="hinweis weiss">
<img src="Mülleimer.png" alt=""> Löschen!
</button>
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[Bearbeiten]
Bonbon-Buttons zeigen die Möglichkeiten der Gestaltung durch CSS.
.bonbon {
width: 200px;
height: 60px;
background: yellow; /* old browsers */
background: linear-gradient(to bottom, white, yellow);
box-shadow: inset 0px 0px 6px #fff,inset 0px -1px 6px #fff;
border: 1px 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:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
Diese Bonbon-Buttons dienen eher dazu, die Möglichkeiten von CSS3 aufzuzeigen, als dass sie praktisch anwendbar wären.
Ghost-Buttons[Bearbeiten]
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 class="choice">
<button id="win">Windows</button>
<button id="and">Android</button>
<button id="mac">Apple</button>
</p>
p.choice {
margin-top: 6em;
}
button {
position: relative;
margin: 2em;
padding: .5em 1em;
width: 8em;
background: transparent;
color: white;
border: 1px solid white;
border-radius: 3px;
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;
}
Radio-Buttons verstecken[Bearbeiten]
Wenn Sie den Benutzern Ihrer Webseite eine Auswahl aus mehreren Möglichkeiten anbieten, ist ein Menü aus Radio-Buttons semantisch die beste Wahl. Häufig soll dies aber an das Seitendesign angepasst werden. Im folgenden Beispiel werden die Radio-Buttons versteckt – die Funktionalität bleibt jedoch erhalten.
<div class="toggle-buttons">
<input type="radio" id="b1" name="group-b"/>
<label for="b1">Pizza</label>
<input type="radio" id="b2" name="group-b"/>
<label for="b2">Pasta</label>
<input type="radio" id="b3" name="group-b" />
<label for="b3">Pommes</label>
</div>
type="radio". Über den gemeinsamen name ist festgelegt, dass nur eine Auswahl erlaubt wird.
Die folgenden label-Elemente werden über das for-Attribut mit der id des zugehörenden input-Elements verbunden. Damit können Sie den Radio-Button auch mit einem Klick auf die Erklärungen auswählen..toggle-buttons input[type="radio"]{
visibility:hidden;
}
.toggle-buttons label {
border: 1px solid #333;
border-radius: 0.5em;
padding: 0.5em;
}
.toggle-buttons input:checked + label {
background: #ebf5d7;
color: #5a9900;
box-shadow: none;
}
input[type="radio"] werden alle Radio-Buttons mit visibility: hidden; ausgeblendet.
Labels erhalten einen (abgerundeten) Rand, der durch ein padding von 0.5em vergrößert wird.
Bei der Auswahl eines Radio-Buttons wird über den Nachbarselektorinput:checked + label das dazugehörende Label grün eingefärbt. Ein evtl. vorher angeklickter Button verliert dann seine Pseudoklassechecked und fällt wieder in seinen Urzustand zurück.FlipFlop-Schalter[Bearbeiten]
Ein FlipFlop-Schalter oder toggle-Button ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.
<label>
An-/Aus-Schalter
<input type="checkbox">
<span></span>
</label>
type="checkbox", das zusammen mit einem span-Element in einem label-Element verschachtelt ist..toggle label {
position: relative;
display: inline-block;
width: 10em;
height: 3.5em;
}
.toggle input {
display: none;
}
.toggle .slider { /* Grundfläche */
position: absolute;
cursor: pointer;
top: 1.5em;
left: 2em;
width: 4em;
height: 2em;
background-color: #c32e04;
border-radius: 1em;
transition: all .3s ease-in-out;
}
.toggle .slider::before { /* verschiebbarer Button */
position: absolute;
content: "";
height: 1.6em;
width: 1.6em;
left: .2em;
bottom: .2em;
background-color: white;
border-radius: 50%;
transition: all .3s ease-in-out;
}
Die Checkbox wird mit display: none ausgeblendet. Allerdings ist sie trotzdem funktionsfähig und ihr Zustand kann mit einem Klick auf das Label aktiviert werden.
Die Grundfläche des Sliders span class="slider" wird absolut unterhalb der Beschreibung positioniert.
.slider::before{} wird nun ein Pseudoelement absolut über die Grundfläche positioniert. Es erhält die Form eines kreisförmigen, weißen Buttons..toggle input:checked + .slider {
background-color: #5a9900;
}
.toggle input:checked + .slider::before {
transform: translateX(1.9em);
}
.text .slider::before { /* Text vor dem FlipFlop-Schalter */
position: absolute;
content: "AUS";
color: #c32e04;
font-weight: bold;
height: 1.6em;
left: -2.5em;
bottom: .2em;
}
.text input:checked + .slider::after { /* Text hinter dem FlipFlop-Schalter */
position: absolute;
content: "AN";
color: #5a9900;
left: 4.5em;
}
Siehe auch:
- callmenick: CSS Toggle Switch Examples
- jsfiddle.net/tovic/ve8mU/light sehr elegante Kippschalter von Taufik Nurrohman
Siehe auch[Bearbeiten]
Weblinks[Bearbeiten]
- Raised Button
- 50 CSS3 button examples with effects & animations
- Radiobox.css: CSS Animations for Radio Buttons
hinweiszugewiesen, 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 utf-8-Symbole zur Veranschaulichung.