nl.hideout-lastation.com
Maak apparaatmodellen in de browser met DeviceMock
Je vindt talloze gratis apparaatmodellen online, variërend van PSD's tot Sketch-bestanden. Maar wat als u snel mockups van apparaten in uw browser zou kunnen bouwen ?
Nou, dankzij de mensen van rm-labo, dat kan! Met hun gratis jQuery-plug-in, DeviceMock.js, kun je een vectorapparaat rond elk pagina-element wikkelen, met behulp van eenvoudige JavaScript en SVG's.
Hoe werkt dit precies?
Nou, eerst heb je een kopie van jQuery en een versie van de DeviceMock-plugin van GitHub nodig . Dit wordt geleverd met een JS-bestand, een CSS-bestand en enkele SVG-bestanden om de eigenlijke apparaten te maken.
U kunt elk type element op de pagina targeten, van een eenvoudige afbeelding tot een volledige div of zelfs een ingesloten element, zoals een iframe. Dit betekent dat je zelfs een coole mini-browser op je site kunt bouwen met een iframe naar een andere pagina.
Deze plug-in ondersteunt vijf verschillende apparaattypen :
- webbrowser
- smartphone
- Tablet
- Desktop
- laptop
Al deze mockups gebruiken platte ontwerpstijlen omdat ze zijn gebouwd met SVG's. En ze lijken allemaal erg op Apple-apparaten, bijvoorbeeld omdat de smartphone een kloon van de iPhone is en de desktopmonitor opvallend veel op een iMac lijkt.
Al deze vectoren zijn eenvoudig toe te voegen en ze werken in elke browser met SVG-ondersteuning .
U kunt zelfs eigenschappen wijzigen, zoals de mockup-grootte, het thema (wit / zwart) en de richting (portretlandschap).
Als u de browsermodelup gebruikt, kunt u zelfs een dummy-URL opgeven in de adresbalk. Dit is een leuke manier om nog meer maatwerk toe te voegen.
Toegegeven, deze bibliotheek zal niet voor iedereen bruikbaar zijn, maar lost wel een nicheprobleem op dat veel UI / UX-ontwikkelaars tegenkomen bij het maken van prototypen.Ga voor meer informatie naar de GitHub-pagina of bekijk de live-site voor een actieve demo.
10 Codepen Tips voor beginners
Codepen is een supergemakkelijke en populaire site om meteen een werkende front-end codecombinatie neer te schrijven. Als je niet weet wat Codepen is of nog niet eerder heeft gehoord, is het in feite een online speelplaats met broncode (laten we het OSCP noemen om nerdier te klinken) voor de drie musketiers van front-end codering; HTML, CSS en JavaScript
Animate.css - CSS3-bibliotheek Eenvoudig animaties maken
CSS is verbeterd met veel functies die webontwikkeling veel interessanter en uitdagender maken. Een van deze functies is CSS3-animatie-effecten . Vóór CSS3, om een animatie te maken, kunt u alleen met Javascript werken. Maar nu kun je het gemakkelijk maken met CSS3.We hebben je uitgebreid leren kennen met een goede tutorial over het maken van Bounce Effect met CSS3, en in dit artikel zal ik je een geweldige bibliotheek voorstellen die het maken van animaties met CSS3 nog eenvoudiger zal maken: Animate.css .
