Saltar al contenido

Dise√Īo de Tarjeta de Estilo RPG con efecto de Desplazamiento HTML y CSS

En este tutorial, le mostraremos c√≥mo crear un dise√Īo de tarjeta de estilo RPG para mostrar cada estad√≠stica de publicaci√≥n para su sitio web en solo unos minutos con CSS.¬†Listo Vamos a verlo.

HTML Dise√Īo de Tarjeta

Entonces, comencemos con la estructura de la tarjeta. La tarjeta tendrá tres secciones. Imagen, texto y estadísticas (mostrando comentarios de publicaciones, vistas totales y tiempo de lectura aproximado).

También agregué contenido ficticio a cada sección.

<div class="card">
  <div class="card-image"></div>
  <div class="card-text">
    <span class="date">4 days ago</span>
    <h2>Post One</h2>
    <p>Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor</p>
  </div>
  <div class="card-stats">
    <div class="stat">
      <div class="value">4<sup>m</sup></div>
      <div class="type">read</div>
    </div>
    <div class="stat border">
      <div class="value">5123</div>
      <div class="type">views</div>
    </div>
    <div class="stat">
      <div class="value">32</div>
      <div class="type">comments</div>
    </div>
  </div>
</div>

CSS Dise√Īo de Tarjeta

Ahora usemos el dise√Īo de cuadr√≠cula para asignar el espacio para cada secci√≥n.¬†Establezca tambi√©n la fuente, el color de fondo, el radio del borde y la sombra.

.card {
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 210px 210px 80px;
  grid-template-areas: "image" "text" "stats";
  border-radius: 18px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
  font-family: roboto;
  text-align: center;

Luego asigne cada sección a las áreas de la cuadrícula que acabamos de definir.

.card-image {
  grid-area: image;
}
.card-text {
  grid-area: text;
}
.card-stats {
  grid-area: stats; 
}

Voy a establecer el fondo de la secci√≥n de imagen.¬†Establezca tambi√©n el radio del borde superior izquierdo derecho y configure el tama√Īo del fondo para que se ajuste a la imagen

.card-image {
  grid-area: image;
  background: url("img1.jpg");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

Luego, un estilo de tipografía para la sección de texto.

.card-text {
  grid-area: text;
  margin: 25px;
}
.card-text .date {
  color: rgb(255, 7, 110);
  font-size:13px;
}
.card-text p {
  color: grey;
  font-size:15px;
  font-weight: 300;
}
.card-text h2 {
  margin-top:0px;
  font-size:28px;
}

Siguiente trabajo en la secci√≥n de estad√≠sticas.¬†Usaremos el dise√Īo de la cuadr√≠cula nuevamente para asignar equitativamente el espacio para cada n√ļmero (observe c√≥mo uso la unidad de fracci√≥n).¬†Establezca tambi√©n el radio del borde inferior y el color de fondo.

.card-stats {
  grid-area: stats; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: rgb(255, 7, 110);
}

A continuaci√≥n, usemos el dise√Īo flexible para centrar verticalmente el texto.¬†Tambi√©n agregue algo de relleno y ajuste los estilos de fuente.

.card-stats .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  padding:10px;
}

La animaci√≥n Dise√Īo de Tarjeta

El dise√Īo est√° terminado.¬†A continuaci√≥n, trabajaremos en el efecto de desplazamiento para alejar la tarjeta.

Es realmente fácil, solo agregue la escala de transformación al contenedor usando pseudoclase y luego agregue la propiedad de transición. También reduciré la intensidad de la sombra de la caja cuando la carta esté flotando.

.card: hover {
  transformar: escala ( 1.15 ) ;
  box-shadow: 5px 5px 15px rgba ( 0 , 0 , 0 , 0.6 ) ;
}
.card {
...
  transición: 0 .5s facilidad;
  cursor: puntero;
  margen: 30px;

Esperemos disfruten y aprendan y refuercen sus conocimientos frente a estas nuevas tecnologías que a diario mueven al mundo de la web. Y como ya es sabido en este mundo hay que estar en constante aprendizaje ya que el mundo de la tecnología esta en constante cambio.

Descargar C√≥digo Fuente de Dise√Īo de Tarjeta RPG

Comparte