(Página reemplazada por «→Los estilos CSS colocados aquí se aplicarán a todas las apariencias: ») Etiqueta: Reemplazo |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | /* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | ||
/* ========================= Barra de Navegación ========================= */ | |||
.drogon { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
} | |||
.house-lists { | |||
display: flex; | |||
} | |||
.house { | |||
position: relative; | |||
overflow: hidden; | |||
width: 50px; | |||
height: 150px; | |||
background-size: auto 105%; | |||
background-position: center; | |||
border-radius: 60px; | |||
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1); | |||
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1); | |||
box-shadow: 0px 0px 10px -1px rgba(255,255,255,1); | |||
min-width: 0px; | |||
transition: .5s ease; | |||
margin: 20px; | |||
} | |||
.sigil { | |||
min-width: 10px; | |||
text-align: center; | |||
position: absolute; | |||
bottom: 0px; | |||
} | |||
.sigil img { | |||
/*filter: brightness(0) invert(1);*/ | |||
max-width: 40px; | |||
max-height: 40px; | |||
} | |||
.house:hover { | |||
min-width: 200px; | |||
background-size: auto 100%; | |||
border-radius: 10px; | |||
} | |||
.house-inner { | |||
position: relative; | |||
height: 100%; | |||
display: flex; | |||
align-items: flex-end; | |||
} | |||
.house::before { | |||
content: ''; | |||
width: 100%; | |||
height: 100%; | |||
background: rgba(0, 0, 0, 0.5); | |||
position: absolute; | |||
transition: .5s ease; | |||
} | |||
.house:hover::before{ | |||
background: none; | |||
} | |||
.house-name { | |||
color: #fff; | |||
transform: rotate(-90deg); | |||
text-shadow:0 2px 7px black; | |||
font-size: 12px; | |||
letter-spacing: 2px; | |||
transition: .5s ease; | |||
max-width: 100%; | |||
margin-bottom: 120%; | |||
} | |||
.house:hover .house-name{ | |||
transform:rotate(0deg); | |||
margin-bottom: 3%; | |||
margin-left:20% | |||
} |
Revisión del 23:16 30 may 2020
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* ========================= Barra de Navegación ========================= */
.drogon {
position: absolute;
top: 0;
right: 0;
}
.house-lists {
display: flex;
}
.house {
position: relative;
overflow: hidden;
width: 50px;
height: 150px;
background-size: auto 105%;
background-position: center;
border-radius: 60px;
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
min-width: 0px;
transition: .5s ease;
margin: 20px;
}
.sigil {
min-width: 10px;
text-align: center;
position: absolute;
bottom: 0px;
}
.sigil img {
/*filter: brightness(0) invert(1);*/
max-width: 40px;
max-height: 40px;
}
.house:hover {
min-width: 200px;
background-size: auto 100%;
border-radius: 10px;
}
.house-inner {
position: relative;
height: 100%;
display: flex;
align-items: flex-end;
}
.house::before {
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
transition: .5s ease;
}
.house:hover::before{
background: none;
}
.house-name {
color: #fff;
transform: rotate(-90deg);
text-shadow:0 2px 7px black;
font-size: 12px;
letter-spacing: 2px;
transition: .5s ease;
max-width: 100%;
margin-bottom: 120%;
}
.house:hover .house-name{
transform:rotate(0deg);
margin-bottom: 3%;
margin-left:20%
}