Schattenränder hervorheben.

Alex3D schrieb am 20.02.2018 um 11:58 Uhr

Hallo Leute. Ich hätte sehr gerne so wie hier auf dieser Website, wenn man mit dem Mauszeiger über die quadratischen Flächen geht, das die Schattenränder erscheinen.: http://xaratemplate.co.uk/ Habt Ihr da einen guten Tipp. Wenn ja wäre suuuper. ;-)

Kommentare

BilderMacher schrieb am 20.02.2018 um 12:56 Uhr

Du kannst dir das alles selbst erarbeiten. Lade dir die Seite in ein leeres WebDesigner-Projekt.

Zusammengesetzt wurden die Rechteck-Schatten aus:

weitere Ebenen (für jedes Rechteck mit Schatten eine)
Rechteck-Objekte (2 für jede Fläche)
Text-Objekte (2 für jede Fläche)

Auf der MouseOver-Ebene liegen ein kleines Rechteck und der Text

Erstelle eine neue Ebene (ich habe sie im Beispiel recOver benannt) und lege ein weiteres, größeres Rechteck und den Text dort ab

Mit dem Schatten-Werkzeug den Schatten für das größere Rechteck erstellen

Die Objekte deckungsgleich übereinander legen.
Zur besseren Orientierung kann man mit dem Transparent-Werkzeug die Objekte auf recOver durchsichtig manchen bis alles passt.

Transparenz wieder zurücksetzen und die recOver-Ebene ausblenden.

Das sichtbare Rechteck auf MouseOver markieren, das Kontextmenü und hier "Web-Animation..." öffnen.

Wähle die entsprechende Ebene aus und übernimm die Einstellung.

Ein Rechteck ist fertig nachgebaut.

Das Grundprinzip ist immer gleich ...für die weiteren Rechtecke.

BeRo schrieb am 20.02.2018 um 13:10 Uhr

[...] wenn man mit dem Mauszeiger über die quadratischen Flächen geht, das die Schattenränder erscheinen [...]

Das machst Du heute Abend, mit der linken Hand in der Halbzeitpause 😉

Obwohl Xara für den Effekt die ganz dicke Keule ausgepackt hat und mit Unterstützung etlicher Scriptdateien (JQuery, JS, CSS) zum Ziel gekommen ist, geht es auch sehr viel einfacher...

Erzeuge mit einem Grafikprogramm Deiner Wahl einen geeigneten Schatten in Kreisform oder such' Dir hier einen fertigen aus. Die Datei sollte das PNG Format haben, mit Transparenz.
Leg' eine neue Ebene an, die Du z. B. Shadow nennst
In die Ebene legst Du den Schatten und darüber eine Kopie des Rechtecks, das beim "Überfahren" den Schattenhintergrund bekommen soll
Über die Kontext Menüoption weist Du dem Rechteck über die Option "Popup Ebene anzeigen" den gewünschten MouseOver Effekt zu
Das war's dann auch schon.

Im Normalzustand sieht die Seite so aus:

Und bei MouseOver so:

Bei der Gestaltung des Schattens sind Dir natürlich keine Grenzen gesetzt... 😊

Viel Erfolg

----------------------------

Edit: 13:15 h
@Bildermacher war schneller 😭
Aber, er hat einen etwas anderen Lösungsansatz gefunden, ich lass' meine Version daher "drin", dann hat @Sir.Charles.Wheatstone genug Stoff zum Experimentieren 😀

Alex3D schrieb am 20.02.2018 um 14:01 Uhr

Danke für die Infos. Werde ich testen. 😊 Experimentieren ist klasse, wenn man viel Zeit hat. Bei mir ist es noch immer der WD12. Parallel ist auch der WD15 bei mir installiert. Habe damit immer noch das bescheuerte Umlaute Problem. 😠

BilderMacher schrieb am 20.02.2018 um 14:13 Uhr

"Experimentieren" war eigentlich gar nicht nötig.
Grundkenntnisse zu Popup-Ebenen/Mouseover-Effekte und kennen der veränderten Funktionen genügt, um an das Ziel zu gelangen. 😉

https://www.magix.com/de/support/know-how/tutorial-videos/web-designer-premium/

Zeit zur Einarbeitung sollte man sich aber nehmen, wenn man sich den Funktionen des Programms nähern will um es auch entsprechend mit allen Funktionen anwenden zu können.

Alex3D schrieb am 20.02.2018 um 21:42 Uhr

So Pause jetzt. 😁 Die Bayern gewinnen wieder. 😁😁😁 Hab ein wenig gebastelt. Die Ebenen sollten sich nach und nach zeigen. Später mit der jeweiligen Verlinkung zu den unteren Seiten. Mauszeiger sollte sich auch verändern.