e
sv

Tailwind CSS ile degrade ekleme kılavuzu

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Tailwind CSS ile gradyanları nasıl ekleyeceğiniz konusunda ayrıntılı bir kılavuz mu arıyorsunuz? Belki web sitenizin kahraman bölümü için güzel bir metin gradyanı oluşturmak veya sitenizin kartları için çekici bir sınır gradyanı eklemek istersiniz.

Şanslısın! Son zamanlarda Tailwind CSS'de gradyanlarla oynuyordum ve onları nasıl ekleyeceğimize dair bir rehber yazmanın eğlenceli olacağını düşündüm.

Bu blogda, güzel arka plan, metin, kenarlık ve alt çizgi geçişleri oluşturmak için Tailwind CSS kullanacağız. Ayrıca Tailwind CSS'de degradelerin nasıl canlandırılacağını da inceleyeceğiz. Başlayalım!

Tailwind CSS gradyanlarına giriş

Gradyanlar , web sitelerinize ekstra canlılık katmanın harika bir yoludur. Ancak bunlar artık yalnızca arka planlar için değil – metin, kenarlıklar, kartlar, girişler vb. dahil olmak üzere herhangi bir öğeye degradeler ekleyebiliriz!

Tailwind CSS gradyanlarına dalmadan ve oldukça güzel şeyler kodlamadan önce, Tailwind CSS gradyanlarının temellerini ve nasıl çalıştıklarını anlamamız gerekiyor.

Tailwind CSS'de temel bir degrade oluşturmak için şu üç Tailwind CSS sınıfını kullanmamız gerekir:

  1. bg-gradient-to-{direction}
  2. from-{color}
  3. to-{color}

İlkini tartışalım. bg-gradient-to-{direction} tanımlar. direction yatay, dikey veya çapraz olabilir.

Yatay doğrusal gradyan iki sınıfa sahiptir:

  1. bg-gradient-to-r : soldan sağa yatay bir doğrusal gradyan (HLG) tanımlar
  2. bg-gradient-to-l : sağdan sola bir HLG tanımlar

Dikey doğrusal gradyan ayrıca iki sınıfa sahiptir:

  1. bg-gradient-to-t : aşağıdan yukarıya doğru bir dikey doğrusal gradyanı (VLG) tanımlar
  2. bg-gradient-to-b : yukarıdan aşağıya bir VLG tanımlar

Son olarak, çapraz gradyan dört sınıfa sahiptir:

  1. bg-gradient-to-tr : sol alttan sağ üste çapraz bir doğrusal gradyan (DLG) tanımlar
  2. bg-gradient-to-tl : sağ alttan sol üste bir DLG tanımlar
  3. bg-gradient-to-br : sol üstten sağ alta doğru bir DLG tanımlar
  4. bg-gradient-to-bl : sağ üstten sol alta bir DLG tanımlar

Sonra, from-{color} var. Bu, degradenin başlangıç rengini tanımlar. Herhangi bir Tailwind CSS color sınıfını, from-purple-500 gibi bir degrade için başlangıç rengi olarak kullanabiliriz.

Son olarak, – to-{color} . Bu, degradenin bitiş rengini tanımlar. Herhangi bir Tailwind CSS color sınıfını, to-purple-800 gibi bir degrade için bitiş rengi olarak kullanabiliriz.

Tailwind CSS'de doğrusal arka plan gradyanları nasıl eklenir

Temel Tailwind CSS gradyan sınıflarını öğrendik. Şimdi, bu bilgiyi doğrusal bir arka plan gradyanı oluşturmak için kullanalım.

Başlamak için bir div konteynerine ihtiyacımız olacak. Önce bunu oluşturalım ve ona biraz yükseklik verelim:

 <div class="h-72"></div>

Yapmamız gereken bir sonraki şey, bir arka plan gradyanı eklemek. from-{color} ve to-{color} Tailwind CSS sınıflarını belirterek basit bir doğrusal gradyan ekleyelim.

Bu örnekte, from-purple-600 to-blue-600 doğrusal bir gradyan oluşturacağız. Devam edelim ve şu sınıfları ekleyelim:

 <div class="h-72 from-purple-600 to-blue-600"></div>

