HTML and CSS Reference
In-Depth Information
li input[type=checkbox] {
-webkit-appearance: none;
float: left;
width: 25px;
height: 25px;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0,rgba(0,0,0,.2)),
color-stop(1,rgba(0,0,0,.1)));
border-radius: 2px;
border: 1px solid rgba(0,0,0,.4);
box-shadow: 0 1px 1px rgba(0,0,0,.3) inset;
}
li.done input[type=checkbox] {
background: url(../bilder/erledigt.png) no-repeat center;
border: none;
}
#add input {
border-radius: 4px;
color: #000;
font-weight: bold;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0,rgba(255,255,255,.9)),
color-stop(1,rgba(255,255,255,.4)));
border-radius: 2px;
border: 1px solid rgba(0,0,0,.4);
box-shadow: 0 1px 1px rgba(0,0,0,.3) inset;
}
7
Listing 7.3
Das Skin-Stylesheet sorgt für die Ästhetik.
Die WebApp soll sich von der typischen Ästhetik eines Computerprogramms abhe-
ben und einen eigenen Charakter bekommen. Dafür sorgen Sie mit einem bild-
schirmfüllenden Hintergrundbild. Der Einfachheit halber haben wir hier den
Holzfußboden in Johannes Berliner Büroküche mit dem iPhone abfotografiert
(Abbildung 7.8). Stattdessen lieber einen Sonnenuntergang am Strand oder einen
moosigen Waldboden? Vielleicht ist Ihr Küchenboden ebenso gut geeignet? Wählen
Sie ein Motiv, das Ihnen gut gefällt und welches Sie gerne anschauen. Erledigte Ein-
träge bekommen einen schönen grünen Haken, der sie von unerledigten Aufgaben
abhebt.
Search WWH ::
Custom Search