Bordes rellenables con TailwindCSS

19 de abril de 2021

Veamos como podemos construir una card con bordes rellenables de forma sencilla sin usar Javascript o Css personalizado.

驴Observa c贸mo se llenan los bordes? Para lograr este efecto, no necesitamos escribir ning煤n CSS o JS personalizado. Todo se puede lograr con Tailwind puro.

Iniciemos

En primer lugar, comencemos creando una card simple:

<div
  class="bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"
>
  <div>
    <!-- Aqu铆 va la informaci贸n de su card -->
  </div>
</div>

En el siguiente paso, agregaremos los bordes m谩gicos (verifique el efecto de desplazamiento):

<div
  class="group relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"
>
  <div
    class="absolute bottom-0 left-0 h-1 w-full origin-left scale-x-0 transform bg-sky-400 duration-300 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 left-0 h-full w-1 origin-bottom scale-y-0 transform bg-sky-400 duration-300 group-hover:scale-y-100"
  ></div>
  <div
    class="absolute top-0 left-0 h-1 w-full origin-right scale-x-0 transform bg-sky-400 duration-300 group-hover:scale-x-100"
  ></div>
  <div
    class="absolute bottom-0 right-0 h-full w-1 origin-top scale-y-0 transform bg-sky-400 duration-300 group-hover:scale-y-100"
  ></div>
  <div>
    <!-- Aqu铆 va la informaci贸n de su card -->
  </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.

隆Y eso es! Toma el c贸digo y 煤salo en tus incre铆bles proyectos.


Adri谩n UB

Adri谩n UB

@adrianub
Cargando comentarios...
ESC
No hay resultados para su b煤squeda...