Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 4 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 8. August 2014

Inhaltsverzeichnis

Dank CSS3 verfügen wir inzwischen über zahlreiche Möglichkeiten, Elemente mit Schatten zu versehen. So gibt es neben Text- und Elementschatten auch einen Schattenfilter. Allerdings erzeugen alle CSS3-Schatten lediglich einfache Schlagschatten, bei denen neben der Farbe bloß noch die Unschärfe, der Versatz und die Ausbreitung definiert werden können. Die JavaScript-Bibliothek „shine.js“ hingegen ermöglicht weitaus komplexere und realistischere Schatteneffekte.

shinejs

Schatten erzeugen

shine.js von Benjamin Bojko und Naim Sheriff kommt ohne andere JavaScript-Bibliotheken wie beispielsweise jQuery aus und kann daher sehr einfach eingesetzt werden. Ist das Tool im Headbereich eingebunden, wird per JavaScript einfach ein Schatten auf ein beliebiges Element angewendet.

var schatten = new Shine(document.getElementById("ueberschrift"));

Mit „Shine()“ definieren wir jeweils eine neue Instanz. Neben der Angabe eines Elementes können weitere optionale Parameter definiert werden. So gibt es einen Konfigurationsparameter, über den das Aussehen des Schattens bestimmt wird.

var schatten_konfig = new shinejs.Config({
  numSteps: 10,
  offset = 0.25,
  blur: 100,
  opacity: 0.5,
  shadowRGB: new shinejs.Color(255, 0, 0)
});
var schatten = new Shine(document.getElementById("ueberschrift"), schatten_konfig);

Im Beispiel wird per „shinejs.Config()“ ein Schatten definiert, den wir später als zweiten Parameter der „Shine()“-Instanz übergeben. Es gibt mehrere Angaben, mit denen das Aussehen des Schattens festgelegt wird. „Shine.js“ generiert die Schatten mit den CSS3-Eigenschaften „text-shadow“ für Textschatten beziehungsweise „shadow“ für Elementschatten. Per „numSteps“ wird die Anzahl der Schatten festgelegt, die auf das jeweilige Element angewendet werden sollen.

Je mehr Schritte angegeben werden, desto komplexer wird der Schatten. Per „offset“ legen wir den Versatz des Schattens fest, per „blur“ die Unschärfe. „opacity“ gibt die Deckkraft an und „shadowRGB“ die Farbe. Diese wird über eine eigene „shinejs.Color()“-Instanz definiert.

Lichtquelle definieren

Das Besondere an „shine.js“ ist, dass für jeden Schatten jeweils eine eigene Lichtquelle angegeben werden kann. Dies erfolgt gängig per X- und Y-Koordinaten.

schatten.light.position.x = 500;
schatten.light.position.y = 10;
schatten.light.intensity = 1;

Je größer die Werte für die Koordinaten sind, desto länger wird der Schatten gezogen. Neben „light.position.x“ und „light.position.y“ für die Angabe der Koordinaten wird mit „light.intensity“ die Lichtintensität angegeben. Je höher der Wert ist, desto stärker wird der Schatten dargestellt.

shinejs_beispiel
Beispiel

Damit sich die Lichtquelle auf den zuvor definierten Schatten auswirkt, muss der Schatten per „draw()“ neu gezeichnet werden.

schatten.draw();

Schatten auf Element statt Text anwenden

Standardmäßig werden Schatten auf Texte angewendet. Dazu umschließt man die Buchstaben des Textes mit je einem „<span>“-Element. Optional kann jedem dieser Elemente ein Klassenpräfix zugewiesen werden. So hat man die Möglichkeit, per CSS weitere Eigenschaften für bestimmte Schatten festzulegen.

var schatten = new Shine(document.getElementById("ueberschrift"), schatten_konfig, "praefix");

Statt einen Schatten auf einen Text anzuwenden, besteht auch die Möglichkeit, einen Schatten auf ein Element zu legen. Dazu wird als vierter optionaler Parameter für die „Shine()“-Instanz der Wert „boxShadow“ angegeben.