Ardından, bg-gradient-to-{direction} sınıfını kullanarak bir yön belirlememiz gerekiyor. Bu, Tailwind CSS'ye hangi yöne akması gerektiğini söyler.

Bu örnekte, soldan sağa akmasını istiyoruz, bu nedenle bg-gradient-to-r sınıfını ekleyeceğiz:

 <div class="h-72 bg-gradient-to-r from-purple-600 to-blue-600"></div>

Aşağıdaki demoda doğrusal bir arka plan gradyanı görmelisiniz:

Kalemi Gör
Rishi Purwar tarafından Arka Plan Gradyanı ( @rishi111 )
CodePen'de .

Degradenin yönünü soldan sağa, yukarıdan aşağıya değiştirmeye çalışalım. Yönü değiştirmek için bg-gradient-to-r sınıfını bg-gradient-to-b sınıfıyla değiştirmemiz gerekiyor:

 <div class="h-72 bg-gradient-to-b from-purple-600 to-blue-600"></div>

Degradenin artık soldan sağa yerine yukarıdan aşağıya aktığını görebilirsiniz:

Kalemi Gör
Arka Plan Gradyanı:
Rishi Purwar tarafından yukarıdan aşağıya ( @rishi111 )
CodePen'de .

Hızlı ipucu: Soluk bir degrade efekti oluşturmak istiyorsak, bir to-{color} sınıfı eklememize gerek yoktur. Tailwind CSS'de soluk bir degrade efekti oluşturmak için yalnızca bg-gradient-to-{direction} ve from-{color} sınıflarını kullanmamız gerekiyor.

Tailwind CSS gradyanlarını ikiden fazla renk durağıyla özelleştirme

Bu bölümde, Tailwind CSS'de ikiden fazla renk durağıyla nasıl degradeler oluşturabileceğimize bakacağız. Bu, daha renkli ve canlı gradyanlar yapmamızı sağlar.

Şimdiye kadar yalnızca iki renk durağı kullandık: from-{color} ve to-{color} . Şimdi, gradyanımıza üçüncü bir renk durağı eklemek için, bir orta renk eklemek için via-{color} sınıfını from-{color} ve to-{color} sınıflarıyla birlikte kullanacağız.

Bunu önceki örneğimizi kullanarak yapalım. Kodunuz şöyle görünmelidir:

 <div class="h-72 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600"></div>

Bu demoda arka plan gradyanını üç renk durağıyla çalışırken görebilirsiniz:

Kalemi Gör
Arka Plan Gradyanı: Rishi Purwar ( @rishi111 ) tarafından ikiden fazla renk durağı
CodePen'de .

Radyal arka plan degradeleri ekleme

Ardından, Tailwind CSS'de radyal arka plan degradelerinin nasıl ekleneceğini öğreneceğiz. Bildiğiniz gibi, Tailwind CSS radyal gradyan oluşturmak için doğrudan sınıflar sağlamaz. Bunun yerine destek eklemek için bazı yapılandırmalar yapmamız gerekiyor. Başlayalım!

Yapmamız gereken ilk şey, radyal gradyan için destek eklemek. Bunu tailwind.config.js dosyamıza aşağıdaki kodu ekleyerek theme özelliğini genişleterek yapıyoruz:

 modül.exports = {
  içerik: ["./src/**/*.{js,jsx}"],
  tema: {
    uzatmak: {
      arka plan görüntüsü: {
        'gradyan-radyal': 'radyal-gradyan(var(--tw-gradient-stops))',
      }
    }
  }
}

Artık ilk radyal arka plan gradyanımızı oluşturmaya hazırız!

İlk olarak, son bölümdeki son kodu kopyalayıp yapıştırın:

 <div class="h-72 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600"></div>

Bir radyal arka plan gradyanı oluşturmak için, bir radyal arka plan gradyanı eklemek için bg-gradient-to-r bg-gradient-radial sınıfıyla değiştirmemiz gerekir:

 <div class="h-72 bg-gradient-radial from-purple-600 via-pink-600 to-blue-600"></div>

Aşağıdaki resimde üç renk duraklı radyal arka plan gradyanını görebilirsiniz:

