styles.css
Aus Infopedia
(Die Seite wurde neu angelegt: „ .flip-card { perspective: 40rem; transition: z-index, transform 0.2s; transition-delay: 0.7s, 0s; z-index: 0; padding: 10px; text-decoration: none…“) |
|||
(11 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
− | + | .flip-card { | |
− | |||
− | |||
− | |||
− | |||
padding: 10px; | padding: 10px; | ||
text-decoration: none; | text-decoration: none; | ||
+ | -webkit-user-select: none; /* Webkit */ | ||
+ | -moz-user-select: none; /* Firefox */ | ||
+ | -ms-user-select: none; /* Edge*/ | ||
+ | user-select: none; /* Future-proof*/ | ||
} | } | ||
− | + | .flip-card-inner { | |
− | |||
display: flex; | display: flex; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
transition: transform 0.5s; | transition: transform 0.5s; | ||
− | |||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
flex: 1; | flex: 1; | ||
Zeile 22: | Zeile 20: | ||
} | } | ||
− | + | .flip-card:active { | |
− | |||
− | |||
− | |||
− | |||
− | |||
transform: scale(0.975); | transform: scale(0.975); | ||
} | } | ||
− | + | .flip-card.hasHover:hover .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card.touchDevice-hovered .flip-card-inner { | |
− | + | transform: rotateY(-180deg); | |
− | transform: | ||
} | } | ||
− | + | .flip-card-front, .flip-card-back { | |
backface-visibility: hidden; | backface-visibility: hidden; | ||
min-width: 100%; | min-width: 100%; | ||
Zeile 44: | Zeile 36: | ||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
} | } | ||
− | |||
.flip-card-front { | .flip-card-front { | ||
+ | color: black; | ||
+ | } | ||
+ | .flip-card-back { | ||
+ | color: black; | ||
background-color: #bbb; | background-color: #bbb; | ||
− | + | transform: rotateY(180deg) translateX(250px); | |
} | } | ||
− | + | .flip-card-back a { | |
− | + | height:230px; | |
− | + | display: block; | |
− | + | color: #333333; | |
+ | text-decoration:none; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
} | } |
Aktuelle Version vom 13. August 2022, 14:19 Uhr
.flip-card { padding: 10px; text-decoration: none; -webkit-user-select: none; /* Webkit */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Edge*/ user-select: none; /* Future-proof*/ } .flip-card-inner { display: flex; transform-style: preserve-3d; transition: transform 0.5s; border-radius: 0.25rem; flex: 1; width: 250px; height: 250px; margin: auto; text-align: center; box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04); } .flip-card:active { transform: scale(0.975); } .flip-card.hasHover:hover .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card.touchDevice-hovered .flip-card-inner { transform: rotateY(-180deg); } .flip-card-front, .flip-card-back { backface-visibility: hidden; min-width: 100%; display: flex; align-items: center; background-color: white; box-sizing: border-box; border-radius: 0.25rem; } .flip-card-front { color: black; } .flip-card-back { color: black; background-color: #bbb; transform: rotateY(180deg) translateX(250px); } .flip-card-back a { height:230px; display: block; color: #333333; text-decoration:none; text-align: center; font-weight: bold; }