Kindle-Test

Testen der CSS-Fähigkeiten des neuen Kindle-Dateiformats.

by Vlad

HTML

<p class="p1">Inhalt in einer Box mit abgerundeten Ecken. Das ist einfach</p>
<p class="p2">Inhalt in einer Box mit abgerundeten Ecken. Hinzugekommen ist ein Schatten für die Box</p>
<p class="p3">Zu der ganzen Sache gesellt sich noch der Schatten für den Text hinzu.</p>
<p class="p4">Und zu guter Letzt auch ein Hintergrund-Verlauf via CSS3.</p>

CSS

.p1 {
    background: #ddd; border: 1px solid #aaa; border-radius: 9px;
    padding: 3em; width: 70%; margin: auto;}
.p2 {
    background: #ddd; border: 1px solid #aaa; border-radius: 9px;
    padding: 3em; width: 70%; margin: 2em auto;
    box-shadow: 3px 2px 5px #777;}
.p3 {
    background: #ddd; border: 1px solid #aaa; border-radius: 9px;
    padding: 2em; width: 70%; margin: 2em auto;
    box-shadow: 3px 2px 5px #777;
    font-size: 1.5em; color: #333; text-shadow: 2px 2px 3px #333;}
.p4 {
    background: #ddd; border: 1px solid #aaa; border-radius: 9px;
    padding: 2em; width: 70%; margin: 2em auto;
    box-shadow: 3px 2px 5px #777;
    font-size: 1.5em; color: #fff; text-shadow: 2px 2px 3px #333;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#990000), color-stop(50%,#2989d8), color-stop(100%,#007799));
    background: linear-gradient(to bottom, #990000, #007799);}
p {page-break-after: always;}