E commerciali stilose con CSS e jQuery

La e commerciale (&), ossia l'entità HTML & può essere usata a scopo decorativo come elemento di congiunzione tra due parole. In questo articolo vedremo come aggiungere un tocco di stile a questo carattere usando i CSS e jQuery.

Partiamo da un'intestazione HTML:

<h1>jQuery &amp; CSS</h1>​

Con jQuery dobbiamo inserire il carattere all'interno di un elemento inline per assegnargli degli stili:

var setAmp = function(element) {
    
    element = $(element);
    var html = element.html();
    return element.html(html.replace('&amp;', '<span class="amp">&amp;</span>'));
};

setAmp('h1');

Quindi creiamo i nostri stili CSS:

h1 {
    margin: 10px;
    font: normal 2em Arial, sans-serif;
}

.amp {
    font-family: Baskerville, 'Baskerville Old Face', 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
    padding: 4px 9px;
    background: #f0f0f0;
    border-radius: 50%;
    border: 1px inset #999;
}​

Potete visionare l'esempio finale in questa pagina.