Teaser mit 3D-Optik im Header

Siehe auch: http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html http://maddesigns.de/wp-content/uploads/2010/12/teaserboxen-beispiel1.html

by Jens Grochtdreis

HTML

<div class="teaserbox">
            <h4>
                Block teaser blue
            </h4>
            <div class="teaserbox-inner teaser blue">
                <p>
                    Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht?
                </p>
            </div>
        </div>

CSS

.teaserbox-inner {
                background: -moz-linear-gradient(top, #8598aa 0, #fff 15%, #fff 83%, #ebebeb 99%, #fff 100%);
                background: -webkit-gradient(linear,  left top, left bottom, 
                                      color-stop(0, #8598aa),
                                      color-stop(0.15, #fff),
                                      color-stop(0.83, #fff),
                                      color-stop(0.99, #ebebeb),
                                      color-stop(1, #fff));
                background: linear-gradient(top,  #8598aa 0, #fff 15%, #fff 83%, #ebebeb 99%, #fff 100%);
                padding: 10px;

                border-radius: 5px; 
            }
            .teaserbox {
                background: -moz-linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);
                background: -webkit-gradient(linear, left top, left bottom, 
                                      color-stop(0, #fff),
                                      color-stop(0.67, #fff),
                                      color-stop(1, #d2d2d2));
                background: linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);
                padding: 1px;
                position: relative;
                border-radius: 5px; 
            }
            .teaserbox:after {
                content: "\0020"; display: block; 
                position: absolute;
                bottom: -24px;
                left: 0; 
                width: 218px;
                height: 30px;
                z-index: -2;
                background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 25%, #e0e0e0 30%, #f3f3f3 40%, #fff 100%);
                background: -webkit-gradient(linear, left top, left bottom, 
                                      color-stop(0, #fff),
                                      color-stop(0.25, #efefef),
                                      color-stop(0.3, #e0e0e0),
                                      color-stop(0.4, #f3f3f3),
     ...

JavaScript

// Siehe auch: 
// http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html

// http://maddesigns.de/wp-content/uploads/2010/12/teaserboxen-beispiel1.html