Ik denk niet dat het nodig is om uit leggen wat een boxpunch is. Op dit moment kijk je er naar ééntje. Om het boxpunch effect te bereiken moet je de stylesheet (die hieronder staat) en de html-code (bedoeld voor de body-sectie) op jouw pagina plaatsen. Om het boxpunch-effect te demonstreren moet er zóveel tekst in de div worden geplaatst, dat de tekst "langer" is dan de hoogte van de punch. Is dit niet het geval, dan gaat het hele punch-effect verloren. Om nog wat extra tekst te produceren zal ik nog melden dat je de "punch" makkelijk aan kunt passen. De kleuren en afmetingen kan je vinden in de stylesheet van de boxpunch. Rest mij nog te melden dat deze box-punch-procedure de pagina niet vertraagt bij het inladen. Er is immers geen enkel script gebruikt, of moesten er graphics ingeladen worden. De procedure werkt cross browser.
<style type="text/css">
.boxpuch_container{
width:700px;
background:#dddddd;
color:inherit;
padding-bottom:2em}
.boxpuch_container p{
margin:0px;padding:1.5em 2em 0 2em}
.boxpunch{
float:left;
font-size:800%;
width:1em;
padding:0.1em 0.1em 0;
background:#dddddd;
color:inherit;
border:solid #ffffff;
border-width:0 0.2em 0.2em 0;
margin:0 0.5em 0.2em 0}
</style>
<div class="boxpuch_container">
<div class="boxpunch">♨</div>
<p>
Hier komt de inhoud.
</p>
</div>