Para una mejor visualización, visitar página web.
Iniciemos
En primer lugar, comencemos creando una tarjeta simple:
<div
class="block max-w-md mx-auto bg-white border border-gray-400 rounded shadow-sm"
aria-label="View item"
title="View item"
>
<div class="flex items-center justify-between p-5">
<div class="pr-4">
<h6 class="mb-2 font-semibold leading-5">
El universo es un lugar bastante grande
</h6>
<p class="text-sm text-gray-900">
Es mucho mejor captar el universo como realmente es que persistir en la
ilusión, por satisfactorio y reconfortante que sea.
</p>
</div>
<div class="flex items-center justify-center">
<svg
class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
fill="currentColor"
viewBox="0 0 12 12"
>
<path
d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
></path>
</svg>
</div>
</div>
</div>
En el siguiente paso, agregaremos los bordes mágicos (verifique el efecto de desplazamiento):
<div
class="relative block max-w-md mx-auto overflow-hidden bg-white border border-gray-400 rounded shadow-sm group"
aria-label="View item"
title="View item"
>
<div
class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
></div>
<div
class="absolute bottom-0 left-0 w-1 h-full duration-300 origin-bottom transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
></div>
<div
class="absolute top-0 left-0 w-full h-1 duration-300 origin-right transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
></div>
<div
class="absolute bottom-0 right-0 w-1 h-full duration-300 origin-top transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
></div>
<div class="flex items-center justify-between p-5">
<div class="pr-4">
<h6 class="mb-2 font-semibold leading-5">
El universo es un lugar bastante grande
</h6>
<p class="text-sm text-gray-900">
Es mucho mejor captar el universo como realmente es que persistir en la
ilusión, por satisfactorio y reconfortante que sea.
</p>
</div>
<div class="flex items-center justify-center">
<svg
class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
fill="currentColor"
viewBox="0 0 12 12"
>
<path
d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
></path>
</svg>
</div>
</div>
</div>
Observe que hemos agregado 4 DIV absolutos, que se estiran al pasar el mouse. No olvide agregar las clases relative y group al contenedor principal.
Además, necesitaremos agregar la variante de desplazamiento de grupo a la propiedad de escala en nuestra configuración de Tailwind:
module.exports = {
// ...
variants: {
scale: ['responsive', 'hover', 'focus', 'group-hover'],
},
};
El último paso es hacer que los bordes se vean más delgados. Para lograr esto, agregaremos un pequeño relleno de 1 px al contenedor principal y un fondo blanco al contenido. Como beneficio adicional, también podríamos escalar la carta y aumentar su sombra al pasar el mouse.
<div
class="relative block max-w-md p-px mx-auto overflow-hidden transition duration-300 transform bg-white border border-gray-400 rounded shadow-sm hover:scale-105 group hover:shadow-xl"
aria-label="View item"
title="View item"
>
<div
class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
></div>
<div
class="absolute bottom-0 left-0 w-1 h-full duration-300 origin-bottom transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
></div>
<div
class="absolute top-0 left-0 w-full h-1 duration-300 origin-right transform scale-x-0 bg-indigo-600 group-hover:scale-x-100"
></div>
<div
class="absolute bottom-0 right-0 w-1 h-full duration-300 origin-top transform scale-y-0 bg-indigo-600 group-hover:scale-y-100"
></div>
<div
class="relative flex items-center justify-between p-5 bg-white rounded-sm"
>
<div class="pr-4">
<h6 class="mb-2 font-semibold leading-5">
El universo es un lugar bastante grande
</h6>
<p class="text-sm text-gray-900">
Es mucho mejor captar el universo como realmente es que persistir en la
ilusión, por satisfactorio y reconfortante que sea.
</p>
</div>
<div class="flex items-center justify-center">
<svg
class="w-3 text-gray-700 transition-colors duration-300 group-hover:text-indigo-600"
fill="currentColor"
viewBox="0 0 12 12"
>
<path
d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z"
></path>
</svg>
</div>
</div>
</div>
¡Y eso es! Toma el código y úsalo en tus increíbles proyectos.
Top comments (0)