Üç Renk Durdurmalı Arka Plan Gradyanı

Metin degradeleri ekleme

Metin geçişleri, metninize ekstra canlılık katmanın harika bir yoludur. Bu bölümde, Tailwind CSS'de metin gradyanlarının nasıl ekleneceğini öğreneceğiz.

Başlamak için bir h1 etiketine ihtiyacımız olacak. Önce bunu oluşturalım ve ona bazı temel stiller verelim.

 <h1 class="text-5xl p-4 text-center font-bold">Tailwind CSS ile Degrade Ekleme Kılavuzu</h1>

Bir sonraki yapmamız gereken şey, metnimize bir arka plan gradyanı eklemek. Renk duraklarını belirterek basit bir doğrusal gradyan ekleyelim. Son örnekte kullandığımız renk duraklarının aynısını kullanacağız, from-purple-600 via-pink-600 to-blue-600 .

Ardından, bg-gradient-to-r sınıfını kullanarak degradenin yönünü belirlememiz gerekiyor. Devam edin ve bu sınıfları ekleyin.

 <h1 class="text-5xl p-4 text-center font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600">Tailwind CSS ile Gradyan Ekleme Kılavuzu< /h1>

Bunun gibi bir şey görmelisiniz:

Metin Gradyan Örneği

Gördüğümüz gibi, arka plan gradyanı, metin gradyanı yerine metnimize arka plan olarak uygulanır. Peki bunu nasıl çalıştıracağız?

İstediğimiz efekti elde etmek için, bir öğenin arka planını kırpmamıza izin veren bg-clip-text Tailwind CSS sınıfını kullanmamız gerekiyor. Bizim durumumuzda, metnin şekline uyması için h1 etiketinin arka planını kırpmak istiyoruz. Devam edin ve o sınıfı ekleyin:

 <h1 class="text-5xl p-4 text-center font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text">Ekleme Kılavuzu Tailwind CSS ile Degradeler</h1>

Beyaz Arka Planlı Metin Gradyan Örneği

Burada, elemanın arka planını kırptık ancak metin gradyanını göremiyoruz. Bunun nedeni, siyah metin renginin arka plan gradyanı ile örtüşmesidir. Bunu gizlemek için, metnin rengini şeffaf yapmak için text-transparent sınıfını kullanmamız gerekiyor. Devam edin ve o sınıfı ekleyin:

 <h1 class="text-5xl p-4 text-center font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">A Tailwind CSS ile Degrade Ekleme Kılavuzu</h1>

Harika! Bu demoda metin gradyanını çalışırken görebilirsiniz:

Kalemi Gör
Tailwind CSS Metin Gradyan
Rishi Purwar ( @rishi111 )
CodePen'de .

Tailwind CSS'de kenarlık gradyanları nasıl eklenir

Bu bölümde, Tailwind CSS'de bir butona ve giriş öğesine nasıl kenarlık gradyanları ekleyebileceğimize bakacağız. Ayrıca bir kart bileşeninin çevresine nasıl gradyan kenarlıkları ekleyebileceğimizi de göreceğiz.

Düğme kenarlığı gradyanı

İlk olarak, bir button elementine nasıl border gradyanı ekleyebileceğimizi görelim. Temel bir Tailwind CSS stiline sahip bir düğme oluşturalım:

 <button class="m-4 yuvarlak-dolu">
  <span class="block text-black px-4 py-2 font-semibold rounded-full">Beni Takip Et</span>
</button>

Ardından, önceki bölümlerde gördüğümüz arka plan degrade sınıflarını kullanarak düğmeye bir degrade arka planı ekleyin:

 <button class="m-4 yuvarlak tam bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <span class="block text-black px-4 py-2 font-semibold rounded-full">Beni Takip Et</span>
</button>

Düğme şöyle görünmelidir:

Beni Takip Et Düğmesi

Şimdi, düğme gradyan arka planını gizlemek için span etiketine bir bg-white sınıfı eklememiz gerekiyor. Ayrıca span etiketinin çevresinde bir kenarlık oluşturmak için button öğesine biraz dolgu eklememiz gerekiyor. Devam edin ve bu sınıfları ekleyin:

 <button class="m-4 p-1 yuvarlatılmış-tam bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white">Beni Takip Et</span>
