More actions
Added Rayanth's True Card Prototype |
Added CSS code, the engine of the cards |
||
| Line 153: | Line 153: | ||
https://onecreativedragon.com/share/uniwiki/cards/cards.html | https://onecreativedragon.com/share/uniwiki/cards/cards.html | ||
<code><nowiki> | |||
.center { | |||
width: 100%; | |||
text-align: center; | |||
} | |||
*.center * { | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
img { | |||
border: 0; | |||
vertical-align: middle; | |||
} | |||
.card { | |||
display: inline-block; | |||
margin: 2em; | |||
background-position: center; | |||
background-size: 100%; | |||
border: 1px solid silver; | |||
position: relative; | |||
} | |||
.card-title { | |||
display: inline-block; | |||
width: 100px; | |||
padding: 3px; | |||
margin-top: 20px; | |||
background-color: black; | |||
} | |||
.card-text { | |||
position: absolute; | |||
bottom: 0; | |||
width: 100%; | |||
background-color: black; | |||
min-height: 3em; | |||
} | |||
.standard-card { | |||
width: 220px; | |||
height: 300px; | |||
} | |||
.wide-card { | |||
width: 632px; | |||
height: 132px; | |||
} | |||
.wide-card:hover { | |||
animation-name: embiggen-card; | |||
animation-duration: 3s; | |||
animation-fill-mode: forwards; | |||
} | |||
.standard-card:hover { | |||
animation-name: embiggen-card; | |||
animation-duration: 3s; | |||
animation-fill-mode: forwards; | |||
} | |||
@keyframes embiggen-card { | |||
0% { | |||
transform: scale(1.00); | |||
background-size: 100%; | |||
} | |||
5% { | |||
transform: scale(1.03); | |||
background-size: 100%; | |||
} | |||
10% { | |||
transform: scale(1.03); | |||
background-size: 100%; | |||
} | |||
100% { | |||
transform: scale(1.03); | |||
background-size: 110%; | |||
} | |||
} | |||
</nowiki></code> | |||