Homepage » Coding » La proprietà CSS3 Border-Image rende le foto davvero fantastiche!

    La proprietà CSS3 Border-Image rende le foto davvero fantastiche!

    Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

    La creazione di bordi non è una novità HTML & CSS; siamo stati in grado di aggiungere bordi fin dall'inizio. Potrebbe essere stato familiare con bordi solidi, bordi tratteggiati, bordi tratteggiati e così via.

    Ma, con la nuova proprietà border-image CSS3, la creazione di bordi su elementi HTML sta diventando più avanzata; beh, in parole semplici, ora siamo in grado di aggiungere un bordo usando un'immagine come fonte che ci permetterà di aggiungere bordi più attraenti. Bene, ora vediamo come funziona questa proprietà.

    Sintassi e supporto del browser

    L'immagine del bordo in CSS3 è definita usando la seguente sintassi abbreviata:

     border-image: [fonte immagine] [fetta] [larghezza] [inizio] [ripeti];

    La sintassi sopra riportata è la versione ufficiale di W3C supportata solo in Chrome, mentre Opera, Firefox e Safari richiedono ancora la versione con prefisso (-o-, -moz-, -webkit-), e Internet Explorer non sorprende affatto questa proprietà.

    Inoltre, il [larghezza] e il [Sin] valore in questo border-immagine la proprietà non è ancora supportata in nessun browser, tuttavia, il valore della larghezza può essere sostituito usando il larghezza del bordo proprietà.

    Quindi, in breve, per ora possiamo solo applicare il valore di [fonte immagine], [fetta] e [ripetere] .

     border-image: [fonte immagine] [fetta] [ripeti];

    Fetta d'immagine

    Prima di procedere alla dimostrazione di questa proprietà, parliamo del “fetta d'immagine” prima come è qualcosa di nuovo nel dichiarare una proprietà. La sezione immagine qui definirà il taglio dell'immagine che prende rispettivamente il punto di partenza dall'alto, a destra, in basso e a sinistra dei bordi dell'immagine che successivamente dividerà l'immagine in nove sezioni, come illustrato con la seguente immagine.

    Nell'immagine sopra, vedrai che le sezioni 1, 3, 7 e 9 diventeranno gli angoli del confine e le sezioni 2, 4, 6 e 8 diventerà il bordo o la linea del bordo, assicurandosi che la sezione in cui diventerà il bordo sia ripetibile o estensibile.

    Il valore delle sezioni può essere dichiarato con a pixel unità o una percentuale (%) unità per la misurazione flessibile.

    più riferimenti:

    • CSS Background and Borders Livello 3

    Creazione di una cornice per foto

    Ora, dimostriamo la proprietà in un esempio reale.

    Questa volta, stiamo implementando il border-immagine proprietà per creare una cornice per foto e useremo l'immagine sotto come fonte. Abbiamo misurato attentamente l'immagine in modo che possa essere opportunamente tagliata, ripetuta e stirata indipendentemente dalla larghezza del contenuto e dall'altezza.

    Nota: puoi scaricare l'immagine qui sopra da questo link.

    Inoltre, in questa dimostrazione useremo questo splendido Cinemagraph di From Me to You come foto.

    (Fonte immagine: da me a te)

    Il markup

    Il markup è semplice come questo:

     

    Non dimenticare di sostituire il images_2 / CSS3-border-image-proprietà-making-foto-davvero-cool_3.jpg con la tua foto.

    Gli stili

    E poi, diamo una cornice usando border-immagine.

    Se guardi l'immagine sopra, la nostra larghezza dell'immagine è 180px in totale. Questo valore può quindi essere diviso in 6 quale ogni divisione è 30px; e quindi suddivideremo l'immagine per 30px.

    Se si utilizza il valore della lunghezza per la sezione, è necessario escludere il valore px unità, in quanto sarà automaticamente tradotto in pixel, ma se decidi di utilizzare la percentuale dovrai comunque aggiungere il file (%).

    Per quanto riguarda la ripetizione dell'immagine, useremo il valore predefinito; ripetere. In alternativa, puoi usare allungare e non preoccuparti, l'immagine del bordo apparirà ancora aggraziata.

     img border-image: url ("images / frame.png") 30 ripetizione; -o-border-image: url ("images / frame.png") 30 ripetizione; -moz-border-image: url ("images / frame.png") 30 ripetizione; -webkit-border-image: url ("images / frame.png") 30 ripetizione; larghezza del bordo: 30 px;  

    Inoltre, vogliamo anche posizionare l'immagine al centro della finestra del browser e aggiungere una texture di sfondo al documento per renderlo più convincente.

     html background: url ('images / lightpaperfibers.png');  .wrapper margin: 20px auto; altezza: 476px; larghezza: 675 px; allineamento del testo: centro;  

    Va bene, penso che abbiamo finito qui, ora guardiamolo in un browser.

    • dimostrazione
    • Scarica fonte

    Ti senti come se stessi guardando un dipinto magico a Hogwarts?

    Pensiero finale

    Questo border-immagine indubbiamente è una bella aggiunta nella famiglia CSS3; non siamo più limitati ai semplici confini semplici.

    E in questo post, ti abbiamo mostrato come possiamo creare una cornice immagine senza preoccuparci del contenuto o in questo caso delle dimensioni della foto (larghezza e altezza). L'altezza e la larghezza possono essere flessibili, a condizione che la sorgente del bordo sia ripetibile o estensibile.

    Infine, se sei ancora un po 'perplesso border-immagine, c'è uno strumento che puoi usare per aiutarti a crearne uno con più facilità: lo strumento per l'immagine del bordo