Paneles sesgados sensibles con CSS puro/CSS3

Vista prévia

Descripción

Paneles adaptables, de pantalla completa y sesgados con un efecto de expansión en el desplazamiento del ratón. Fuertemente basado en el modelo de Flexbox CSS3.

Funcionamiento

Construya la estructura HTML para los paneles sesgados.

<main>

<section>


<article>



Panel 1


</article>

</section>

<section>


<article>



Panel 2


</article>

</section>

<section>


<article>



Panel 3


</article>

</section>

<section>


<article>



Panel 4


</article>

</section>

<section>


<article>



Panel 5


</article>

</section>
</main>

Los principales estilos CSS/CSS3.

main {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

width: 100%;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}
@media (min-width: 630px) {

main {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

width: 130%;

margin-left: -15%;
}
}

main section:not(:first-child):not(:last-child):hover {

-webkit-box-flex: 2;

-webkit-flex: 2;

-ms-flex: 2;

flex: 2;
}

main section:not(:first-child):not(:last-child):hover:after { opacity: .8; }

main section:not(:first-child):not(:last-child):hover article {

opacity: 1;

-webkit-transform: translateY(0);

transform: translateY(0);

-webkit-transition: opacity .2s .2s, -webkit-transform .2s .2s;

transition: opacity .2s .2s, -webkit-transform .2s .2s;

transition: opacity .2s .2s, transform .2s .2s;

transition: opacity .2s .2s, transform .2s .2s, -webkit-transform .2s .2s;
}
@media (min-width: 630px) {

main section:not(:first-child):not(:last-child):hover article {

-webkit-transform: translateY(0) skewX(-15deg);

transform: translateY(0) skewX(-15deg);
}
}

section {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

position: relative;

width: 100%;

min-height: 20vh;

overflow: hidden;

z-index: 1;

-webkit-transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s;

transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s;

transition: flex-grow .2s, opacity .2s;

transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s, -ms-flex-positive .2s;
}

section:before {

content: "";

position: absolute;

width: 100%;

height: 100%;

background-position: center;

background-size: cover;

-webkit-transition: width .2s, -webkit-transform .2s;

transition: width .2s, -webkit-transform .2s;

transition: transform .2s, width .2s;

transition: transform .2s, width .2s, -webkit-transform .2s;
}

section:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: black;

opacity: 0;

-webkit-transition: opacity .2s;

transition: opacity .2s;
}
@media (min-width: 630px) {

section {

width: 20%;

height: 100vh;

margin-right: -1px;

-webkit-transform: skewX(15deg) translateZ(0);

transform: skewX(15deg) translateZ(0);
}

section:before {

left: -100%;

width: 400%;

-webkit-transform: skewX(-15deg);

transform: skewX(-15deg);
}
}

Estilo de los elementos secundarios en el CSS de la siguiente manera:

section:nth-child(1):before {

background-color: #e60000;

background-image: url(1.jpg);
}

section:first-child:before, section:last-child:before { background-color: #660000; }

section:first-child:after, section:last-child:after { opacity: .5; }

section:first-child article, section:last-child article { display: none; }

section:nth-child(2):before {

background-color: #cc0000;

background-image: url(2.jpg);
}

section:first-child:before, section:last-child:before { background-color: #660000; }

section:first-child:after, section:last-child:after { opacity: .5; }

section:first-child article, section:last-child article { display: none; }

section:nth-child(3):before {

background-color: #b30000;

background-image: url(3.jpg);
}

section:first-child:before, section:last-child:before { background-color: #660000; }

section:first-child:after, section:last-child:after { opacity: .5; }

section:first-child article, section:last-child article { display: none; }

section:nth-child(4):before {

background-color: #990000;

background-image: url(4.jpg);
}

section:first-child:before, section:last-child:before { background-color: #660000; }

section:first-child:after, section:last-child:after { opacity: .5; }

section:first-child article, section:last-child article { display: none; }

section:nth-child(5):before {

background-color: maroon;

background-image: url(5.jpg);
}

section:first-child:before, section:last-child:before { background-color: #660000; }

section:first-child:after, section:last-child:after { opacity: .5; }

section:first-child article, section:last-child article { display: none; }

article {

position: relative;

padding: 24px;

width: 100%;

height: 100%;

text-align: center;

color: white;

z-index: 1;

-webkit-transition: opacity .2s, -webkit-transform .2s;

transition: opacity .2s, -webkit-transform .2s;

transition: opacity .2s, transform .2s;

transition: opacity .2s, transform .2s, -webkit-transform .2s;
}

@media (min-width: 630px) {

article {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

position: absolute;

top: 0;

right: 0;

left: 0;

margin: auto;

opacity: 0;

-webkit-transform: translateY(24px) skewX(-15deg);

transform: translateY(24px) skewX(-15deg);
}
}

h2 {

font-size: 32px;

margin-bottom: 12px;
}