Diseño de cuadrículas CSS para contenido web

Curso Práctico de Maquetación y Animaciones con CSS

Contenido del curso

Visión general y requisitos del curso

Maquetación y animaciones con CSS

Maquetación con JavaScript

Continúa aprendiendo

12
Proyectos Finales: Animaciones y Transiciones con CSS
01:30 min

Tomar examen

Diseño de cuadrículas CSS para contenido web

Todos los cursos GRATIS

Se acaba en:

03díasd:15hrsh:19minm:22segs

Resumen

¿Cómo trabajar con grid en el site content?

Para muchos, el uso de CSS Green y la organización mediante grid son elementos cruciales al iniciar proyectos web. Este texto te guiará detalladamente a través del proceso de creación de un site content con columnas, alineación y disposición de contenidos usando grid en CSS. No solo aprenderás a manejar estas herramientas, sino que además exploraremos técnicas para optimizar el uso; así convertirás un diseño básico en una maqueta visual impresionante y funcional.

¿Cuántas columnas necesitamos?

La clave del diseño visual con grid es definir correctamente la cantidad de columnas necesarias:

Seis columnas: Independientemente del contenido, seis columnas nos permitirán manejar la disposición visual de manera flexible y adaptativa.
Columnas iguales: Las columnas deben ser uniformes para una disposición equilibrada del contenido en cada sección.
Ajuste a requerimientos: Si necesitas ajustar el tamaño de las columnas, puedes establecer divisiones adicionales según las necesidades del contenido, como con Superman en este caso.

.site-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
}

¿Cómo ubicar elementos en líneas específicas?

La colocación de elementos en un grid requiere que pienses en términos de líneas:

Identificación de líneas: Cada línea sirve como guía para posicionar elementos de forma precisa y coherente.
Uso de posiciones: Cada elemento puede ser ubicado entre líneas específicas para ajustar su tamaño y posición a lo largo del grid.

Por ejemplo, para colocar a Superman entre líneas:

grid-column: 2 / 6;
grid-row: 1 / 2;

¿Qué ocurre con el texto y las imágenes dentro del grid?

Para estilizar tanto texto como imágenes, aplicaremos transformaciones y propiedades de css animaciones:

Rotación y tamaño del texto: Rotar el texto con transform y ajustar su tamaño para su correcta visualización.
Animaciones en texto: Usar @keyframes y opacity para animar la aparición del texto realizando transiciones suaves.

