fenomeno.it

Chi usa WordPress con il plugin CodeHighlighter non avrà problemi a mettere in evidenza parti di codice o paragrafi nel proprio blog, ma tutti gli altri che devono utilizzare i CSS in un sito, magari statico potrebbero trovare utile questo piccolo tutorial.

Con poche righe di css creeremo un rettangolo con bordo tratteggiato, sfondo giallino e un'immagine che fa da introduzione alla sezione. Mettiamoci subito all'opera.

Per prima cosa creiamo un'immagine che verrà visualizzata immediatamente sopra questa sezione. Qui vedete quella creata da me (download immagine).

Creata l'immagine a nostro piacimento possiamo definire le nostre classi css in questo modo

 
div.code{
width: 450px;
}
div.code p.codecont{
border: 1px dashed #333;
background-color: #FFFFE6;
margin:0;
padding: 8px 0 8px 8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
div.code p.codeimg{
background-image:url(tag_code.gif);
background-repeat:no-repeat;
background-position:0 0;
display:block;
margin:0;
height:29px;
}

notare che il valore di height nella class div.code p.codeimg deve essere pari all'altezza dell'immagine da voi creata.
Passiamo ora al codice HTML che risulterà così

 
<div class="code">
<p class="codeimg">&nbsp;</ p>
<p class="codecont">IL VOSTRO CONTENUTO</ p>
</div>
 

Ecco qua, in poche semplici righe abbiamo creato uno spazio gradevole per evidenziare il nostro codice o ad esempio i nostri versi.

Sicuramente esistono mille modi diversi per farlo, molto interessante per chi scrive molto codice, come me, le soluzioni che utilizzano il GeSHi - Generic Syntax Highlighter, ma questa semplice soluzione si è rivelata efficace e di facile personalizzazione.

Guarda la pagina con l'esempio. CSS per codice