Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 4 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 8. August 2014
Bookmarke mich
Share on pocket

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

wp-agentur.de | WordPress-Agentur

Köln

iPower AG

Berlin

AdsMasters GmbH

Düsseldorf

Trendmarke GmbH

Stuttgart

Jocado

Leipzig

Alle Agenturpartner

Jobs

Elektroinstallateur – Rechenzentrum

Karlsruhe

Copywriter – Vollzeit

Remote

Inside Sales Manager

Karlsruhe

Media Manager in München

München

Projektmanager/ Projektleiter in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Diese CSS-Selektoren sollten Sie kennen

Im CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.