</button>

Bu demoda degrade kenarlıklı düğmeyi görebilirsiniz:

Kalemi Gör
Rishi Purwar ( @rishi111 ) tarafından Sınır Gradyanlı Tailwind CSS Düğmesi
CodePen'de .

Giriş kenarlığı gradyanı

Ardından, bir input etiketinin etrafına nasıl degrade kenarlığı ekleyebileceğimize bakacağız. Bu biraz zor olabilir.

İlk olarak, temel stille bir girdi oluşturalım:

 <div class="m-4 yuvarlatılmış-tam max-w-sm">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Adınızı Girin">
</div>

Arka plan gradyan sınıflarını kullanarak div etiketine bir arka plan gradyanı ekleyelim:

 <div class="m-4 rounded-full max-w-sm bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Adınızı Girin">
</div>

Bunun gibi bir şey görmelisiniz:

Ad Giriş Etiketini Girin

Şu anda, herhangi bir gradyan arka planı göremiyoruz. Bunun nedeni, input arka planının div arka plan gradyanıyla örtüşmesidir.

Gradyan kenarlığını görünür kılmak için, input etiketinin etrafında bir kenarlık oluşturmak üzere div öğesine biraz dolgu eklememiz gerekir. Devam edin ve p-1 sınıfı ekleyin:

 ><div class="m-4 p-1 yuvarlatılmış-tam max-w-sm bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Adınızı Girin">
</div>

🤩 Büyü! Artık input etiketinin etrafında bir degrade kenarlık görebiliriz!

Peki tam olarak ne yaptık?

p-1 sınıfını kullanarak div içine biraz boşluk ekledik. Bu, div arka plan gradyanını yalnızca input etiketinin etrafında bir kenarlık olarak görünen alanda görünür hale getirdi.

Aşağıdaki demoda giriş öğesini degrade kenarlıkla görebilirsiniz:

Kalemi Gör
Rishi Purwar ( @rishi111 ) tarafından Border Gradient ile Tailwind CSS Girişi
CodePen'de .

Kart kenarlığı gradyanı

Şimdi, bir kart bileşeninin etrafına nasıl bir sınır gradyanı ekleyebileceğimizi görelim. Bir kart bileşeninin çevresine degrade kenarlığı eklemek, önceki bölümde gördüğümüze benzer, bu nedenle önce temel stile sahip bir kart bileşeni oluşturalım. Aşağıdaki HTML'yi kopyalayıp HTML dosyanıza yapıştırmanız yeterlidir:

 <article class="mx-auto my-4 max-w-sm rounded-xl">
  <div class="p-5 yuvarlak-lg">
    <h4 class="text-2xl font-bold">Web Geliştirme becerilerinizi bir sonraki düzeye taşıyın!</h4>
    <a class="hover:underline text-gray-600" href="https://coding-space.vercel.app" target="_blank" title="codingspace">CodingSpace'i ziyaret edin ↗ </a>
  </a>
</makale>

Bu, şuna benzeyen temel Tailwind CSS stiline sahip bir kart bileşeni oluşturacaktır:

Webdev Becerileri Düz Kart Bileşeni

article etiketine degrade sınıfları ekleyerek bu karta degrade bir arka plan ekleyelim. Devam edin ve bu sınıfları ekleyin:

 <article class="mx-auto my-4 max-w-sm rounded-xl bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <div class="p-5 yuvarlak-lg">
    <h4 class="text-2xl font-bold">Web Geliştirme becerilerinizi bir sonraki düzeye taşıyın!</h4>
    <a class="hover:underline text-gray-600" href="https://coding-space.vercel.app" target="_blank" title="codingspace">CodingSpace'i ziyaret edin ↗ </a>
  </a>
</makale>

Şimdi, kart bileşeni şöyle görünmelidir:

Tüm Metnin Üzerinde Gradyan Arka Planı Olan Webdev Becerileri

Bir sonraki adımın ne olması gerektiğini tahmin edebilir misiniz? 🤔

