styles.css

Aus Infopedia
Wechseln zu:Navigation, Suche
 
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
.flipcard:hover .flipcard-body, .flipcard:focus .flipcard-body {
+
.flip-card {
transform: rotateY(-180deg);
+
  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 {
.flipcard-back {
+
  display: flex;
transform: rotateY(-180deg);
+
  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);
 
}
 
}
  
.flipcard {
+
.flip-card:active {
perspective: 40rem;
+
  transform: scale(0.975);
transition: z-index, transform 0.2s;
 
transition-delay: 0.7s, 0s;
 
z-index: 0;
 
  padding: 10px;
 
  text-decoration: none;
 
 
}
 
}
 
+
.flip-card.hasHover:hover .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card.touchDevice-hovered .flip-card-inner {
.flipcard:hover {
+
  transform: rotateY(-180deg);
transition-delay: 0s;
 
z-index: 1;
 
 
}
 
}
  
.flipcard:active {
+
.flip-card-front, .flip-card-back {
transform: scale(0.975);
+
  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 {
.flipcard-body {
+
  color: black;
display: flex;
 
transform-style: preserve-3d;
 
transition: 0.7s transform;
 
border-radius: 0.25rem;
 
flex: 1;
 
  width: 250px;
 
  height: 250px;
 
  margin: auto;
 
 
}
 
}
 
+
.flip-card-back {
.flipcard-front, .flipcard-back {
+
  color: black;
backface-visibility: hidden;
+
  background-color: #bbb;
min-width: 100%;
+
  transform: rotateY(180deg) translateX(250px);
display: flex;
 
align-items: center;
 
background-color: white;
 
box-sizing: border-box;
 
border-radius: 0.25rem;
 
 
}
 
}
  
.shadow, .flipcard-front, .flipcard-back {
+
.flip-card-back a {
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);
+
  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;
}