Dieter Petereit 28. September 2016

Grade.js: Farbverlaufsrahmen für deine Bilder mit JavaScript

Was ein sperriger Titel. Grade.js ist eine JavaScript-Bibliothek, die du nutzt, um deine Bilder automatisch rahmen zu lassen. Das Interessante daran ist, dass der Rahmen aus einem Farbverlauf der beiden dominantesten Farben aus der tatsächlichen Farbpalette des jeweiligen Bildes erstellt wird. Aber schreib das mal in eine Überschrift…

Grade.js: einfach zu verwenden, schicke Ergebnisse

Grade.js ist das neueste Projekt aus der Werkstatt des Entwicklers Ben Howdle aus dem Vereinigten Königreich. Ben verteilt die JavaScript-Bibliothek kostenfrei unter der MIT-Lizenz über Github. Die Funktionsweise kannst du dir auf dieser Demo-Seite anschauen.

Für die Einbindung in dein Projekt bestehen verschiedene Möglichkeiten. Du kannst zum einen das, unkomprimiert runde 104kb große Script runter- und wieder auf dein Projekt hochladen. Zum anderen kannst du es per npm installieren oder du nutzt den angegebenen CDN-Link.

Die Verwendung ist sehr einfach. Zunächst bindest du das Script ein und initialisierst es. Das geht zum Beispiel so:

 

 

Dann legst du einen Div-Container um das zu rahmende Bild. Dieser Container wird mit der Klasse "gradient-wrap" ausgezeichnet.

So kann das aussehen:

 

Das ist alles. Fortan werden alle auf der Seite vorhandenen Bilder, die in einem Container der Klasse "gradient-wrap" liegen, mit einem solchen Rahmen versehen:

gradejs-demo

Das JavaScript ermittelt hierzu die beiden dominantesten Farben aus der Farbpalette des jeweiligen Bildes und baut einen dazu passenden Farbverlauf. Logisch, dass du alle Bilder in jeweils einen eigenen Container legen musst, oder?

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück