animated bullets
waarom saai
als het ook
mooier
kan...
Het nadeel van het animeren van bullets is, dat het inladen van graphics http-requests "kosten". Je kan de "schade" wel tot ongeveer NUL reduceren door er voor te zorgen dat de img in één (high-speed) tcp-packet "past". Dat doet het geanimeerde gif-plaatje van dit voorbeeld. Het is slecht 131 bytes "groot", en dat is zeer gering voor een geanimeerde gif... Plaats de html-code in de body-sectie van de pagina, en de stylesheet id de "head". De geanimeerde bullet op deze pagina heeft een groene kleur. Als je wilt heb ik voor jou een blauwe versie, gele versie, groene versie, oranje versie, paarse versie, rode versie en een turkooise versie om naar jouw webruimte te kopieren.
<style type="text/css">
.geanimeerde-bullet{
color:#aabd88;
background:#060;
font-size:90%}
.geanimeerde-bullet a{
font-weight:bold;
margin-bottom:-1.35em;
line-height:1.8em;
padding-left:2.3em;
border-left:1em solid #040;
border-right:1em solid #040;
border-bottom:8px solid #030;
border-top:2px solid #070;
display:block;
width:13em;
text-decoration:none;
color:#aabd88;
background:#050}
.geanimeerde-bullet a:hover{
background:#050 url('animated-bullet.gif') no-repeat 10px center;
border-right:1em solid #004900;color:#bbbbbb}
.geanimeerde-bullet a:active,.geanimeerde-bullet a:focus{
border-right:1em solid #005000}
</style>
<p>
<span class="geanimeerde-bullet">
<a href="/manuals/css/animated-bullet.html">animated bullets</a><br />
<a href="/manuals/css/animated-bullet.html">waarom saai</a><br />
<a href="/manuals/css/animated-bullet.html">als het ook</a><br />
<a href="/manuals/css/animated-bullet.html">mooier</a><br />
<a href="/manuals/css/animated-bullet.html">kan...</a><br />
</span>
</p>