Come usare HTML5 Elemento per ottenere un'immagine reattiva

Il Responsive Design può essere qui per rimanere, ma ci sono molti problemi che devono essere affrontati quando si tratta di rendere le immagini reattive . Sebbene le immagini reattive si ridimensionino automaticamente sulla dimensione della vista (che è tecnicamente semplice), un problema che gli utenti devono affrontare è che il punto della voce dell'immagine diventa appena visibile quando l'immagine diventa troppo piccola .

Il consenso ideale tra gli sviluppatori web è che anche la dimensione reale dovrebbe essere reattiva . Il browser dovrebbe essere in grado di caricare immagini più piccole o più grandi in base alla dimensione del viewport. In questo modo possiamo dirigere e fornire la migliore proporzione dell'immagine piuttosto che l'immagine ridotta (come mostrato).

È picture che entra in gioco l'elemento picture HTML5. L' picture ci consente di fornire più sorgenti di immagini e di controllare il recapito tramite Media Queries. Sebbene non ci siano ancora browser che implementano questo elemento, possiamo usare un polyfill chiamato Picturefill per farlo. Vediamo come è fatto, vero?

Iniziare

Picturefill è una libreria JavaScript sviluppata da Filament Group. Ci consente di utilizzare l'elemento picture ora. Per iniziare, scarica lo script nel repository Github e inserisci picturefill.js o picturefill.min.js . Picurefill è una libreria JavaScript autonoma che non richiede l'utilizzo di altre librerie. Puoi semplicemente aggiungerlo nel tag head .

L'immagine

Ho preparato un'immagine in tre dimensioni diverse, come segue. L'immagine è stata ritagliata per preservare l'attenzione sulla persona nell'immagine. Il piano qui è che mostreremo la dimensione più piccola in piccoli schermi e l'immagine più grande in schermi di grandi dimensioni.

Utilizzando Picture Element

Picturefill può funzionare in due modi: possiamo incorporare srcset nel tag img o utilizzare l'elemento picture . Qui opteremo per l'elemento picture in quanto è più gestibile, più facile da capire e più leggibile.

Simile agli elementi video e audio, l' picture avvolge più elementi source che puntano alla sorgente dell'immagine, come segue.

L'elemento source, come puoi vedere dallo snippet di codice precedente, è impostato con media attributo media . In questo attributo, specifichiamo il punto di interruzione della vista su cui deve essere presentata l'immagine. Puoi vedere immediatamente l'effetto.

Controlla la pagina demo e ridimensiona la dimensione della finestra, dovresti trovare l'immagine mostrata nella larghezza della finestra specificata.

Picturefill per WordPress

Se stai usando WordPress, puoi usare un plugin chiamato Picturefill.WP che ti permette di implementare l'elemento picture in WordPress, senza problemi. Basta caricare e incorporare la tua immagine come al solito, e questo plugin si occuperà del resto.

Pensiero finale

L'elemento picture è una grande aggiunta in HTML5. Abbiamo un maggiore controllo sulla dimensione e sulla dimensione dell'immagine che il browser dovrebbe presentare. E con picturefill possiamo usare questo nuovo elemento al momento anche se nessun browser lo ha ancora implementato. Picturefill funziona in una vasta gamma di browser, incluso in IE (anche se con alcune avvertenze).

Infine, guarda la demo e scarica il codice sorgente qui sotto.

• dimostrazione
• Scarica fonte

Crea facilmente effetti a cascata con CascadeJS

Le animazioni fantasiose sono una dozzina di dozzine sul web. Stanno diventando più facili da creare con tonnellate di incredibili librerie di animazioni .Cascade.js è un'altra libreria da aggiungere alla lista, ed è sicuramente unica. Con Cascade, puoi progettare effetti di animazione personalizzati usando lettere a cascata nel testo o elementi a cascata in un contenitore principale.Qu

(Consigli tecnici e di design)

Gmail per Android per ottenere il controllo anti-phishing

Poco dopo essere stato colpito da un attacco di phishing sorprendentemente ben fatto, Google ha iniziato a implementare alcune nuove misure di sicurezza specifiche per Gmail per Android che potrebbero fornire agli utenti una panoramica dei potenziali attacchi di phishing.Passando a tutti gli utenti di Gmail per Android entro un paio di giorni, l'applicazione avviserà l'utente ogni volta che farà clic su un link segnalato come fraudolento.

(Consigli tecnici e di design)