.side-content p {
    transform: rotate(-90deg);
    font-size: 36px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

@keyframes example {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.side-content img {
    width: 100%;
    grid-column: 2 / 6;
    grid-row: 1 / 2;
}

¿Cómo estilizar y ubicar un div suelto en el grid?

Finalmente, estilizar un div es esencial para lograr el acabado visual adecuado:

Establecer color de fondo: Usa variables CSS para facilitar los cambios a futuro.
Configurar la ubicación en grid: Mediante propiedades como grid-column y grid-row, ajusta su posición.

div.suelto {
    background: var(--color-amarillo);
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    height: 100%;
}

Al aplicar bien estos fundamentos de CSS Grid implementarás layouts ordenados y estéticamente agradables. Intenta explorar variaciones y personalizaciones para que cada diseño sea único y refleje tu estilo como desarrollador. ¡Sigue codificando y haciendo magia en el mundo del diseño web!

Jhoana España Urresty

Estudiante

Hace 5 años

¿Como hago que la frase "App design" quede en una sola línea, y no se corte como está en el ejemplo?

Estefany Aguilar

Profesor

Hace 5 años

Wow, amo este resultado !!! Me mandas el código para poder ayudarte ? 😊✨

Jhoana España Urresty

Estudiante

Hace 5 años

HTML

  <body>
    <div class="page">
      <!-- Main content -->
      <section class="container">
        <nav class="navbar">
          <div class="navbar__content">
            <img src="./imgs/logo.png" alt="logo">
            <ul>
              <li><a href="">DESIGN</a></li>
              <li><a href="">DEVELOP</a></li>
              <li><a href="">APP</a></li>
              <li><a href="">WEB</a></li>
            </ul>
          </div>
        </nav>

        <section class="main-content">
          <p>Custom</p>
          <h2>Web Design</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
        </section>

        <section class="aside-content">
          <div></div>
          <p>App Design</p>
          <img src="./imgs/apps.png" alt="apllicaciones">
        </section >

        <section class="footer">
          <div id="button1">
            <img src="./imgs/movil.png" alt="movil">
          </div>
          <div>
            <img src="./imgs/pc.png" alt="desktop">
          </div>
          <div>
            <img src="./imgs/server.png" alt="server">
          </div>
        </section>
      </section>

      
      <!-- Loader -->
      <section class="loader">
        <div></div>
        <div></div>
        <div></div>
      </section>

      <!-- Modal --> 
      <section class="modal hidden">
        <div class="modal__content">
          <img class="modal__content--close" src="./imgs/outline_cancel_black_24dp.png"/>

          <div class="modal__content--slider">
            <input type="radio" name="slider-1" id="radio-1" checked>
            <input type="radio" name="slider-1" id="radio-2">
            <input type="radio" name="slider-1" id="radio-3">

            <div class="cards">
              <label for="radio-1" id="card-1" class="card">
                <img src="./imgs/sl-1.png" alt="slider 1">
              </label>
              <label for="radio-2" id="card-2" class="card">
                <img src="./imgs/sl-2.png" alt="slider 2">
              </label>
              <label for="radio-3" id="card-3" class="card">
                <img src="./imgs/sl-3.png" alt="slider 3">
              </label>
            </div>
          </div>
          <div>
            <input type="button" class="button" value="LO QUIERO">
          </div>
        </div>
      </section>
    </div>
  </body>
  <script src="./index.js"></script>
</html>

CSS

body{
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--gris);
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

:root{
  --azul: #203166;
  --gris: #F6F6F6;
  --azulclaro: #2387E1;
}

.page{
  position: relative;
  height: 100vh;
  width: 100%;
}

.container{
  position: absolute;
  z-index: 1;

  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 20% 50% 30%;
  grid-template-areas:  "nav      aside"
                        "section  aside"
                        "footer   aside";
height: 100%;
width: 100%;
}

.navbar{
  /* background: var(--gris); */
  grid-area: nav;
  display: flex;
}

.navbar__content{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 0 0 80px;
  border-bottom: 1px solid var(--azulclaro);

  animation: 2s navbar 0.5s ease-in-out;
}
@keyframes navbar {
  0%{
    transform: translateY(-200px);
  }
  100%{
    transform: translateY(0px);
  }
}

.navbar__content img{
  width: 120px;
}

.navbar__content ul{
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
  width: 450px;
}

.navbar__content ul li a{
  color: var(--azul);
  text-decoration: none;
  font-weight: 300;
}

.main-content{
  grid-area: section;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 80px;

  animation: 2s main-content 0.5s ease-in-out;
}
@keyframes main-content {
  0%{
    transform: translateY(-800px);
  }
  100%{
    transform: translateY(0px);
  }
}

.main-content p:first-child{
  font-size: 36px;
  font-weight: 300;
  margin: 0 0 -14px 50px;
  color: var(--azul);
}

.main-content p:last-child{
  font-weight: 100px;
  margin: 20px 400px 0 0;
  color: var(--azul);
}

.main-content h1{
  font-size: 48px;
  font-weight: 700;
  margin: 0;
  color: var(--azul);
}

.aside-content{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;

  grid-area: aside;
}

.aside-content p{
  transform: rotate(-90deg);
  font-size: 30px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  color: var(--azulclaro);

  opacity: 0;

  animation-name: aside-content-text;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes aside-content-text{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1;
  }
}

.aside-content img{
  width: 100%;
  grid-column: 2 / 6;
  grid-row: 1 / 2;

  animation: 2s aside-content-img 0.5s ease-in-out;
}
@keyframes aside-content-img {
  0%{
    transform: translateX(600px);
  }
  100%{
    transform: translateX(0px);
  }
}

.aside-content div{
  background: var(--azul);
  grid-column: 4 / 7;
  grid-row: 1 / 2;
  height: 100%;
}

.footer{
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  background: var(--azul);
  border-radius: 0 80px 0 0;
  transform: translateY(100%);

  animation-name: footer;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes footer{
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0px);
  }
}

.footer div{
  background: var(--azulclaro);
  width: 200px;
  height: 150px;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: center;
}

.footer div img{
  width: 180px;
  position: absolute;
  bottom: 30px;

  transform: translateY(0px) scale(1); 
  transition: transform 0.5s ease-in-out;

}

.footer div:hover img{
  cursor: pointer;
  transform: translateY(-30px) scale(1.1); 
  transition: transform 0.3s ease-in-out;
}

.hidden{
  display: none;
}
.visible{
  display: grid;
}

.modal{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 3;
 place-items: center;
}

.modal__content{
  background: var(--gris);
  width: 40%;
  height: 40%;
  padding: 50px;
  display: grid;
  place-items: center;
}

.modal__content--slider{
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
}

.modal__content--close{
    place-self: end;
    align-self: start;
}

.cards{
  position: relative;
  width: 100%;
  height: 100%;
}

.card{
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: transform 0.5s ease;
  cursor: pointer;
  /* // para centrar */
  display: grid;
  place-items: center;
  
}

.card img{
  width: 200px;
}

#radio-1:checked ~ .cards #card-1,
#radio-2:checked ~ .cards #card-2,
#radio-3:checked ~ .cards #card-3{
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 1;
}

