Il PNG 9-Patch può funzionare in qualche modo con i CSS sui browser

Ho appena scoperto il 9-Patch PNG (somefile.9.png) mentre lavoravo su un’app per Android e sono rimasto piuttosto sorpreso dalla quantità di lavoro e file che questa tecnologia ha salvato.

C’è un modo per implementare questa tecnologia sui normali browser in qualche modo? (usando una sorta di plugin jQuery, o in qualche altro modo ..). se funzionerà con i CSS – potrebbe essere davvero un grande miglioramento …

border-image from CSS3 è la corrispondenza più vicina:

Supporto per browser: http://caniuse.com/border-image

Un generatore utile: http://border-image.com/


Per quanto riguarda jQuery, ho trovato questo da Googling per “ridimensionamento a jquery 9 slice” :

http://code.google.com/p/scale9grid/

(Il ridimensionamento a 9 sezioni è il termine Adobe Flash per qualcosa di simile )

Il plugin scale9grid genera più oggetti DOM e si estende solo sul ridimensionamento della finestra o quando il ridimensionamento viene triggersto manualmente da JavaScript.

Non puoi usare l’immagine sprite perché non riesci a ripensare a una parte dell’immagine. Devi ritagliare 8 pezzi dell’immagine (4 angoli, 4 lati) e devi avere un colore che verrà applicato al centro dell’immagine una volta streched.

Nota importante è che hai una dimensione minima ogni volta che usi le tecniche per allungare un’immagine bitmap. Puoi solo allungarlo più del minimo. Questo minimo dipende dalle parti ritagliate. Se l’angolo è 5×5 pixel. Il minimo nello scenario migliore sarà 10×10 pixel per l’intero elemento.

Posso suggerire la mia soluzione. È un plugin jQuery (minisito): http://donreptile.com/plugins/slices9.min.js supporta gli sprite delle immagini. http://donreptile.com/plugins/demo.html qui sta funzionando demo. Ho provato a realizzare il plugin 9-slice più corretto, che mantiene intatti gli angoli, i bordi orizzontali scale-x, i bordi verticali scale-y e middle vengono scalati xey. Dà effetti molto migliori rispetto allo sfondo del bordo.