Compare commits
10 Commits
6af3ad4bc7
...
dfff5da271
Author | SHA1 | Date |
---|---|---|
The Magician | dfff5da271 | |
The Magician | 9c39cd0e79 | |
The Magician | 12f7dfb42e | |
The Magician | 3b4abe6468 | |
The Magician | 90bb595971 | |
The Magician | e36272d785 | |
The Magician | 80bf6d7bea | |
The Magician | 02debb34fa | |
The Magician | ef0189113e | |
The Magician | 7605065331 |
|
@ -11,7 +11,9 @@
|
||||||
"url": "git+https://git.themagician.cc/TheMagician/tarotcard.css.git"
|
"url": "git+https://git.themagician.cc/TheMagician/tarotcard.css.git"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"tarotcard.css"
|
"tarotcard.css",
|
||||||
|
"tarotcard-deal.css",
|
||||||
|
"tarotcard-flip.css"
|
||||||
],
|
],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"css",
|
"css",
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
@keyframes flip-card {
|
||||||
|
to {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card--flip-automatically .tarot-card__content {
|
||||||
|
animation: flip-card 800ms 2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card--flip-on-hover {
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card--flip-on-hover:hover .tarot-card__content {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card--flip-on-hover .tarot-card__content,
|
||||||
|
.tarot-card--flip-automatically .tarot-card__content {
|
||||||
|
transition: transform 800ms;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card__side {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card__side--back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
|
@ -2,11 +2,31 @@
|
||||||
--tarot-card-title-background-color: rgb(234, 191, 99);
|
--tarot-card-title-background-color: rgb(234, 191, 99);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after {
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.tarot-card {
|
.tarot-card {
|
||||||
aspect-ratio: 7 / 12;
|
aspect-ratio: 7 / 12;
|
||||||
|
|
||||||
max-height: 80vh;
|
|
||||||
max-width: 80vw;
|
max-width: 80vw;
|
||||||
|
max-height: 80vh;
|
||||||
|
min-height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card__link {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarot-card__content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
border: 1em solid white;
|
border: 1em solid white;
|
||||||
}
|
}
|
||||||
|
@ -35,8 +55,9 @@
|
||||||
.tarot-card__section--title {
|
.tarot-card__section--title {
|
||||||
height: 10%;
|
height: 10%;
|
||||||
|
|
||||||
display: grid;
|
display: flex;
|
||||||
place-items: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
background: var(--tarot-card-title-background-color);
|
background: var(--tarot-card-title-background-color);
|
||||||
}
|
}
|
||||||
|
@ -44,7 +65,12 @@
|
||||||
.tarot-card__title {
|
.tarot-card__title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
font-size: clamp(0.8rem, 6vw, 1.8rem);
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
font-size: clamp(0.8rem, 5vw, 1.2rem);
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
128
test/index.html
128
test/index.html
|
@ -20,36 +20,142 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
gap: 2em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flip-card-back-section {
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<link rel="stylesheet" href="styles/tarotcard.css"/>
|
<link rel="stylesheet" href="styles/tarotcard.css"/>
|
||||||
<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
|
<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
|
||||||
|
<link rel="stylesheet" href="styles/tarotcard-flip.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="center-grid">
|
<div class="center-grid">
|
||||||
|
|
||||||
<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
|
<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
|
||||||
<div id="simple-card" class="tarot-card">
|
<div id="simple-card" class="tarot-card">
|
||||||
<div class="tarot-card__section tarot-card__section--art">
|
<div class="tarot-card__content">
|
||||||
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image." title="The Simple Card artwork image.">
|
<div class="tarot-card__section tarot-card__section--art">
|
||||||
</div>
|
<img class="tarot-card__art"
|
||||||
|
src="images/card_art_std.jpg"
|
||||||
|
alt="The Simple Card artwork image."
|
||||||
|
title="The Simple Card artwork image." />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="tarot-card__section tarot-card__section--title">
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
<p class="tarot-card__title">The Simple Card.</p>
|
<p class="tarot-card__title">This card has a title with very long text.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Identical to The Simple Card, but has a link. -->
|
||||||
|
<div id="link-card" class="tarot-card">
|
||||||
|
<a class="tarot-card__link" href="https://themagician.cc">
|
||||||
|
<div class="tarot-card__content">
|
||||||
|
<div class="tarot-card__section tarot-card__section--art">
|
||||||
|
<img class="tarot-card__art"
|
||||||
|
src="images/card_art_std.jpg"
|
||||||
|
alt="The Link Card artwork image."
|
||||||
|
title="The Link Card artwork image." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
|
<p class="tarot-card__title">The Link Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
|
<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
|
||||||
<div id="deal-card" class="tarot-card tarot-card--deal">
|
<div id="deal-card" class="tarot-card tarot-card--deal">
|
||||||
<div class="tarot-card__section tarot-card__section--art">
|
<div class="tarot-card__content">
|
||||||
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image.">
|
<div class="tarot-card__section tarot-card__section--art">
|
||||||
</div>
|
<img class="tarot-card__art"
|
||||||
|
src="images/card_art_std.jpg"
|
||||||
|
alt="The Deal Card artwork image."
|
||||||
|
title="The Deal Card artwork image." />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="tarot-card__section tarot-card__section--title">
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
<p class="tarot-card__title">The Deal Card.</p>
|
<p class="tarot-card__title">The Deal Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
|
||||||
|
<div id="flip-card" class="tarot-card tarot-card--flip-on-hover">
|
||||||
|
<div class="tarot-card__content">
|
||||||
|
<div class="tarot-card__side tarot-card__side--front">
|
||||||
|
<div class="tarot-card__section tarot-card__section--art">
|
||||||
|
<img class="tarot-card__art"
|
||||||
|
src="images/card_art_std.jpg"
|
||||||
|
alt="The Flip Card artwork image."
|
||||||
|
title="The Flip Card artwork image." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
|
<p class="tarot-card__title">The Flip Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__side tarot-card__side--back">
|
||||||
|
<div class="tarot-card__section flip-card-back-section">
|
||||||
|
<p>This is the back side of The Flip Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Uses both the "deal" and "flip" animations. -->
|
||||||
|
<div id="deal-flip-card" class="tarot-card tarot-card--deal tarot-card--flip-on-hover">
|
||||||
|
<div class="tarot-card__content">
|
||||||
|
<div class="tarot-card__side tarot-card__side--front">
|
||||||
|
<div class="tarot-card__section tarot-card__section--art">
|
||||||
|
<img class="tarot-card__art"
|
||||||
|
src="images/card_art_std.jpg"
|
||||||
|
alt="The Deal/Flip Card artwork image."
|
||||||
|
title="The Deal/Flip Card artwork image." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
|
<p class="tarot-card__title">The Deal/Flip Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__side tarot-card__side--back">
|
||||||
|
<div class="tarot-card__section flip-card-back-section">
|
||||||
|
<p>This is the back side of The Deal/Flip Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Uses the "automatic flip" animation. -->
|
||||||
|
<div id="auto-flip-card" class="tarot-card tarot-card--flip-automatically">
|
||||||
|
<div class="tarot-card__content">
|
||||||
|
<div class="tarot-card__side tarot-card__side--front">
|
||||||
|
<div class="tarot-card__section tarot-card__section--art">
|
||||||
|
<img class="tarot-card__art"
|
||||||
|
src="images/card_art_std.jpg"
|
||||||
|
alt="The Autoflip Card artwork image."
|
||||||
|
title="The Autoflip Card artwork image." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
|
<p class="tarot-card__title">The Autoflip Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tarot-card__side tarot-card__side--back">
|
||||||
|
<div class="tarot-card__section flip-card-back-section">
|
||||||
|
<p>This is the back side of The Autoflip Card.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
../../tarotcard-flip.css
|
Loading…
Reference in New Issue