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


Opprett Device Mockups i nettleser med DeviceMock

Du kan finne mange gratis online mockups på nettet, alt fra PSD til Sketch-filer. Men hva om du raskt kunne bygge enhetsmockups på flyet i nettleseren din?

Vel, takk til folkene på rm-labo, kan du! Deres gratis jQuery-plugin, DeviceMock.js, lar deg vikle en vektor enhet rundt et hvilket som helst sideelement, ved hjelp av enkle JavaScript og SVGer.

Så, hvordan fungerer dette akkurat?

Vel, først trenger du en kopi av jQuery og en versjon av DeviceMock-plugin fra GitHub . Dette kommer med en JS-fil, CSS-fil, og noen SVG-filer for å lage de faktiske enhetene.

Du kan målrette mot hvilken som helst type element på siden, fra et enkelt bilde til en hel div, eller til og med et innebygd element, for eksempel en iframe. Dette betyr at du kan til og med bygge en kul mini-nettleser rett på nettstedet ditt med en iframe til en annen side.

Dette pluginet støtter fem forskjellige enhetstyper :

  1. nettleser
  2. smart~~POS=TRUNC
  3. Tablett
  4. Desktop
  5. Laptop

Alle disse mockups bruker flat design stiler siden de er bygd med SVGs. Og alle ser ganske ut som Apple-enheter, for eksempel at smarttelefonen er en klone på iPhone, og skrivebordsbeskjermen ser iøynefallende ut som en iMac.

Alle disse vektorene er enkle å legge til, og de fungerer i hver nettleser med SVG-støtte .

Du kan til og med endre egenskaper som mockup størrelse, tema (hvit / svart) og orientering (stående landskap).

Hvis du bruker nettleserens mockup, kan du til og med spesifisere en dummy-URL i adressefeltet. Dette er en morsom måte å legge til enda mer tilpasning.

Gitt dette biblioteket vil ikke være nyttig for alle, men det løser et nisjeproblem som mange UI / UX-utviklere møter når prototyping.

Hvis du vil vite mer, kan du gå til GitHub-siden eller sjekke ut live-nettstedet for en aktiv demo.

Slik tillater andre å legge inn dine WordPress-innlegg

Slik tillater andre å legge inn dine WordPress-innlegg

Embedding har nå blitt normen når det gjelder å dele innhold på nettsteder. I WordPress er det enkelt å legge inn innhold fra nettsteder som Youtube, Twitter og SoundCloud, takket være oEmbed API. Bare legg linken til innleggets innhold, og WordPress analyserer umiddelbart linken og gjør den til et presentabel format.Men hv

(Tekniske og design tips)

Hvordan CSS-Only Overlays Effect med Box-Shadow

Hvordan CSS-Only Overlays Effect med Box-Shadow

Innhold overlegg er en fremtredende del av moderne webdesign. De hjelper deg å skjule et element på en nettside, og senere - med brukerens godkjenning - avsløre det, og vise ekstra informasjon eller kontroller, for eksempel knapper bak den.Et typisk overlegg er semi-gjennomsiktig, med en solid bakgrunnsfarge (vanligvis svart), og det er litt tekst eller knapper på det for brukere å se eller samhandle med. Ett

(Tekniske og design tips)