Scripts

CSS3 Easy Newsbox

/ / 8.494 views

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, 1.430 hits)

You can use the CSS3 Easy Newsbox Script wherever you want. Have fun!

Sag mir was du denkst

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>