Aquesta és una publicació breu sobre com crear un subratllat amb degradat utilitzant Tailwind CSS per separar seccions de la teva pàgina, o simplement per fer que els teus enllaços es vegin genials! Explicaré el codi a continuació, però si només vols veure el codi, pots saltar al final.
Com crear un subratllat amb degradat
Creem això com un element posicionat absolute, el que requereix que l’element pare sigui relative. Això ens permet posicionar l’element en relació amb el pare (sorpresa). En aquest cas anirem a fer que subratlli l’element pare, encara que podries ajustar aquest posicionament.
Color del subratllat amb degradat
Utilitzarem la utilitat bg-gradient-to-r per crear un degradat d’esquerra a dreta. La direcció realment no importa, el punt és que és un degradat. Per al color inicial anirem a fer-lo transparent, anar al teu color desitjat, i tornar a transparent. Podem fer això amb les utilitats bg-gradient-to-r from-sky-500/0 via-sky-500/70 to-sky-500/0. Això crearà un degradat de transparent a sky-500 a transparent. Pots ajustar l’opacitat del color del mig al que vulguis. Vaig triar 70 perquè em va semblar que es veia bé.
Alçada del subratllat amb degradat
Establirem l’alçada del subratllat a h-px. Això el farà d’1px d’alt. Pots ajustar això al que vulguis.
Posicionant el subratllat amb degradat
Volem que el subratllat amb degradat abasti la vora inferior de l’element pare. Llavors, la primera utilitat que volem utilitzar és inset-x-0 perquè vagi des de la vora esquerra fins a la vora dreta, després bottom-0 per col·locar-lo a la part inferior. Pots trobar més informació sobre aquestes utilitats a la Documentació de Tailwind.
Si necessites ajustar la ubicació vertical del subratllat, pots fer-ho utilitzant la utilitat bottom. Per exemple, si vols moure’l una mica cap avall per superposar-se amb una vora inferior, pots utilitzar -bottom-px per moure’l 1px cap avall.
Codi final
Subratllat amb degradat genèric
Aquí utilitzo el color sky-500 de la paleta de colors de Tailwind. Pots utilitzar el color que vulguis.
<div class="relative">
<span
class="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-sky-500/0 via-sky-500/70 to-sky-500/0"
></span>
</div>Subratllat d’enllaç en passar el cursor
Això és molt similar a l’anterior, però he afegit un efecte hover al subratllat. També hi ha una transició perquè a qui no li agraden les transicions?
<button class="group relative border-2 p-2">
El meu Enllaç!
<span
class="absolute inset-x-0 -bottom-px h-px bg-gradient-to-r from-sky-500/0 via-sky-500/70 to-sky-500/0 opacity-0 transition group-hover:opacity-100"
></span>
</button>