Cepat Reka Ikon Kalendar Menghancurkan Menggunakan CSS Tailwind

Tailwind ialah rangka kerja CSS yang mengutamakan utiliti yang berkuasa yang menyelaraskan penggayaan dan mengurangkan saiz fail dengan membersihkan CSS yang tidak digunakan dalam binaan pengeluaran. Dalam artikel ini, saya akan menunjukkan kepada anda cara membuat ikon kalendar yang bergaya dengan mudah menggunakan kelas utiliti dan teknik kedudukan Tailwind yang berkuasa.

Menyediakan Bekas Kalendar

Untuk bermula, kami akan membuat bekas fleksibel yang akan memusatkan elemen kalendar kami pada halaman. Div luar menggunakan kelas flex dan justify-center untuk menjajarkan item secara mendatar.

<div class="flex items-start justify-center">
  <div class="flex flex-col shadow-md w-20 md:w-28 relative">
    <!-- Calendar content goes here -->
  </div>
</div>

• flex: Kelas ini mendayakan reka letak Flexbox, membolehkan kami menjajarkan elemen kanak-kanak dengan mudah.
• item-start: Menjajarkan item ke permulaan bekas fleksibel secara menegak.
• justify-center: Memusatkan item secara mendatar dalam bekas.
• relatif: Kelas ini penting kerana ia menetapkan konteks penentududukan untuk mana-mana elemen anak yang diposisikan secara mutlak.

Menambah Kedudukan Mutlak untuk Hiasan

Seterusnya, kami akan menambah elemen hiasan menggunakan kedudukan mutlak. Elemen ini direka bentuk untuk meningkatkan kalendar secara visual, menjadikannya kelihatan lebih seperti kad kalendar tradisional.

<div class="absolute -top-2 left-4 w-2 h-4 bg-gray-400"></div>
<div class="absolute -top-2 right-4 w-2 h-4 bg-gray-400"></div>

• mutlak: Kelas ini membolehkan kita meletakkan unsur relatif kepada nenek moyang terdekat dengan kedudukan relatif. Dalam kes kami, ia ialah bekas induk dengan kelas relatif.
• -atas-2: Jidar negatif ini menggerakkan elemen ke atas sebanyak 0.5rem (8px). Dengan menggunakan ruang negatif, kita boleh bertindih elemen hiasan dengan kad kalendar.
• kiri-4 dan kanan-4: Kelas ini meletakkan elemen dari tepi kiri dan kanan bekas induk.

Mencipta Label Tarikh Kalendar

Sekarang, kami akan menambah label bulan, hari dan tahun dalam bekas kalendar:

<span class="bg-green-400 text-center text-white p-1 md:p-2">month</span>
<span class="text-2xl md:text-4xl text-green-800 font-bold bg-white text-center px-3 pt-3 pb-2">day</span>
<span class="text-sm md:text-md bg-white text-green-600 text-center md:p-1 border-t-2 border-gray-100 border-dashed">year</span>

• Warna Latar Belakang: Kami menggunakan bg-hijau-400 dan bg-putih untuk menyediakan latar belakang yang kontras untuk label.
• Penjajaran Teks: Kelas pusat teks memusatkan teks secara mendatar dalam setiap rentang.
• Padding: Kelas p-1 dan md:p-2 menggunakan padding.
• Saiz Fon: Kelas text-2xl dan md:text-4xl memastikan label hari dipaparkan dengan jelas, menyesuaikan diri dengan saiz skrin yang berbeza.

Keputusan Akhir

Dengan menggabungkan kedudukan mutlak dan relatif dengan penggunaan ruang negatif (-atas-2) membolehkan elemen hiasan bertindih dan disepadukan dengan lancar dengan komponen kalendar utama, mewujudkan kesan estetik yang menyenangkan.

Kod Bekas Kalendar Akhir

Kesimpulannya, mencipta ikon kalendar dengan Tailwind CSS bukan sahaja mudah tetapi juga cara yang hebat untuk menerokai keupayaan rangka kerja. Saya menggalakkan anda bermain-main dengan jarak, kedudukan mutlak dan kelas utiliti lain yang telah kami bincangkan. Bereksperimen dengan alat ini boleh membawa kepada bentuk dan reka bentuk baharu yang menarik. Biarkan kreativiti anda mengalir dan lihat variasi unik ikon kalendar yang boleh anda buat!

Sila tweak mana-mana bahagian agar lebih sepadan dengan gaya anda!

Atas ialah kandungan terperinci Cepat Reka Ikon Kalendar Menghancurkan Menggunakan CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!