it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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

20 concetti di progettazione Web che faranno perdere la testa

20 concetti di progettazione Web che faranno perdere la testa

Creare un'esperienza efficace ed emozionante è una parte cruciale del successo di qualsiasi progetto di sito web. Con HTML5 è ora possibile aggiungere interazioni dinamiche ai siti Web e farli diventare vivi. Nella collezione di oggi mi piacerebbe condividere i 20 concetti di design web più interessanti trovati sul Web .In

(Consigli tecnici e di design)

10 migliori framework di test automatici per PHP

10 migliori framework di test automatici per PHP

Hai mai passato lunghe ore a eseguire il debug del codice PHP? Bene, per la maggior parte dei programmatori non è probabilmente la sfida più affascinante, ma c'è una soluzione che può aiutarci ad abbreviare questo noioso compito. I test automatizzati possono migliorare significativamente il flusso di lavoro dello sviluppo PHP consentendo test pre-scritti per guidare il processo di sviluppo .In

(Consigli tecnici e di design)