Für alle die eine simple Newsbox für ihre Website benötigen, gibts nun die CSS3 Easy Newsbox. Die Box benötigt kein Javascript (no Javascript) & funktioniert in sämtlichen Browsern.
Je nach Browser werden manchmal Schatten, Verläufe oder Rundungen ignoriert – im Endeffekt sieht es aber in allen Browsern noch ok aus.
Example
Check out the Example | Beispiel ansehen
Works with: IE6, IE7, IE8, IE9, Firefox, Chrome, Safari and Opera
The HTML Part
<div id="newsbox"> <a href="#link1" title="Rafael Nadal" class="b1"><span><strong>Rafael Nadal</strong>Der Sandplatzkönig und die Nr.1 der Welt!</span><img src="box1.jpg" width="256" height="192" alt=""/></a> <a href="#link2" title="Novak Djokovic" class="b2"><span><strong>Novak Djokovic</strong>Der Serbe mit einer der längsten Siegesserien der Open Era.</span><img src="box2.jpg" width="256" height="192" alt=""/></a> <a href="#link3" title="Roger Federer" class="b3"><span><strong>Roger Federer</strong>16. Grand Slam Siege und der wohl beste aller Zeiten.</span><img src="box3.jpg" width="256" height="192" alt=""/></a> </div>
The CSS Part
#newsbox {width:500px; height:192px; overflow:hidden; position:relative; background:url(box0.jpg) no-repeat; box-shadow:1px 2px 2px 2px #666; -webkit-box-shadow:1px 2px 2px 2px #666; -moz-border-radius:15px; margin:30px auto;}
#newsbox a {outline:none; text-decoration:none;}
#newsbox a span {position:absolute; z-index:1; width:214px; height:55px; padding:5px 15px; color:#333; left:256px; background:#f5f5f5; background:-moz-linear-gradient(top,#f5f5f5,#c0c0c0); background:-webkit-linear-gradient(top,#f5f5f5,#c0c0c0);}
#newsbox a strong {text-transform:uppercase; display:block;}
#newsbox a.b1 span {margin-top:0px;}
#newsbox a.b2 span {margin-top:65px;}
#newsbox a.b3 span {margin-top:130px;}
#newsbox a img {display:none; position:absolute; border:none;}
#newsbox a:hover img, #newsbox a:focus img {display:block;}
#newsbox a:hover span, #newsbox a:focus span {background:#d60000; background:-moz-linear-gradient(top,#d60000,#970000); background:-webkit-linear-gradient(top,#d60000,#970000); left:230px; width:222px; padding:5px 25px 5px 25px; color:#fff; border-top-left-radius:1500px; border-bottom-left-radius:1500px;}
Download the CSS3 Easy Newsbox Example
CSS3 Easy Newsbox (116,9 KiB, 2.217 hits)
You can use the CSS3 Easy Newsbox Script wherever you want. Have fun!
