KostenlosErweiterung für Chrome und Firefox
Dein Design, Pixel für Pixel
Pixel Perfect Pro legt dein Design als Bild über die Seite, die du baust, damit du beides ausrichten und jede Abweichung sehen kannst. Kein Konto, und deine Designs bleiben in deinem Browser.
Screenshots
So funktioniert’s
Öffne die Seite, die du baust, und klicke auf das Pixel-Perfect-Pro-Symbol. Hat die Seite Frames, wähle, wo das Overlay hin soll.
Füge dein Design als Bild hinzu: per Drag-and-drop, als Datei, aus der Zwischenablage oder über eine URL.
Ziehe das Design an die richtige Stelle oder verschiebe es mit der Tastatur pixelweise.
Senke die Deckkraft oder stelle den Mischmodus auf Difference, damit jede Abweichung aufleuchtet. Korrigiere die Seite und prüfe erneut.
Was sie kann
Mischmodi
Stell den Mischmodus auf Difference, und jedes Pixel, das nicht zum Design passt, leuchtet auf. Multiply, Overlay, Screen und Exclusion gibt es auch.
Überblenden, invertieren, vergleichen
Blende das Design halb aus, um beide Ebenen zugleich zu sehen, invertiere seine Farben auf dunklen Seiten oder zieh einen Regler, der zwischen Design und Seite wechselt.
Exakte Platzierung
Position, Drehung, Skalierung und Breite per Zahl einstellen, auf jeder Achse zentrieren und das Design sperren, damit Klicks bei der Seite ankommen.
Spaltenraster
Vorlagen für Bootstrap, Tailwind und Material oder eigene Spalten, Abstände, Breite, Versatz, Farbe und Deckkraft, dazu ein Grundlinienraster. Funktioniert auch ohne Design.
Lineal und Hilfslinien
Miss Abstände und zieh Hilfslinien auf die Seite.
Mehrere Designs pro Website
Jede Website behält ihre eigenen Designs. Gruppiere sie mit Tags, blättere mit Weiter und Zurück und verknüpfe eins mit einem Breakpoint, damit sich das Fenster auf seine Breite einstellt.
Eigene Hotkeys und Farben
Gib jeder Aktion bis zu zwei Tastenkombinationen und wähle eigene Farben für die Symbolleiste im hellen und dunklen Design.
Übersteht Neuladen
Lädst du die Seite neu, öffnet sich das Overlay wieder mit demselben Design an derselben Stelle. Es funktioniert auch in iframes und in Chrome mit lokalen HTML-Dateien.
Von Grund auf privat
- Kein Konto, keine Analysetools, kein Tracking, keine Werbung.
- Deine Designs werden pro Website in deinem Browser gespeichert und nie hochgeladen.
- Die einzige Netzwerkanfrage ist der Download eines Designs, das du per URL hinzufügst.
- Das Overlay lädt nur in Tabs, in denen du es öffnest.
Kostenlos, ohne Konto
Alles inklusive
- Mehrere Designs pro Website, mit Tags und Breakpoints
- Mischmodi, Deckkraft, Invertieren und Vergleichsregler
- Spaltenraster, Grundlinienraster, Lineal und Hilfslinien
- Eigene Hotkeys und Symbolleisten-Designs
- Iframes und lokale HTML-Dateien in Chrome