Come creare colori del bordo sfumato CSS

Questo articolo fa parte della nostra "serie di tutorial HTML5 / CSS3", dedicata a farti diventare un designer e / o uno sviluppatore migliori. Clicca qui per vedere più articoli della stessa serie.

Con tutte le nuove funzionalità in CSS3, siamo ora in grado di creare siti Web senza immagini. In passato, l'uso dell'immagine era inevitabile quando si trattava di mostrare i colori sfumati. Oggi diventa molto più snello con l'uso di CSS3 Gradient Background . Nei post precedenti, ti abbiamo mostrato come portare il gradiente CSS3 in gioco come colore di sfondo in varie forme e direzioni; Sfumature lineari, ellittiche e ripetute.

Ma CSS3 Gradient non si ferma solo per l'uso in background. Lo sapevi che puoi anche utilizzarlo entro i confini ? Continua a leggere per imparare come farlo.

Primo metodo

Il primo metodo è l'applicazione del gradiente CSS3 all'interno di pseudo-elementi . Bene, vediamo come funziona il trucco.

Bordo sfumatura da cima a fondo

Iniziamo con un gradiente semplice che si estende da cima a fondo. Per iniziare, crea una scatola con un div, come segue.

HTML

CSS

 .box {width: 400px; altezza: 400 px; sfondo: #eee; } 

Per formare il gradiente nei bordi del riquadro, imposta prima un bordo solido sul lato superiore e inferiore del riquadro. Creiamo anche 2 rettangoli con 2 pseudo-elementi s :before e :after - e specificiamo la larghezza delle stesse dimensioni della larghezza del riquadro. Posiziona i rettangoli sul lato sinistro e destro della scatola e usa linear-gradient attraverso l' background-image . Puoi vedere come funziona questo trucco qui sotto:

Gradiente di confine da sinistra a destra

Ora creiamo un gradiente che si estende a sinistra ea destra in modo identico all'esempio precedente. Solo, questa volta, aggiungeremo il bordo della scatola sul lato sinistro e destro, invece che sopra e sotto. Allo stesso modo, utilizziamo anche lo pseudo-elemento - :before e :after - per modellare 2 rettangoli. Ma, contrariamente all'esempio precedente, ora li posizioniamo nella parte superiore e inferiore della scatola.

Gradiente di confine diagonale

Creare un gradiente diagonale con questo trucco è, beh, tecnicamente complicato.

Tuttavia, ci basiamo su 2 pseudo-elementi, : :before e :after e usa linear-gradient . Questa volta, tuttavia, impiegheremo 2 linear-gradient all'interno dello pseudo-elemento . E ogni sfumatura si estende in opposizione l'una con l'altra. Vedere il seguente codice sorgente per i dettagli.

Secondo trucco

Il secondo metodo consiste nell'utilizzare la proprietà border-image CSS3. La proprietà border-image in CSS3 ci consente di riempire il bordo con un'immagine e con Gradient CSS3. I browser supportano l' border-image sono piuttosto grandi; Chrome, Internet Explorer 11, Firefox, Safari e Opera sono tutti in grado di eseguire il rendering completo border-image . Va notato, tuttavia, che l' border-image del border-image funzionerà solo su forme o scatole rettangolari. Ciò significa che l'aggiunta di border-radius devierà l'output border-image .

La seguente è la specifica della proprietà border-image :

 border-image:  ; 

Il è il percorso che specifica l'immagine utilizzata nel bordo. Qui, lo riempiremo invece con Gradient CSS3. Per ottenere lo stesso risultato degli esempi precedenti, applichiamo il gradiente CSS3 all'interno border-image del border-image, come segue.

 .box {width: 250px; altezza: 250 px; sfondo: #eee; bordo: 20px trasparente solido; -moz-border-image: -moz-linear-gradient (in alto, # 3acfd5 0%, # 3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient (in alto, # 3acfd5 0%, # 3a4ed5 100%); border-image: linear-gradient (in basso, # 3acfd5 0%, # 3a4ed5 100%); border-image-slice: 1; } 

L' border-image non mostrerà nulla se non specificiamo la larghezza del border . Quindi, come puoi vedere sopra, aggiungiamo 20px di larghezza del bordo con il colore del bordo trasparente. Quindi, impostiamo il valore border-image e linear-gradient insieme al prefisso del venditore per le versioni precedenti di Webkit e Firefox.

L'aggiunta della porzione di immagine di bordo mostrata sopra imposterà gli offset interni del contenuto del image-border . Questa proprietà è necessaria per visualizzare il gradiente completamente all'interno dell'area circostante della scatola. Vedi l'output qui sotto:

Questo metodo offre una maggiore flessibilità per regolare il gradiente in ogni direzione possibile; da sinistra a destra, dall'alto verso il basso, diagonale o ad angolo. Di seguito sono riportati alcuni esempi:

Gradiente da sinistra a destra

Gradiente diagonale

Nuove risorse per sviluppatori Web - Marzo 2017

Con CLI (Command Line Interface) siamo in grado di ottimizzare e automatizzare i flussi di lavoro di sviluppo web . Ed è per questo che in questa puntata abbiamo incluso un bel numero di CLI fantastici che puoi installare sul tuo computer locale o eseguire alcune cose sul server. Inoltre, abbiamo incluso alcuni strumenti PHP, componenti aggiuntivi del browser e librerie JavaScript .

(Consigli tecnici e di design)

Incorpora GIF animate come Facebook con jqGifPreview

Twitter e Facebook hanno un sacco di persone che condividono quotidianamente GIF animate . Se questi sono tutti riprodotti automaticamente potrebbero essere raccapriccianti in un feed.Entrambe le reti riescono a risolverle con una funzione di anteprima click-to-look per tutte le GIF. Ciò consente all'utente di scegliere quali animazioni desidera vedere scegliendo quando avviare / interrompere l'animazione.

(Consigli tecnici e di design)