Creare effetto legend tramite CSS
Posted by Dibi Store Wed, 12 Sep 2007 07:38:00 GMT
Se avete mai visitato il sito sitepoint avrete sicuramente notato il modo in qui vengono posizionati i titoli in h3, creando il tipico effetto legend.
Ciò viene reso reso possibile grazie all'uso dei CSS e i posizionamenti assoluti e relativi.
Per prima cosa iniziamo scrivendo la parte di codice che ci interessa:
Ciao Mondo!
testo di esempio paragrafo
Per rendere il tutto più gradevole, aggiungiamo un pizzico di magia tramite CSS:
div {
border:1px solid #FD8CF4;
padding:15px;
position:relative;
}
h3 {
background:#fff;
color:#FD8CF4;
font-size:0.9em;
margin:0pt 15px 0pt 0pt;
padding:2px 1em;
position:absolute;
right:-1px;
}
Abbiamo innanzitutto dichiarato il div contenitore con posizionamento relativo, e gli abbiamo aggiunto un pò di padding in modo da poter poi dichiarare il posizionamento del titolo.
Nel titolo abbiamo dichiarato un colore di sfondo (importante),il relativo margine e posizionamento. Volendo si può anche aggiungere un immagine, come avviene nel sito della sitepoint.
Il risultato è assicurato!
