Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Contenido lateral

7/12
Recursos

Aportes 12

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Asi va el mio 😄

super

Contenido lateral


Bueno entonces el contenido lateral fue como más intuitivo con lo ya visto en clases anteriores, con ciertas modificaciones, eso significa que es muy importante tener una base solida en la prop: animation y @keyframes
Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/7-contenido-lateral

animation-fill-mode: forwards

El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación

Conoce mas

Para quienes quieran cambiar la orientación del texto y ponerlo en vertical. Pueden usar:

.nombre del contenedor a cambiar {
writing-mode: vertical-rl;
text-orientation: upright;
}

Yo lo hice con posición absoluta;

CSS:

.container .aside-content {
  grid-area: aside;
  position: relative;
}

.aside-content .cont-yellow {
  width: 50%;
  height: 100%;
  background: var(--yellow);
  position: absolute;
  right: 0;
}

.aside-content h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 100;
  position: absolute;
  top: 50%;
  transform: translate(-30%, -50%) rotate(-90deg);
  opacity: 0;
  animation: nombre-superheroe 1.5s linear 3s forwards;
}

.aside-content img {
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  animation: move-superheroe 1.5s ease-in-out 3s forwards;
}
 

HTML:

<div class="aside-content">
        <div class="cont-yellow"></div>
        <h2>Superman</h2>
        <img src="https://i.ibb.co/x16pz1x/super-man.png" alt="superman" />
      </div>

Yo solucione el tema del z-index agregando

    animation-fill-mode: forwards;

Dejo mi avance en las clases, me está gustando cómo está quedando

Si utilizamos un linear gradient sobre el contenedor principal, nos evitamos estilar el div con el fondo amarillo:

.page .aside .aside__content {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(6, 1fr);
place-items: center;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(255,250,0,1) 50%, rgba(255,250,0,1) 100%);
}

El superman se pudo haber hecho con position fixed y luego posicionar verticalmente al 50vh y tantear horizontalmente dependiendo del tamaño de rectángulo amarillo. Sin necesidad de grid!

Que buenos consejos como hacer una animacion y como planear posicionamiento de los elementos usando maquetacion! Me gusta mucho como se mueve Lego Superman!

Por fin el mítico Yeeeiii! de la profe teff. 😄