Leider ist eines meiner Kinder krank, deshalb kann ich heute nicht kommen - tut mir leid.

Bitte erledigen Sie diese Aufgabe, gerne auch zuhause:

1) CSS-Code generieren Die Website CSSmatic erlaubt es, auf einfache Weise anspruchsvolleres CSS zu erstellen. Rufen Sie die Website auf (cssmatic.com) und experimentieren Sie mit den Einstellungen. Beachten Sie den generierten CSS-Code (den Sie einfach per Copy-Paste in ein beliebiges Stylesheet einfügen könnten, z.B. in eine p-Definition in Dreamweaver).

Besonders sinnvoll sind die Bereiche Border-Radius (hier kann man z.B. aus eckigen Bildern runde mache) und Box-Shadow (Schatten finden Sie im Web überall).

2) Funktionalität ausprobieren Gehen Sie zu CSSDesk.com und probieren Sie Ihren Code aus. Sie müssen also im Feld oben links HTML-Code eingeben (z.B.

HTML-Code
 
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 

Im Feld unten links verwenden Sie den generierten CSS-Code. Dabei müssen Sie angeben, um welche Tags es sich handelt. Beispiel:

CSS-Code
 
p {
-webkit-box-shadow: 10px 10px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 7px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 7px 0px rgba(0,0,0,0.75);
}
 
h1 {
border-radius: 37px 37px 37px 37px;
-moz-border-radius: 37px 37px 37px 37px;
-webkit-border-radius: 37px 37px 37px 37px;
border: 8px ridge #ff0aff;
}
 

Viel Spaß dabei! und:

Schöne Weihnachten und einen guten Rutsch!!!