CSS Schlagschatten für Kreis mit Abstand
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
after
ahnung
all
bild
boxen
code
container
element
farbe
farbwechsel
filter
grafik
http
jemand
position
positionieren
quellcode
radius
schatten
url
-
Hallo,
ich will für einen kreisförmigen div Container einen Schlagschatten realisieren. Hier http://www.suzuki-schmidt.de/ ist ein Beispiel, wie es aussehen soll (Schlagschatten beim hover: Aprilla, Suzuki, Moto Guzzi Logo).
Mit box-shadow wüsste ich nicht, wie ich den Abstand realsieren soll. Habe jetzt schon versucht einen Container mit absoluter Position für den Schatten unter dem Kreis zu positionieren. Aber das Ergebnis,was ich mit dem Container erziele, sieht nicht gut aus. Schatten verläuft mehr in die Höhe und kaum in die Breite.
Hat jemand eine Ahnung, wie der Schatten erstellt wurde? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
reimenseimen schrieb:
Hat jemand eine Ahnung, wie der Schatten erstellt wurde?
Das ist einfach ein Bild, daß dem List-Tag als Hintergrund zugewiesen wurde und nur beim Hovern, durch Verschiebung des Vordergrundbildes sichtbar wird.
Die Kreisform ist eine Canvasmaske die das quadratische Bild beschneidet
Der Farbwechsel beim Hovern wird mit einem Jquery-Plugin (*click*) realisiert.
Alles im Quellcode der Seite ablesbar.
(Wenn Du Firefox nutzt: Rechtsklick ins Bild; "Element untersuchen" anklicken, lesen)
-
Die beiden Teile im Quellcode lauten:
.bc_list ul li:hover:after { visibility: visible; .bc_list ul li:after { content: ''; visibility: hidden; position: absolute; top: 260px; left: 40px; display: block; width: 219px; height: 40px; background: url(../images/features/shadow3.png) 0 0 no-repeat; -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -o-transition: all .4s linear; -ms-transition: all .4s linear; transition: all .4s linear; }
Wie du also sehen kannst, ist der Schatten ein PNG mit transparentem Hintergrund. Mit einem :hover auf das LI-Element wird der Schatten eingeblendet. Ausserdem bewegt sich das Runde DIV nach oben. -
Im konkreten Fall wird dieser Schatten, der beim :hover über der einer der drei Grafiken erscheint, nicht durch box-shodow erzeugt sondern ganz herkömmlich mit Hilfe einer Grafik, die mit einer CSS-transition-Eigenschaft eingeblendet wird. Einzelheiten findest du, in dem du dir die Datei style.css der Website anzeigen lässt und dort nach
.bc_list ul li:after
suchst
Die Hintergrundgrafik hat den Namen
shadow3.png
Wenn du nicht darauf fixiert bist, das ganz genuaso zu machen, so findest du hier
http://www.webmasterpro.de/coding/article/elementschatten-mit-css3-box-shadow.html
ein paar kleine Tricks zum Positionieren von Schatten.
Edit:
Hier noch eine kleine Spielerei zum Thema
#schattendemo{ width: 100px; height: 100px; border-radius: 50px; background-color: red; position: relative; transition-property: all; transition-duration: 0.5s; } #schattendemo:hover{ margin-top: -20px; } #schattendemo:after{ content: ''; position: absolute; top: 85px; left:10px; width: 80px; height: 20px; border-radius: 40px / 10px; box-shadow: 10px 10px 1px 2px rgba(150, 20, 25, 0); } #schattendemo:hover:after{ box-shadow: 10px 10px 1px 2px rgba(150, 20, 25, .5); transition-property: all; transition-duration: 0.5s; }
Beitrag zuletzt geändert: 30.6.2014 0:54:48 von mein-wunschname -
fatfreddy schrieb:
Die Kreisform ist eine Canvasmaske die das quadratische Bild beschneidet
Der Farbwechsel beim Hovern wird mit einem Jquery-Plugin (*click*) realisiert.
Alles im Quellcode der Seite ablesbar.
(Wenn Du Firefox nutzt: Rechtsklick ins Bild; "Element untersuchen" anklicken, lesen)
Ja hab es untersucht und in Firefox auch alle zwischengespeicherten Grafiken angesehen, hatte es irgendwie nicht gefunden, danke.
Ich perönlich nutze einen div container mit 50% border-radius und overflow hidden um meine Kreise zu erzeugen. So kann ich mit gechachtelten divs und unterschiedlichen transition times ein bissel mehr anstellen als nur den container nach oben zu verschieben ohne Javaskript zu brauchen.
Aber ein Bild von schwaz zur Farbe übergehen zu lassen, geht leider nicht css only, zumindest nicht mit firefox.
mein-wunschname schrieb:
.bc_list ul li:after
suchst
Die Hintergrundgrafik hat den Namen
shadow3.png
Wenn du nicht darauf fixiert bist, das ganz genuaso zu machen, so findest du hier
http://www.webmasterpro.de/coding/article/elementschatten-mit-css3-box-shadow.html
ein paar kleine Tricks zum Positionieren von Schatten
Danke, im konkreten Fall bekomme ich leider keinen schmalen runden Schatten mit schönem Verlauf mit box-shadow hin. Denke werde hierfür wohl nicht um eine Grafik herum kommen. Einzige was ich jetzt noch teste ist die Vezerrung mit skew. Vielleicht bringt das ja bessere Ergebnisse. -
fatfreddy schrieb:
reimenseimen schrieb:
Hat jemand eine Ahnung, wie der Schatten erstellt wurde?
Das ist einfach ein Bild, daß dem List-Tag als Hintergrund zugewiesen wurde und nur beim Hovern, durch Verschiebung des Vordergrundbildes sichtbar wird.
Die Kreisform ist eine Canvasmaske die das quadratische Bild beschneidet
Der Farbwechsel beim Hovern wird mit einem Jquery-Plugin (*click*) realisiert.
Alles im Quellcode der Seite ablesbar.
(Wenn Du Firefox nutzt: Rechtsklick ins Bild; "Element untersuchen" anklicken, lesen)
Ja, alles ablesebar, aber wenn dann richtig. -
mein-wunschname schrieb:
Edit:
Hier noch eine kleine Spielerei zum Thema
Auch ein schöner Schatten und ein guter Einstieg für mich damit ein wenig herum zu experimentieren, danke nochmal.
So Experiment abgeschlossen. Was mich vor deinem netten Schattendemo Beispiel darin gehindert hatte einen schönen Schatten mit box-shadow zu kreiren, war das Unbewusstein, dass ich den border-radius getrennt für Höhe Und Breite angeben kann. Somit habe ich natürlich keine schmalen runden Container bekommen.
Was im Vergleich zu der Variante mit der PNG, an der ich mich orientiert habe, immer noch nicht geht, ist den Schatten in die Breite verlaufen zu lassen. Aber das muss ja nicht unbedingt sein.
Habe die Schattendemo angepasst und hier ist mein Ergebnis mit ein paar Verbesserungen. Ich habe zu einem die Deklaration des box-shadow aus dem :after heraus genommen und nur in hover:after gelassen. Somit entsteht und verläuft der Schatten während der Transition. Des Weiteren habe ich den Container schmäler gemacht, ihm einen linearen Verlauf gegeben und lasse ihn während der Transition schmäler werden. Last, but not least, verschiebe ich den Schatten in seiner Position um den Wert des margin-top beim hover. Somit bleibt der Schatten, wo er ist und wandert nicht mit hoch. Ansonsten habe ich nur Farbwerte, Größen und Positionen angepasst, die dem Effekt aber nichts zur Sache tun.
Endergebnis: Aufsteigender Kreis beim hovern, der einen zuerst dunkleren Schlagschatten in der Mitte wirft,außen einen weicheren Schatten hat und während des Aufsteigens der dunklere Teil kleiner wird und der weichere Teil größer und weicher. Sprich ein ziemlich natürlicher Schatten :)
Parameter lassen sich natürlich noch optimieren, umgesetzt für Mozilla(linear gradient). Hier der Code:
#schattendemo2:hover{ margin-top: -20px; } #schattendemo2:after{ content: ''; position: absolute; bottom: -20px; left:20px; width: 60px; height: 6px; border-radius: 40px / 3px; } #schattendemo2:hover:after{ box-shadow: 0px 0px 3px 8px rgba(20, 20,20, .5); transition-property: all; transition-duration: 0.5s; bottom: -40px; height: 2px; border-radius: 40px/1px; background-color: black; background-image: -moz-linear-gradient(left,rgb(52, 52,52) 0%,rgb(50, 50,50) 50%,rgb(55, 55,55) 100%); }
Beitrag zuletzt geändert: 30.6.2014 16:13:34 von reimenseimen -
Aber ein Bild von schwaz zur Farbe übergehen zu lassen, geht leider nicht css only, zumindest nicht mit firefox.
Geht auf jeden Fall.
Du brauchst dein Bild in Farbe und wendest darauf
filter: grayscale(1); -webkit-filter: grayscale(1);
an. Mit einem transition-effect bei :hover nimmt du grayscale weg und dein Bild wird farbig. Da FF auf Webkit basiert, sollte das auch dort gehen. -
tct schrieb:
Aber ein Bild von schwaz zur Farbe übergehen zu lassen, geht leider nicht css only, zumindest nicht mit firefox.
Geht auf jeden Fall.
Du brauchst dein Bild in Farbe und wendest darauf
filter: grayscale(1); -webkit-filter: grayscale(1);
an. Mit einem transition-effect bei :hover nimmt du grayscale weg und dein Bild wird farbig. Da FF auf Webkit basiert, sollte das auch dort gehen.
Also in Firefox geht es nicht einfach über filter:grayscale. In Firefox muss man den svg grayscale filter verwenden. Dabei gibt es aber keine Transition, sondern es schaltet direkt auf Farbe um. -
reimenseimen schrieb:
Also in Firefox geht es nicht einfach über filter:grayscale. In Firefox muss man den svg grayscale filter verwenden. Dabei gibt es aber keine Transition, sondern es schaltet direkt auf Farbe um.
Stimmt, Entschuldigung, ich habe mich verlesen. Es stand NO filter support for Firefox. Kommt aber bestimmt noch. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