#radio-1:checked ~ .cards #card-2,
#radio-2:checked ~ .cards #card-3,
#radio-3:checked ~ .cards #card-1{
  transform: translateX(80%) scale(0.8);
  opacity: 0.5;
  z-index: 0;
}

#radio-1:checked ~ .cards #card-3,
#radio-2:checked ~ .cards #card-1,
#radio-3:checked ~ .cards #card-2{
  transform: translateX(-80%) scale(0.8);
  opacity: 0.5;
  z-index: 0;
}

#radio-1,
#radio-2,
#radio-3 {
  display: none;
}

.button{
  background-color: var(--azulclaro);
  border: none;
  margin-top: 100px;
  color: var(--gris);
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
}

.loader{
  background: var(--gris);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  /* Animando el loader */
  animation: loader 2s linear forwards;
}

@keyframes loader{
  0%{
    opacity: 1;
    visibility: visible;
  }
  95%{
    opacity: 1;
    visibility: visible;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

.loader div{
  background: var(--azulclaro);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;

  transform: scale(0);

  animation: scaling 1s ease-in-out infinite;
}

.loader div:nth-child(1){
  animation-delay: 0.1s;
}
.loader div:nth-child(2){
  animation-delay: 0.2s;
}
.loader div:nth-child(3){
  animation-delay: 0.3s;
}
@keyframes scaling{
  0%, 100%{
    transform: scale(0.2);
  }
  40%{
    transform: scale(1);
  }
  50%{
    transform: scale(1);
  }
}

Jeffer Steven Nuñez Aragon

Libia Perez

Jhon Ramirez

Hace 4 años

silfredo mario

Daniel Omar Hernández Muñoz

Omar Alejandro Morales Mendoza

Hace 3 años

Paolo Joaquin Pinto Perez

Luis Alejandro Vera Hernandez

Antonio Sánchez Olalla

Jose Miguel Perdomo

marco antonio

Christian Michelle Torres Martínez

Camilo Torres camayo

Carlos Mazzaroli

Agustin Cammarota Muti

Moises Hernandez

Hace 10 meses•editado

Lauro Iván Ibáñez Castellanos

Javier Mauricio Medina Valencia

Diana María Betancur Franco

Hace un año

Mateo Roldán

Rubén Ernesto Aragón Gil

Luis Felipe Correa Agudelo

Carlos Rodríguez

Diseño de cuadrículas CSS para contenido web

Visión general y requisitos del curso

Animaciones Prácticas con CSS: Proyecto de Layout y Modal Interactivo

Estructura HTML para Maquetación de Proyectos Web

Maquetación y animaciones con CSS

Animaciones y Estilos para Loader en HTML/CSS

Maquetación de Layouts con CSS Grid en iPad

Creación y Animación de un Navbar con Flexbox y Grid

Estilización de Main Content con Flexbox y Animaciones CSS

Diseño de cuadrículas CSS para contenido web

Maquetación de Footers con Animaciones CSS

Maquetación con JavaScript

Acceso al DOM con JavaScript para Mostrar Modales

Eventos de Clic y Modales en JavaScript: Interactividad Básica

Carrusel de Imágenes con CSS y JavaScript

Continúa aprendiendo

Proyectos Finales: Animaciones y Transiciones con CSS

Todos los cursos GRATIS

Resumen