Border-image

Bordi alle immagini Se finora siamo stati sempre limitati nella gestione dei bordi nei fogli di sitle, con l’avvento dei […]
Border-image

Bordi alle immagini

Se finora siamo stati sempre limitati nella gestione dei bordi nei fogli di sitle, con l’avvento dei css3 abbiamo la possiblità di inserire un’immagine come bordo e replicarla a nostra scelta.

Come strutturare l’immagine da replicare

Prima di entrare nel dettaglio del codice, ti posto di seguito il risultato del mio test, in modo tale da “afferrare” più velocemente il concetto della ripetizione dell’immagine:

Come puoi notare, il bordo dell’elemento è costituito da un susseguirsi di rombi ricavati dall’immagine a destra, che sarà quella specificata nella url della proprietà. In parole semplici l’immagine quadrata a destra viene scomposta in nove parti uguali, tutte sono utilizzate per riprodurre il bordo dell’elemento a eccezione della parte centrale. Quindi, nel mio caso, i rombi arancione scuro si posizionano agli angoli dell’elemento e quelli centrali vengono ripetuti fino al necessario.

Per creare l’immagine puoi utlizzare un qualsiasi software di grafica. Nell’esempio ho utilizzato quella di default del sito border-image-generator, un ottimo sito per creare bordi ripetuti, tutto gestibile da un pannello con tanto di anteprima in tempo reale 😉

Html e Css

<div id="content">
    <p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato.</p>
</div>
#content{
    -moz-border-image: url(border.png) 27 round;
}
  • url(border.png) definisce il percorso dell’immagine da utilizzare come sfondo.
  • 27 corrisponde alla dimensione di ogni singolo quadratino della griglia. Questo valore stabilisce a che larghezza e altezza il browser deve tagliare l’immagine per poi riprodurla e creare il bordo. Nel mio caso il valore è unico perchè mi ritrovo una griglia simmetrica, infatti ogni quadratino ha larghezza e altezza pari a 27 pixel (il valore può essere espresso anche in percentuale). Ciò non toglie che si possano avere quattro valori differenti. Es. 27 22 35 78.
  • round indica la modalità con cui l’immagine viene ripetuta per creare il bordo. I valori possibili sono: stretch (la parte dell’immagine è allungata fino a ricoprire l’intero bordo),  repeat (le dimensioni dell’immagine non è alterata, viene ripetuta quanto necessario a ricoprire l’intero bordo) e round (molto simile a repeat ma con una leggera alterazione dell’immagine che si adatta alla dimensione del bordo). Nel mio caso ho specificato un solo valore per tutti e quattro i lati dell’elemento, altrimenti è possibile specificare fino a due valori.

Compatibilità?

Naturalmente la proprietà border-image può essere implementate per via dei prefissi -webkit- e -moz- ed è compatibile con Chrome 2+, Firefox 3.5, Opera 10.5+ e Safari 3+

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github