var schatten = new Shine(document.getElementById("ueberschrift"), schatten_konfig, "praefix", "boxShadow");

Der Standardwerte für diesen Parameter ist „textShadow“.

Browsersupport und Lizenz

Shine.js läuft auf allen Browsern, welche die CSS3-Eigenschaften „text-shadow“ und „shadow“ unterstützen. Da alle gängigen Browser diese beiden Eigenschaften bereits seit einigen Versionen unterstützen, kann die Bibliothek gefahrlos eingesetzt werden. Shine.js wird unter der MIT-Lizenz angeboten. Daher kann Sie unentgeltlich für eigene Projekte, egal ob kommerziell oder privat, verwendet und angepasst werden.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

promomasters online marketing seo agentur logo für wien, salzburg, zell am see.

PromoMasters Online Marketing

Wien

BIZ Digital Marketing Logo.

BIZ Digital Marketing

Nürtingen

marketer UX

Düsseldorf

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

Farbentour-Logo.

Farbentour®

Mettmann

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

4 Antworten zu „Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js“
— was ist Deine Meinung?

  1. Patrick sagt:
    18. August 2014 um 13:13 Uhr

    @felix: Ich denke, das ist immer mit einer gewissen Sichtweise verbunden. Design, speziell von schnell wandelbaren Dingen wie dem Web selbst, hängt immer vom gefühlten Geschmack derjenigen Masse ab, die das Web nutzt bzw. von der vorherrschenden Meinung des Entwicklers/Auftraggebers etc., wie dieser Geschmack derzeit aussehen könnte. Ob runde Ecken nun Mehrwert bringen, sei mal dahin gestellt. Meiner Meinung nach sind Schatten auf Webseiten zwar nicht nötig, wandeln Webseiten aber in ein, für uns Menschen eher fassbares Erlebnis – schließlich ist die „reale“ Welt um uns herum geprägt vom Wechsel zwischen Licht und Schatten. Wieso also nicht die Welt des Webs? – Dass Seiten derzeit so stark versetzt mit JavaScript und dazugehörigen Libraries sind, hängt denke ich primär davon ab, dass der Nutzer immer mehr „Live“-Events auf der Clientseite erwartet und es nicht wirklich eine etablierte Alternative zu JavaScript gibt (soweit mir bekannt | man möge mich korrigieren). Alles in Allem bleibt es Spannend, wohin die Reise noch so geht…

    Gruss

    Antworten
  2. felix sagt:
    10. August 2014 um 20:36 Uhr

    @Torsten: Finde ich auch, CSS funktioniert sauberer als JS. Abgesehen davon glaube ich, dass 3D-Effekte nicht mehr aktuell sind. Ich habe schon vor mehr als einem Jahr alle runden Ecken und Schatten von meiner Website entfernt. Auch hier unter drweb ist das eher nicht eingesetzt. Das Problem ist derzeit, dass viele Webseiten schon viel zu sehr mit JS beladen sind, dass der Seitenaufbau bei nicht schnellster Verbindung ähnlich rupfig ist wie vor fast 20 Jahren die mit Tabellen aufgebauten Seiten.

    Antworten
  3. Matthias sagt:
    10. August 2014 um 16:02 Uhr

    Schön, dass man das ganze auf einer Demo-Seite bewundern kann. Das hätte ich mir auch für den Artikel http://www.drweb.de/magazin/html5-sprechstunde-mit-der-speech-synthesis-api-48090/ gewünscht

    Antworten
  4. Torsten sagt:
    8. August 2014 um 11:45 Uhr

    Sicherlich nette Spielerei – aber wie verhält sich die Performance (PageSpeed, SEO) im Vergleich zu CSS und wo ist (außer der Optik) der Vorteil? Ich versuche ja so schon so wenige .js wie möglich zu verwenden …

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