adventskalender/2025/css/main.css aktualisiert
This commit is contained in:
@@ -144,6 +144,47 @@
|
||||
inset 0 0 10px rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
/* Ergänzung: echtes Öffnen der doppeltüren 6 & 24 mit Pseudo-Flügeln */
|
||||
.door.double::before,
|
||||
.door.double::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--ci-darkgreen) 35%, transparent),
|
||||
color-mix(in srgb, var(--ci-blue) 35%, transparent)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 6px rgba(255,255,255,0.18),
|
||||
0 0 8px rgba(0,0,0,0.3);
|
||||
transition: transform 0.8s ease;
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.door.double::before { left: 0; transform-origin: left center; }
|
||||
.door.double::after { right: 0; transform-origin: right center; }
|
||||
|
||||
/* beide Flügel öffnen sich symmetrisch */
|
||||
.door.double.open::before { transform: rotateY(-115deg); }
|
||||
.door.double.open::after { transform: rotateY(115deg); }
|
||||
|
||||
/* Hover bei geöffneter Doppeltür – bleibt offen, bekommt Glow */
|
||||
.door.double.open:hover::before,
|
||||
.door.double.open:hover::after {
|
||||
transform: scale(1.05) rotateY(var(--fluegel,0));
|
||||
box-shadow:
|
||||
0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
|
||||
inset 0 0 10px rgba(255,255,255,0.25);
|
||||
}
|
||||
.door.double.open::before { --fluegel:-115deg; }
|
||||
.door.double.open::after { --fluegel:115deg; }
|
||||
|
||||
/* === Offenes Türchen – realistische Folie === */
|
||||
.openfield {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user