de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Responsive Bilder leicht gemacht mit ResponsifyJS

Das moderne Web sollte 100% reaktionsschnell sein und neuere Bibliotheken machen dies zunehmend möglich.

Mit kostenlosen Plugins wie ResponsifyJS ist es noch einfacher, Ihre Websites auf allen Geräten zu nutzen. Dieses kostenlose jQuery-Plugin nimmt einen Container mit Bildern und ordnet sie basierend auf unterschiedlichen Bildschirmgrößen dynamisch neu an.

Da unterschiedliche Behälter Bilder unterschiedlich halten, können sie sich auf sehr seltsame Weise verändern. Manchmal haben Sie Fotos von Personen und ihre Gesichter können abgeschnitten werden, wenn Sie die Größe auf Mobilgeräten ändern.

Das Responsify-Plugin wurde erstellt, um dieses genaue Problem zu lösen. Es kann automatisch funktionieren, aber die wahre Magie liegt in der Definition Ihres eigenen Fokusbereichs auf dem Bild.

Es verwendet ein internes System von Dezimalbeschreibungen, um den Fokus des Bildes zu finden. Sie können beispielsweise Positionen definieren, z. B. data-focus-top der ein bestimmtes Bildsegment "blockiert".

Diese Daten müssen in Dezimalzahlen übergeben werden, z. B. eine Dezimalzahl von 0, 5 entspricht 50% des Bildes (links / rechts oder oben / unten). Das ist natürlich ziemlich verwirrend. Aber es gibt eine kostenlose Responsify-App, mit der Sie die Positionen dynamisch in Ihrem Browser berechnen können.

Laden Sie einfach ein Bild hoch, definieren Sie den Fokusbereich und kopieren Sie den Bildcode in Ihre Website. Das Responsify-Plugin enthält alle Daten, die es benötigt, um das Bild auf kleineren Bildschirmen richtig zu skalieren.

Im GitHub-Repo finden Sie einige Live-Demo-Links, einschließlich Code-Snippets zum Kopieren / Einfügen in Ihre Site.

Dieses Plugin ist nicht die perfekte Lösung für jedes Projekt. Manchmal möchten Sie, dass Bilder ohne feste Fokusbereiche skaliert werden. Aber wenn Sie mit jQuery gemauerte Grids verwenden, schadet es nicht, ResponsifyJS zu Ihrem Stack hinzuzufügen.

Um mehr zu erfahren, besuchen Sie die Plugin-Homepage für eine Live-Demo, einen Download-Link und eine vollständige Setup-Anleitung.

Python-Pakete für Web-Entwickler - Best of

Python-Pakete für Web-Entwickler - Best of

In den letzten Jahren hat sich Python wie ein Lauffeuer verbreitet, und viele Entwickler, sowohl Anfänger als auch Experten, haben daran Gefallen gefunden. Python ist bekannt dafür, einfach, effizient und vielseitig zu sein . Von Desktop-Scripts bis hin zu Web-Anwendungen verwenden Unternehmen wie Google, Spotify, Pinterest und Instagram Python, um ihre Software zu betreiben, die Millionen von Verbrauchern auf der ganzen Welt nutzen.I

(Tech- und Design-Tipps)

20 besten Hyperlapse Videos Bisher

20 besten Hyperlapse Videos Bisher

Es ist fast ein Monat her, seit Instagram Hyperlapse veröffentlicht hat. Der Hype über die App ist immer noch stark, da Instagram- (und iPhone-) Nutzer weiterhin Hyperlapse-Videos auf ihren Handys schießen.Mit Hyperlapse sehen scheinbar banale Dinge spannender aus, wenn sie 10-mal schneller beschleunigt werden. N

(Tech- und Design-Tipps)