Arkasındaki degrade arka planını gizlemek için div arka planını beyaz yapacağız. Ayrıca, div öğesinin çevresinde bir kenarlık oluşturmak için p-1.5 sınıfını kullanarak article etiketine dolgu ekleyeceğiz.

Kart bileşeninin etrafında bir degrade kenarlık oluşturmak için bu sınıfları ekleyelim:

 <article class="p-1.5 mx-auto my-4 max-w-sm rounded-xl bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <div class="bg-beyaz p-5 yuvarlak-lg">
    <h4 class="text-2xl font-bold">Web Geliştirme becerilerinizi bir sonraki düzeye taşıyın!</h4>
    <a class="hover:underline text-gray-600" href="https://coding-space.vercel.app" target="_blank" title="codingspace">CodingSpace'i ziyaret edin ↗ </a>
  </a>
</makale>

Şimdi, kart bileşeni şöyle görünmelidir:

Kalemi Gör
Rishi Purwar ( @rishi111 ) tarafından Sınır Gradyanlı Tailwind CSS Kartı Bileşeni
CodePen'de .

Degrade alt çizgi ekleme

Bu bölümde, Tailwind CSS'deki bazı metinlere nasıl degrade alt çizgi ekleneceğini öğreneceğiz. İlk olarak, temel stile sahip bir h1 etiketi oluşturalım:

 <h1 class="text-3xl font-bold m-4">Web Geliştirme Becerilerinizi Yükseltin, <a href="https://coding-space.vercel.app" target="_blank">CodingSpace</'i ziyaret edin a></h1>

Bunun gibi bir şey görmeliyiz:

Gradyan Alt Çizgi Düz

Şimdi anchor etiketine bir degrade arka planı ekleyelim. Tailwind CSS arka plan gradyan sınıflarını şu şekilde ekleyin:

 <h1 class="text-3xl font-bold m-4">Web Geliştirme Becerilerinizi Yükseltin, <a href="https://coding-space.vercel.app" target="_blank" class="bg adresini ziyaret edin. -gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">CodingSpace</a></h1>

Bunun gibi bir şey görmelisiniz:

Tek Kelimede Degrade Alt Çizgili Arka Plan

Arka plan gradyanına genişlik ve yükseklik verelim. % 100% genişlik ve 6px yükseklik vermek için bg-[length:100%_6px] gibi rastgele bir background-size değeri kullanacağız. Rastgele değerlere aşina değilseniz, bunlar hakkında daha fazla bilgi edinmek için Tailwind CSS belgelerine başvurabilirsiniz.

Gradyan arka planının tekrar etmesini önlemek için bg-no-repeat sınıfını da eklememiz gerekiyor:

 <h1 class="text-3xl font-bold m-4">Web Geliştirme Becerilerinizi Yükseltin, <a href="https://coding-space.vercel.app" target="_blank" class="bg adresini ziyaret edin. -gradient-to-r-rose-400 via-fuchsia-500 to-indigo-500 bg-[length:100%_6px] bg-no-repeat">CodingSpace</a></h1>

Şimdi, şöyle bir şey görmelisiniz:

Üstte Altı Çizili Degrade Arka Plan

Yapmamız gereken son şey, bg-bottom sınıfını kullanarak bu arka planın konumunu aşağıya değiştirmek:

 <h1 class="text-3xl font-bold m-4">Web Geliştirme Becerilerinizi Yükseltin, <a href="https://coding-space.vercel.app" target="_blank" class="bg adresini ziyaret edin. -gradient-to-rose-400 via-fuchsia-500 to-indigo-500 bg-[length:100%_6px] bg-no-repeat bg-bottom">CodingSpace</a></h1>

Artık metnin altındaki gradyan alt çizgisini görebilirsiniz!

Kalemi Gör
Tailwind CSS Alt Çizgi Gradyan
Rishi Purwar ( @rishi111 )
CodePen'de .

Tailwind CSS'de degradeler nasıl canlandırılır

