More actions
Added more interesting Templates |
Added Rayanth's CSS improvements |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 149: | Line 149: | ||
* [https://wiki.factorio.com/Template:Icon Template:Icon] | * [https://wiki.factorio.com/Template:Icon Template:Icon] | ||
* derived from the above [https://wiki.factorio.com/Template:Imagelink Template:Imagelink] | * derived from the above [https://wiki.factorio.com/Template:Imagelink Template:Imagelink] | ||
== Rayanth's Agency Card Prototype == | |||
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 { | |||
overflow: hidden; | |||
visibility: hidden; | |||
position: absolute; | |||
color: black; | |||
bottom: 0; | |||
width: 100%; | |||
background-color: rgba(0, 0, 0, 0.7); | |||
height: 0; | |||
-webkit-transition: all 1.5s ease; | |||
-moz-transition: all 1.5s ease; | |||
-ms-transition: all 1.5s ease; | |||
-o-transition: all 1.5s ease; | |||
transition: all 1.5s ease; | |||
} | |||
.standard-card { | |||
width: 220px; | |||
height: 300px; | |||
} | |||
.wide-card { | |||
width: 632px; | |||
height: 132px; | |||
} | |||
.card:hover { | |||
animation-name: embiggen-card; | |||
animation-duration: 3s; | |||
animation-fill-mode: forwards; | |||
} | |||
.card:hover>.card-text { | |||
visibility: visible; | |||
height: 3.5em; | |||
color: silver; | |||
-webkit-transition: all 1.5s ease; | |||
-moz-transition: all 1.5s ease; | |||
-ms-transition: all 1.5s ease; | |||
-o-transition: all 1.5s ease; | |||
transition: all 1.5s ease; | |||
} | |||
@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%; | |||
} | |||
} | |||
@keyframes card-text-show { | |||
0% { | |||
visibility: hidden; | |||
} | |||
10% { | |||
visibility: visible; | |||
} | |||
} | |||
</nowiki></code> | |||