La proprietà CSS3 Border-Image rende le foto davvero fantastiche!
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
