no.hideout-lastation.com
Paradis For Designere Og Utviklere


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

Se på YouTube-videoer sammen med venner ved å bruke UpTime

Se på YouTube-videoer sammen med venner ved å bruke UpTime

For det meste er det å se på YouTube-videoer på mobilenheten for det meste en ensom opplevelse. Men hva om det var en app som lar deg vise en "YouTube" -video med vennene dine samtidig ? Hvis en slik app appellerer til deg, kan du være interessert i hva UpTime har å tilby.Opprettet av Googles interne inkubatorområde 120, er UpTime en iOS-app som gjør dine vanlige YouTube-binge-økter til en mer sosial affære . Med den

(Tekniske og design tips)

30 Hypnotiske kinetiske skulpturer Du kan ikke ignorere

30 Hypnotiske kinetiske skulpturer Du kan ikke ignorere

Du har sett vakre og elegante malerier på vegger; mange av dem er jeg sikker på. Du har også sett papirskulpturer (eller tre eller til og med frukt) laget av mesterhåndverkere. Men har du sett å flytte kunstverk eller skulpturer?De kalles kinetiske skulpturer, og de er det du forventer at de skal være: de er kunstverk og skulpturer som faktisk beveger seg . Diss

(Tekniske og design tips)