styles.css
Aus Infopedia
(Die Seite wurde neu angelegt: „/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of t…“) |
|||
| (16 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | |||
.flip-card { | .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 { | .flip-card-inner { | ||
| − | + | display: flex; | |
| − | width: | + | transform-style: preserve-3d; |
| − | height: | + | transition: transform 0.5s; |
| + | border-radius: 0.25rem; | ||
| + | flex: 1; | ||
| + | width: 250px; | ||
| + | height: 250px; | ||
| + | margin: auto; | ||
text-align: center; | 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 { | |
| − | .flip-card:hover .flip-card-inner { | + | transform: scale(0.975); |
| − | transform: rotateY(180deg); | + | } |
| + | .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 { | .flip-card-front, .flip-card-back { | ||
| − | |||
| − | |||
| − | |||
backface-visibility: hidden; | 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 { | .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 { | |
| − | .flip-card-back { | + | height:230px; |
| − | + | display: block; | |
| − | + | color: #333333; | |
| − | + | text-decoration:none; | |
| + | text-align: center; | ||
| + | font-weight: bold; | ||
} | } | ||
Aktuelle Version vom 31. August 2022, 12:08 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;
}
