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