TailwindCSS'de animasyon, projelerinize eğlenceli ve anlamlı etkileşimler katabilir ! Bu bölümde, güzel animasyon efektleri oluşturmak için fareyle üzerine gelme ve odak durumlarında Tailwind CSS'de degradeleri nasıl canlandıracağımızı öğreneceğiz. Esasen, şimdiye kadar bu makalede oluşturduğumuz bileşenleri canlandıracağız.

Düğme gradyan arka plan animasyonu

İlk olarak, daha önce oluşturduğumuz buton bileşeninin arka planını nasıl canlandıracağımızı göreceğiz. Düğme kenarlığı gradyan bölümünden son kodu kopyalayıp yapıştırın:

 <button class="m-4 p-1 yuvarlatılmış-tam bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white">Beni Takip Et</span>
</button>

Fareyle üzerine gelme durumuna bir degrade arka planı eklemek için Tailwind CSS hover: sözde sınıfını kullanmamız gerekir. Fareyle üzerine gelindiğinde, bg-transparent sınıfını kullanarak span öğesinin arka planını saydam yapacağız. Geçişi pürüzsüz hale getirmek için geçiş transition-colors sınıfını da eklememiz gerekiyor. Devam edin ve bu sınıflar:

 <button class="m-4 p-1 round-full from-rose-400 via-fuchsia-500 to-indigo-500 bg-gradient-to-r">
  <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white hover:bg-transparent hover:text-white geçiş">Beni Takip Et</span>
</button>

Artık tüm bu sınıfları eklediğimize göre, bu demoda arka plan gradyan animasyonunu çalışırken görebilirsiniz:

Kalemi Gör
Animasyonlu Tailwind CSS Gradyan Arka Plan Düğmesi
, Rishi Purwar ( @rishi111 )
CodePen'de .

Giriş kenarlığı gradyan animasyonu

Şimdi bir girdi bileşeninin kenarlığının nasıl canlandırılacağını göreceğiz. Giriş kenarlığı gradyan bölümünden son kodu kopyalayıp yapıştırın:

 <div class="m-4 p-1 yuvarlatılmış-tam max-w-sm bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Adınızı Girin">
</div>

Fareyle üzerine gelme ve odaklanma durumundaki bir girişin etrafına bir degrade kenarlık ekleyeceğiz ve giriş normal durumdayken, varsayılan bir kenarlık oluşturmak için düz bir renk kullanacağız.

hover: ve focus-within: sınıflarını kullanalım ve eğer bilmiyorsanız, ilk focus-within in-sözde sınıfını kısaca açıklayacağım.

Öğe (veya alt öğelerinden biri) odak durumundayken öğeye stil vermek için focus-within sözde sınıf kullanırız. Bizim durumumuzda, div bir vurgulu durumu olduğunda veya girdimizin (alt öğe) bir vurgulu veya odak durumu olduğunda bir degrade kenarlığı eklemek istiyoruz. hover: ve focus-within: sözde sınıflarını ekleyelim:

 <div class="m-4 p-1 yuvarlatılmış-tam max-w-sm vurgulu:bg-gradient-to-r odak-in:bg-gradient-to-r from-rose-400 via-fuchsia-500 to -indigo-500">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Adınızı Girin">
</div>

hover: ve focus-within: 'i eklediğimize göre artık kenarlık gradyan animasyonunu görebiliriz.

Şimdi bu girdiye normal bir kenarlık ekleyelim. Bunu yapmak için, bu sınıfları border border-fuchsia-500 input öğesine ekleyin:

 <div class="m-4 p-1 rounded-full max-w-sm hover:bg-gradient-to-r focus-within:bg-gradient-to-r focus from-rose-400 via-fuchsia-500 indigo-500">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full border border-fuchsia-500 focus:outline-none" type="text" id="name" placeholder="Adınızı Girin">
</div>

Bunun gibi bir şey görmelisiniz:

Adı Girin Düğmesi İki

Bir sorun var. Bu varsayılan kenarlık, input veya div bir vurgulu veya odak durumundayken bile kalır. Bunu gizlemek için, vurgulu veya odak durumunda görünmez kılmak için border-transparent bir sınıf eklememiz gerekiyor. Devam edin ve vurgulanan sınıfları ekleyin:

 <div class="m-4 p-1 rounded-full max-w-sm hover:bg-gradient-to-r focus-within:bg-gradient-to-r focus from-rose-400 via-fuchsia-500 indigo-500">
  <label for="name" class="sr-only">Ad</label>
  <input class="p-3 w-full rounded-full border border-fuchsia-500 focus:outline-none focus:border-transparent hover:border-transparent" type="text" id="name" placeholder="Enter Adınız">
