styles.css
Aus Infopedia
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
.flip-card { | .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 { | .flip-card-inner { | ||
Zeile 34: | Zeile 37: | ||
} | } | ||
.flip-card-front { | .flip-card-front { | ||
− | |||
color: black; | color: black; | ||
} | } | ||
.flip-card-back { | .flip-card-back { | ||
+ | color: black; | ||
background-color: #bbb; | background-color: #bbb; | ||
− | |||
transform: rotateY(180deg) translateX(250px); | 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; }