8 500
edições
MediaWiki:Common.css (ver código-fonte)
Edição das 16h39min de 5 de agosto de 2023
, 5 de agosto de 2023sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 486: | Linha 486: | ||
margin-top: -10px; | margin-top: -10px; | ||
} | } | ||
.slider{ | |||
position: relative; | |||
height: 400px; | |||
} | |||
.slide{ | |||
width:100%; | |||
height: 100%; | |||
border-radius: 5px; | |||
animation: fadeInSlide 1s; | |||
} | |||
.slider-bullet{ | |||
position: absolute; | |||
top: 20px; | |||
height: 10px; | |||
width: 10px; | |||
background-color: #e5e5e5; | |||
border-radius: 50%; | |||
transition:1s; | |||
cursor: pointer; | |||
} | |||
/* History Page */ | /* History Page */ | ||
| Linha 711: | Linha 733: | ||
} | } | ||
@keyframes fadeInSlide{ | |||
from {opacity: 0;} | |||
to {opacity: 1;} | |||
} | |||
| Linha 716: | Linha 742: | ||
/* Testes */ | /* Testes */ | ||
. | :root { | ||
--card-height: 300px; | |||
--card-width: calc(var(--card-height) / 1.5); | |||
} | |||
* { | |||
box-sizing: border-box; | |||
} | |||
body { | |||
width: 100vw; | |||
height: 100vh; | |||
margin: 0; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
background: #191c29; | |||
} | |||
.card { | |||
width: var(--card-width); | |||
height: var(--card-height); | |||
position: relative; | position: relative; | ||
height: | display: flex; | ||
justify-content: center; | |||
align-items: flex-end; | |||
padding: 0 36px; | |||
perspective: 2500px; | |||
margin: 0 50px; | |||
} | |||
.cover-image { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
.wrapper { | |||
transition: all 0.5s; | |||
position: absolute; | |||
width: 100%; | |||
z-index: -1; | |||
} | |||
.card:hover .wrapper { | |||
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); | |||
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); | |||
-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); | |||
-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); | |||
} | |||
.wrapper::before, | |||
.wrapper::after { | |||
content: ""; | |||
opacity: 0; | |||
width: 100%; | |||
height: 80px; | |||
transition: all 0.5s; | |||
position: absolute; | |||
left: 0; | |||
} | } | ||
. | .wrapper::before { | ||
top: 0; | |||
height: 100%; | height: 100%; | ||
background-image: linear-gradient( | |||
to top, | |||
transparent 46%, | |||
rgba(12, 13, 19, 0.5) 68%, | |||
rgba(12, 13, 19) 97% | |||
); | |||
} | |||
.wrapper::after { | |||
bottom: 0; | |||
opacity: 1; | |||
background-image: linear-gradient( | |||
to bottom, | |||
transparent 46%, | |||
rgba(12, 13, 19, 0.5) 68%, | |||
rgba(12, 13, 19) 97% | |||
); | |||
} | |||
.card:hover .wrapper::before, | |||
.wrapper::after { | |||
opacity: 1; | |||
} | |||
.card:hover .wrapper::after { | |||
height: 120px; | |||
} | |||
.title { | |||
width: 100%; | |||
transition: transform 0.5s; | |||
} | |||
.card:hover .title { | |||
transform: translate3d(0%, -50px, 100px); | |||
} | } | ||
. | |||
.character { | |||
width: 100%; | |||
opacity: 0; | |||
transition: all 0.5s; | |||
position: absolute; | position: absolute; | ||
z-index: -1; | |||
} | } | ||
.card:hover .character { | |||
opacity: 1; | |||
transform: translate3d(0%, -30%, 100px); | |||
} | } | ||