</div>

Bu demoda son kenarlık gradyan animasyonunu çalışırken görebilirsiniz:

Kalemi Gör
Rishi Purwar ( @rishi111 ) tarafından Animasyonlu Kenar Gradyanlı Tailwind CSS Girişi
CodePen'de .

Gradyan alt çizgi animasyonu

Bu bölümde, Tailwind CSS'de degrade alt çizgi animasyonunun nasıl ekleneceğini göreceğiz. İlk olarak, degrade alt çizgi bölümündeki son kodu hızlıca kopyalayıp yapıştıralım:

 <h1 class="text-3xl font-bold m-4">Web Geliştirme Becerilerinizi Yükseltin, <a href="https://coding-space.vercel.app" target="_blank" class="bg adresini ziyaret edin. -gradient-to-rose-400 via-fuchsia-500 to-indigo-500 bg-no-repeat bg-bottom bg-[length:100%_6px]">CodingSpace</a></h1>

Alt çizgiyi, yüksekliği aşağıdan yukarıya doğru artacak şekilde canlandıracağız. Üzerine geldiğimizde metnin yüksekliğini kaplayacak.

Buradaki anahtar, fareyle üzerine gelindiğinde alt çizgi gradyan yüksekliğini değiştirmemiz gerektiğidir. Artık sabit bir 6px yüksekliğe sahibiz ve onu canlandırmak için, fareyle üzerine gelindiğinde yüksekliğini 100% olarak değiştirmemiz gerekiyor.

Bu efekti elde etmek için, vurgulu durumdaki bir anchor etiketine bg-[length:100%_100%] sınıfını ekleyelim. Geçişi sorunsuz hale getirmek için transition-[background-size] sınıfını da eklememiz gerekiyor. Devam edin ve şu sınıfları ekleyin:

 <h1 class="text-3xl font-bold m-4">Web Geliştirme Becerilerinizi Yükseltin, <a href="https://coding-space.vercel.app" target="_blank" class="bg adresini ziyaret edin. -rose-400'den-r'ye-degrade-fuşya-500'den indigo-500'e bg-tekrarsız bg-bottom bg-[uzunluk:%100_6px] vurgulu:bg-[uzunluk:%100_100%] geçiş-[background-size]">CodingSpace</a></h1>

Aşağıdaki demoda son alt çizgi gradyan animasyonunu görebilirsiniz.

Kalemi Gör
Tailwind CSS Animasyonlu Alt Çizgi Gradyan
Rishi Purwar ( @rishi111 )
CodePen'de .

Ve bununla birlikte, bu eğitim artık tamamlandı! Umarım Tailwind CSS'nin çeşitli gradyan kombinasyonları oluşturmak için nasıl kullanılabileceği hakkında çok şey öğrenmişsinizdir.

Çözüm

Sonuç olarak, Tailwind CSS, web sitelerinize güzel gradyanlar eklemeyi kolaylaştırır ve geliştiricinizin kemerinde olması gereken harika bir araçtır!

Tailwind CSS ile degradelerin nasıl ekleneceğine ilişkin bu öğreticiyi beğeneceğinizi umuyorum. Ama neden orada dursun? Tailwind CSS'de degradelerle oynamanızı ve kendi degrade özel snippet'lerinizi oluşturmanızı ve aşağıdaki yorumlarda geri kalanımızla paylaşmanızı tavsiye ederim!

Her zaman olduğu gibi, sorularınız veya yorumlarınız varsa, bunları aşağıda bırakmaktan çekinmeyin. Mümkün olan en kısa sürede size geri döneceğim. Okuduğunuz için teşekkürler! 🙏

Tailwind CSS ile degrade ekleme kılavuzu ilk olarak LogRocket Blog'da yayınlandı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Tailwind CSS ile degrade ekleme kılavuzu