Slik bruker du HTML5 Element for å oppnå responsivt bilde

Responsive Design kan være her for å bli, men det er mange problemer som må tas opp når det gjelder å gjøre bilder lydhør . Selv om responsive bilder automatisk tilpasser seg størrelsen på visningsporten (noe som er teknisk enkelt), er det et problem med brukerne at bildet vokalpunktet blir knapt synlig når bildet blir for lite .

Den ideelle konsensus blant webutviklere er at den faktiske dimensjonen burde være responsiv også . Nettleseren skal kunne laste mindre eller større bilder i samsvar med visningsportstørrelsen. På den måten kan vi styre og levere den beste bildedelen i stedet for det krypte bildet (som vist).

Dette er hvor HTML5-bildeelementet kommer inn. picture tillater oss å gi flere bildekilder og kontrollere leveransen gjennom Media Queries. Selv om det ikke finnes noen nettleser som implementerer dette elementet ennå, kan vi bruke en polypfyll som heter Picturefill for å gjøre dette. La oss se hvordan det er gjort, skal vi?

Starter

Picturefill er et JavaScript-bibliotek utviklet av Filament Group. Det tillater oss å bruke bildeelementet nå. For å komme i gang, last ned skriptet i Github-depotet og legg picturefill.js eller picturefill.min.js . Picurefill er et frittstående JavaScript-bibliotek som ikke krever noe annet bibliotek til å fungere. Du kan ganske enkelt legge den til i hodetiketten.

Bildet

Jeg har laget et bilde i tre forskjellige dimensjoner, som følger. Bildet er beskåret for å bevare fokus på personen i bildet. Planen her er at vi vil vise den minste størrelsen i små skjermbilder og større bilde i store skjermer.

Bruke bildeelement

Picturefill kan fungere på to måter: vi kan legge inn srcset i img taggen eller bruke bildeelementet. Her velger vi bildeelementet som det er mer overskuelig, lettere å undestand, og mer lesbart.

I likhet med video og lydelementer, brytes picture flere source som peker på bildekilden, som følger.

Kildeelementet, som du kan se fra koden ovenfor, er satt med medieattributt. I denne egenskapen spesifiserer vi visningsportpunktet hvor bildet skal presenteres. Du kan se effekten umiddelbart.

Sjekk demo siden, og endre størrelsen på visningsportstørrelsen, bør du finne bildet vist innenfor den angitte visningsbredden.

Bildefyll for WordPress

Hvis du bruker WordPress, kan du bruke et plugin kalt Picturefill.WP som lar deg implementere bildeelementet i WordPress, uten å måtte ha problemer. Bare last opp og legg inn bildet ditt som vanlig, og dette pluginet tar vare på resten.

Endelig tanke

Bildeelementet er et flott tillegg i HTML5. Vi har mer kontroll over bildestørrelsen og dimensjonen som nettleseren skal presentere. Og med bildefylling kan vi bruke dette nye elementet akkurat nå, selv om ingen nettlesere har implementert det enda. Picturefill fungerer i et bredt spekter av nettlesere, inkludert i IE (riktignok med noen advarsler).

Til slutt, se demonstrasjonen og last ned kildekoden nedenfor.

• Demo
• Last ned kilde

20 Gratis Fet og Chunky Fonter til Jazz opp dine design

Det er visse må-ha skrifter som blir kvintessige for designene dine, og dype skrifttyper er en slik type. Fet og klumpete skrifttyper legger mye stoff i designet og ser også estetisk godt ut .I dette innlegget har vi satt sammen en interessant samling gratis dristige og klumpete skrifter som kan brukes til overskrifter, titler eller et annet aspekt av designet.

(Tekniske og design tips)

10 Fremtidige Augmented Reality & Smart Glasses Du kan kjøpe

Helt siden Google lanserte sitt Google Glass-prosjekt, synes virkeligheten i brukbar briller å være uunngåelig. Siden da har utviklere fra hele verden forsøkt å ta på seg Google Glass ved å lage sine egne brukbare displaybriller . I stedet for bare å kunne ta et bilde eller en video, har smarte briller muligheten til å gjøre så mye mer. Med mulig

(Tekniske og design tips)