Ein altes Script zum Funktionieren bringen?


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Webhufi

Mitglied
;-) Du kannst nicht an alles denken...

Jetzt sehe ich was, und das sieht klasse aus!

Ich werde noch ein wenig testen und überlegen, inwieweit ich dich noch weiter 'beschäftigen' kann... :)

Z.B. alles aus dem .js rausschmeißen, was für diese Seite nicht relevant ist! Da steht echt unnützes Zeug drin.
 

Webhufi

Mitglied
Das ist einfach spitzenklasse, was du da gebastelt hast!

Ich habe den iFrame noch etwas vergrößert: jetzt sieht es auch auf einem größeren Moni klasse aus, auch wenn man etwas scrollen muss. Und es scheint so, dass auch die kleinen Dinger gut damit zurecht kommen.

Du bist eine echte Wucht! Ganz herzlichen und lieben Dank für deine Arbeit! Du glaubst gar nicht, wie sehr ich mich drüber freue...
 

Webhufi

Mitglied
Ich finde nur noch zwei Pixel, die ich sehe und sonst vielleicht niemand: Innerhalb des Lightbox-Rahmens ist oben und links ein zusätzlicher, schwarzer Pixelrahmen zu sehen, rechts und unten aber nicht. Ist das Absicht? Ich finde es etwas störend...

Ich bin nicht sicher, was besser wäre: kein Innenrahmen oder überall gleich? Wo im Code kann ich das ausprobieren?

Nur sehr ungern spreche ich übrigens jemanden ohne echten Namen an. Deshalb nenne ich dich einfach mal Tom!

Viele Grüße
Norbert
 

Sempervivum

Erfahrenes Mitglied
Gut beobachtet! Dieser Rahmen ist ein einfacher 3D-Rahmen, genau wie der um das Notizbuch herum. Er sieht deshalb so unsauber aus, weil die Außenseite rechts und unten gleich der dunkelgrauen Farbe des Overlays ist, so dass sie verschwindet. Ich habe diese mit den Entwicklerwerkzeugen mal auf hellgrau eingestellt, dann sieht der Rahmen so aus, wie er sollte:
hufnagel.png
Ich kommentiere mal das CSS ein wenig, dann kannst Du die Farben so einstellen, wie Du möchtest:
Code:
    <style>
        /* Lightbox */
        #lightbox {
            /* display: none; */
            position: absolute;
            // Der Rahmen der Lightbox: Breite Form Farbe
            // ridge bedeutet: Erhabener 3D-Rahmen
            border: 6px ridge darkgrey;
            background-image: url(parchment.jpg);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0);
            transition: 0.5s;
        }

        #lightbox-ovl {
            display: block;
            position: absolute;
            /* Die Farbe des Overlay: rot, gruen, blau, Deckkraft */
            background-color: rgba(0, 0, 0, 0.7);
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform: scale(0);
            transition: 0.5s;
        }
    </style>
Alles zum Rahmen kannst Du bei Selfhtml nachlesen:
Beste Grüße - Ulrich
 

Webhufi

Mitglied
Gerade habe ich festgestellt, dass beim Start der Seite das graue Overlay leer im Vordergrund steht.
Habe ich da etwas verhunzt?
 

Sempervivum

Erfahrenes Mitglied
Das habe ich nicht von Hand durchgestrichen, sondern das hat das Javascript überschrieben mit transform: scale(1);, man sieht es im Screenshot weiter oben. Der Browser zeigt es dann durchgestrichen an. Während des Screenshots war das Overlay ja eingeblendet.
 

Webhufi

Mitglied
Aha! Danke!
Was mir jetzt noch bleibt, lieber Ulrich, ist ein finaler Dank: Mir hat es Spaß gemacht, durch deine Entwicklung zu lernen, und das Ergebnis lässt sich allemal sehen... :) Und da es dir offensichtlich auch Spaß gemacht hat, haben wir beide etwas davon!
Beste Grüße
Norbert
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…