TheMagician
/
tarotcard.css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: TheMagician:6af3ad4bc78f806159438b430c2ea02113486932
Branches Tags
TheMagician:main
...
compare: TheMagician:dfff5da2714b04a68206c0bad85601d1166eed3a
Branches Tags
TheMagician:main

10 Commits
6af3ad4bc7 ... dfff5da271

Author SHA1 Message Date
The Magician dfff5da271 Fix sizing issues, display test page nicely 2023-12-02 15:30:05 +00:00
The Magician 9c39cd0e79 Add tarot-card__link class 2023-12-02 15:14:23 +00:00
The Magician 12f7dfb42e Add automatic flip animation 2023-12-02 13:30:23 +00:00
The Magician 3b4abe6468 Add test card for deal and flip animations together 2023-12-02 13:18:08 +00:00
The Magician 90bb595971 Add flippable tarot cards 2023-12-02 13:12:49 +00:00
The Magician e36272d785 Improve display of card titles 2023-12-02 11:29:49 +00:00
The Magician 80bf6d7bea Add back side to The Flip Card 2023-12-02 10:46:43 +00:00
The Magician 02debb34fa Move white card border to .tarot-card__content 2023-12-02 10:45:30 +00:00
The Magician ef0189113e Add tarotcard-flip.css 2023-12-01 17:36:00 +00:00
The Magician 7605065331 Add tarotcard-deal.css to package.json 2023-12-01 17:33:46 +00:00
5 changed files with 187 additions and 16 deletions
Show Stats Expand all files Collapse all files

4
package.json
View File

@ -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",

36
tarotcard-flip.css Normal file
View File

@ -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);
}

34
tarotcard.css
View File

@ -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;
} }

114
test/index.html
View File

@ -20,38 +20,144 @@
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__content">
<div class="tarot-card__section tarot-card__section--art"> <div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image." title="The Simple Card artwork image."> <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>
<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__content">
<div class="tarot-card__section tarot-card__section--art"> <div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image."> <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>
<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> </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>
</body> </body>

1
test/styles/tarotcard-flip.css Symbolic link
View File

@ -0,0 +1 @@
../../tarotcard-flip.css