| 

.NET C# Java Javascript Exception

4

Die Motivation

Die Motivation warum man eine iPhone ähnliche Benutzeroberfläche mit CSS(3) nachbauen möchte ist schnell erklärt:
Sowohl für WebApps als auch für Hybride Apps ist es mit unter wünschenswert, dass sie wie native Apps wirken. Daher die Motivation. Zugegeben es ist wirklich nicht schwer die iPhoneUI nachzubauen, wer sich mit CSS auskennt wird es auch ohne diesen Blogeintrag in kurzer Zeit hinbekommen, doch ich hoffe euch ein paar Tipps geben zu können wie ihr das Ganze sehr viel schmerzfreier und einfacher hinbekommt.
Das iPhone Design besteht freundlicherweise größtenteils aus Farbverläufen und ein paar Schatten. Also etwas, dass man dankenswerter Weise mit CSS sehr einfach realisieren kann. Anstelle direkt CSS zu schreiben werde ich jedoch Stylus (http://learnboost.github.com/stylus/) verwenden

Warum Stylus?

Kurz: weil man mit Stylus viel schneller und übersichtlicher arbeiten kann. Die lange Erklärung lautet: Stylus kann uns einiges an Arbeit ersparen, dank Stylus wird es am Ende Möglich sein mit nur einer Änderung die gesamte Farbwelt unserer UI zu verändern.

Genug Bla!

Fangen wir an. Um ein einfaches Beispiel zu haben und mir nicht zu viel Gedanken zu machen werde ich keine richtige Applikation bauen sondern einfach nur die relativ häufige Kombination aus Kopf und Fussleiste mit einer Liste nachbauen. Beginnen wir mit dem Farbverlauf der Kopf- und Fußleiste.
Der Farbverlauf besteht aus 4 verschiedenen Farben bzw. 2 separaten Farbverläufen. Kurz für das iPhone müssten wir folgenden CSS-Code schreiben:
.headbar {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #7F94B0),
color-stop(0.5, #889BB3),
color-stop(0.99, #B5C0CE),
color-stop(0.01, #6D83A1)
);
}
Nun hat aber jeder Button in der Kopf und Fussleiste die exakt den gleichen Farbverlauf nur halt mit anderen Farben. Das heisst wir müssen den Code x mal schreiben bzw. via copy-und-paste vervielfältigen. Das ist nicht nur bei späteren Änderungen sehr nervig. Doch hier kommt zum ersten mal Stylus richtig zum Einsatz. Wir schreiben einen MixIn, der uns die lästige Arbeit abnimmt
apple_like_gradient(color1, color2, color3, color4)
background-image -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, color3),
color-stop(0.5, color2),
color-stop(0.99, color1),
color-stop(0.01, color4)
)

Jetzt brauchen wir für Kopf- und Fussleiste sowie alle Buttons u.ä. nur noch die Farbwerte bestimmen und eintragen.
.headbar
apple_like_gradient(#B5C0CE, #889BB3, #7F94B0, #6D83A1)

Lasst uns noch fauler sein!

Mit unserem kleinen Helfer könnten wir nun beginnen die UI nachzubauen. Doch da ist eine 2. Sache die mich massiv stört! Wenn ich das blau meines ersten Entwurfs einmal satt habe müsste ich bei jedem Verlauf 4 neue Farben eintragen, da kommen schnell einige Farben zusammen (Kopf- und Fusszeile (4), aktives Listenelement (2), Button normal (4), Button aktiv (4) usw.). Mein Ziel ist es jedoch, dass ich an einer einzigen Stelle die Farbe verändere und nicht an 14 Stellen oder mehr. Hier kann Stylus seine Stärken richtig ausspielen. Anstelle die Farben alle einzeln einzutragen lasse ich Stylus alle benötigten Farben einfach berechnen. Dafür bietet mir Stylus bereits von Haus aus alles was ich brauche: Die Funktionen lighten(), darken(), saturate() und desaturate.

theme-color=rgb(127, 148, 176)

banner-color-3=theme-color
banner-color-1=lighten(banner-color-3, 25%)
banner-color-2=lighten(banner-color-3, 5%)
banner-color-4=darken(banner-color-3, 10%)

button-color-3=darken(theme-color, 20%)
button-color-4=darken(button-color-3, 10%)
button-color-1=lighten(button-color-3, 25%)
button-color-2=lighten(button-color-3, 5%)

main-background-color=desaturate(lighten(theme-color, 55%),80%)

active-li-color-2=saturate(theme-color, 300%)
active-li-color-1=darken(active-li-color-2, 25%)

body
background-color main-background-color

.headbar
apple_like_gradient(banner-color-1, banner-color-2, banner-color-3, banner-color-4)

.button
apple_like_gradient(button-color-1, button-color-2, button-color-3, button-color-4)

ul li:active
background-image -webkit-gradient( linear, left bottom, left top, color-stop(0, active-li-color-1), color-stop(1, active-li-color-2))


In dem ich einge Male die Farbe aufhelle, ein anderes mal abdunkele und die Farbsättigung hoch oder runter schraube kann ich wie gewünscht die komplette Farbwelt meines UIs an einer einzigen Stelle (theme-color) kontrollieren.

theme-color=rgb(127, 148, 176)
theme-color=green
theme-color=orange
development css-stylus
Weitere News:
Schreibe einen Kommentar:
Themen:
css-stylus development
Entweder einloggen... ...oder ohne Wartezeit registrieren
Benutzername
Passwort
Passwort wiederholen
E-Mail