Come animare un bordo tratteggiato con CSS

I bordi decorati possono adornare qualsiasi elemento sulla pagina, ma i bordi CSS sono limitati quando si tratta di stile. Gli sviluppatori spesso presentano soluzioni come bordi sfumati CSS, bordi SVG, bordi multipli e altro ancora per imitare e aggiornare l'aspetto dei bordi della scatola e le sue animazioni.

Oggi esamineremo un trucco più semplice per i bordi tratteggiati: animazione di bordo tratteggiata. Il bordo tratteggiato animato verrà creato usando solo il outline e l' box-shadow, senza troppi problemi per quanto riguarda i fallback, poiché outline è supportato da IE8 in poi. In questo modo l'utente sarà comunque in grado di vedere i bordi a differenza di quando viene utilizzato SVG o gradiente. Con questo puoi anche creare trattini bicolore. Diamo un'occhiata.

Creare i confini

Per prima cosa creeremo i confini. Per questo, utilizzeremo un contorno tratteggiato e un'ombra di riquadro.

 .banners {outline: 6px tratteggiato giallo; box-shadow: 0 0 0 6px # EA3556; ...} 

Lo outline avrà bisogno di tutti i suoi valori; larghezza, tipo e colore. Il box-shadow solo bisogno del valore di spread che dovrebbe essere uguale alla larghezza del contorno e al suo colore. Sia il contorno che l'ombra della scatola insieme creeranno l'effetto di trattini bicolore.

È quindi possibile regolare la larghezza o l'altezza della casella per l'aspetto del bordo desiderato agli angoli.

Animare i confini

Per il nostro primo esempio di animazione, aggiungeremo animazioni di fotogrammi chiave CSS a una serie di banner con i bordi che si animano in continuazione, ottenendo attenzione. Per l'effetto animazione, scambiamo semplicemente i colori del contorno e dell'ombra del riquadro.

 @keyframes animateBorder {to {outline-color: # EA3556; box-shadow: 0 0 0 6px giallo; }} 

Puoi scegliere come target il colore del contorno usando la proprietà longhand di outline-color, ma per l'ombra del riquadro dovrai assegnare tutti i valori alla proprietà shorthand per ora.

Una volta che l'animazione è pronta, aggiungila alla scatola.

 .banners {outline: 6px tratteggiato giallo; box-shadow: 0 0 0 6px # EA3556; animazione: 1s animateBorder infinito; ...} 

Transitions On The Borders

Per l'esempio di transizione aggiungeremo bordi alle immagini e animeremo quelli al passaggio del mouse. Puoi anche cambiare la dimensione del bordo per effetti diversi.

 .photos {outline: 20px dashed # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transizione: tutti gli 1; ...} .photos: hover {outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; } 

Ora, passa con il mouse su queste immagini per vedere i tuoi bordi tratteggiati CSS in tutta la sua gloria animata.

E questo è un film. Puoi provare a sostituire i bordi tratteggiati con quelli tratteggiati, ma l'effetto potrebbe non essere altrettanto buono. Puoi anche modificare il tipo di contorno durante l'animazione per alcuni altri effetti.

14 strumenti per minimizzare Javascript

La minifrazione di Javascript è una tecnica che condensa il tuo script in un ingombro molto più piccolo . Si perde la leggibilità umana ma si conserva una considerevole larghezza di banda - alla fine, Javascript è pensato per il tuo browser e non per i tuoi utenti .La maggior parte dei siti Web di produzione utilizza la minifrazione di Javascript, ma il modo in cui questo viene realizzato varia notevolmente. Da

(Consigli tecnici e di design)

Tre modi per creare documenti HTML al volo

Talvolta è necessario creare documenti HTML al volo, con o senza JavaScript. Se l'obiettivo è quello di visualizzare una pagina di riconoscimento o un iframe contenente un'intera pagina, se il documento è abbastanza semplice può essere facilmente assemblato e servito con gli URL di dati o JavaScript .Ma

(Consigli tecnici e di design)