TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear tarjetas sesgadas Bootstrap personalizadas?

6

En nuestros tutoriales de Bootstrap, hemos explicado el componente de tarjetas en detalle. Dado que el componente de la tarjeta es uno de los componentes más atractivos, puede ver muchas variaciones en Internet. También hemos explicado el widget de tarjeta giratoria y el widget de perfil de usuario como personalización. En este artículo, creemos tarjetas personalizadas Bootstrap sesgadas en diferentes estilos.

¿Qué es la tarjeta sesgada?

La asimetría no es más que elementos retorcidos en una de las direcciones X o Y. Esto es muy fácil de lograr usando la propiedad de transformación CSS. En nuestro ejemplo, creemos las siguientes variaciones:

  • Tarjeta sesgada con grado negativo en el eje X
  • Grado positivo de tarjeta sesgada en el eje X
  • Perspectiva de tarjeta sesgada grado negativo en el eje Y
  • Perspectiva de tarjeta sesgada grado positivo en el eje Y
  • Tarjeta sesgada con texto sin formato y título

Usaremos CSS en línea para indicar los estilos utilizados, puede definir todos los estilos en un CSS externo si tiene uno en su tema Bootstrap. En todos los tipos, simplemente necesita agregar "transform: skewX()" o "transform: skewY ()" a la clase ".card" existente. Además, también hemos usado 1rem (20px) para el margen y 20rem para el ancho para una alineación adecuada.

Tarjeta inclinada con dirección X negativa

Creemos una tarjeta sesgada con -8 grados en la dirección del eje X, a continuación se muestra el código para la misma:

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewX(-8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

El resultado se verá a continuación en el navegador:

¿Cómo crear tarjetas sesgadas Bootstrap personalizadas?

Tarjeta inclinada con dirección X positiva

Ahora cambie el grado negativo a positivo en skewX () para cambiar la dirección de la asimetría.

<div class="row" style="margin:20px;"> <div class="card" style="width:20rem;transform: skewX(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

Debería producir el siguiente resultado:

¿Cómo crear tarjetas sesgadas Bootstrap personalizadas?

Tarjeta de perspectiva en eje Y negativo

Ahora cambie skewX () a skewY () para crear una tarjeta de perspectiva con -8 grados.

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewY(-8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

La tarjeta de perspectiva con ángulo negativo debería verse a continuación:

¿Cómo crear tarjetas sesgadas Bootstrap personalizadas?

Tarjeta de perspectiva en eje Y positivo

Del mismo modo, cree una tarjeta de perspectiva positiva cambiando el sesgo () a +8 grados.

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewY(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

Producirá el siguiente resultado:

¿Cómo crear tarjetas sesgadas Bootstrap personalizadas?

Tarjeta inclinada con texto sin formato y título

En todos los ejemplos anteriores, el título, el texto y el texto del botón también están sesgados, ya que el sesgo se aplica a nivel de tarjeta. Esto tiene sentido en los casos de perspectiva (eje Y), pero cuando se aplica el sesgo en el eje X, no es necesario que el contenido del texto esté sesgado. Para que el texto vuelva a la normalidad, simplemente aplique los mismos grados en la dirección opuesta.

A continuación se muestra un código de ejemplo, aplicando +8 grados al nivel de la tarjeta y nuevamente aplicando -8 grados al nivel del cuerpo de la tarjeta para que el texto dentro del cuerpo de la tarjeta vuelva a la normalidad.

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewX(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body" style="transform: skewX(-8deg);"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

La tarjeta inclinada con texto sin formato debe verse como la siguiente, haciendo que el texto tenga un formato más legible.

¿Cómo crear tarjetas sesgadas Bootstrap personalizadas?

Ajuste en dispositivos móviles

Las tarjetas inclinadas anteriores pueden verse muy bien en dispositivos de escritorio. Pero irán más allá de la pantalla de los dispositivos móviles creando así una barra de desplazamiento horizontal. Utilice la consulta de medios CSS a continuación para que la tarjeta se vea normal en dispositivos móviles de menos de 480 px. Básicamente, esto significa que hacemos la tarjeta sin sesgo en dispositivos móviles, mientras que el sesgo se muestra en dispositivos más grandes.

<style> @media screen and (max-width: 480px) { .card { width:20rem !important; margin: 0 !important; flex-direction: column !important; -ms-flex-direction: column !important; transform: skewX(0deg) !important; transform: skewY(0deg) !important; border-radius: 0 !important; } .card-body { transform: skewX(0deg) !important; } } </style>

Personalizaciones adicionales

Si se ha dado cuenta, todos los códigos anteriores tienen una clase adicional "btn-md" adjunta al elemento del botón. Esta no es una clase de Bootstrap predeterminada, la hemos agregado para mostrar el efecto de sombra del cuadro. También se pueden agregar algunos efectos adicionales para desplazarse y eliminar el radio del borde.

<style> .card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.19),0 0.3rem 0.3rem rgba(0,0,0,.23); } .btn-md { border-width: 0; outline: none; border-radius: 0 !important; box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, .6); cursor: pointer; } .btn-md:hover { background-color: black; } .card, .card-img-top { border-radius: 0 !important; } </style>

Puede utilizar la consulta de medios y estilos de personalización adicionales en una hoja de estilo externa. Si está agregando los estilos dentro de la sección del encabezado de su página, no olvide usar combinar y poner todos los códigos dentro de las etiquetas … Recuerde crear clases CSS separadas para cada estilo requerido similar a la clase ".btn-md" y aplicar a las tarjetas requeridas en su página. De lo contrario, todos los elementos de la tarjeta en la página se verán afectados si usa estilos en la sección de encabezado o en una hoja de estilo externa.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More