Tentu Kita Bisa Membuat Jam Khusus CSS yang Menunjukkan Waktu Saat Ini!

Mari kita buat jam “analog” yang berfungsi penuh dan dapat disetel dengan properti kustom CSS dan fungsi calc() . Kemudian kita akan mengubahnya menjadi jam “digital” juga. Semua ini tanpa JavaScript!

Berikut ini sekilas jam yang akan kami buat:

Memoles fungsi calc()

Praprosesor CSS menggoda kami selamanya dengan kemampuan menghitung nilai CSS numerik. Masalah dengan pra-prosesor adalah bahwa mereka tidak memiliki pengetahuan tentang konteks setelah kode CSS dikompilasi. Inilah sebabnya mengapa tidak mungkin untuk mengatakan Anda ingin lebar elemen Anda menjadi 100% dari wadah dikurangi 50 piksel. Ini menghasilkan kesalahan dalam praprosesor:

 width: 100% - 50px; // error: Incompatible units: 'px' and '%'

Praprosesor, seperti namanya, melakukan praproses instruksi Anda, tetapi outputnya masih berupa CSS lama biasa, itulah sebabnya mereka tidak dapat merekonsiliasi unit yang berbeda dalam operasi aritmatika Anda. Ana telah membahas secara detail konflik antara fitur Sass dan CSS .

Kabar baiknya adalah bahwa penghitungan CSS asli tidak hanya mungkin, tetapi kita bahkan dapat menggabungkan unit yang berbeda, seperti piksel dan persentase dengan fungsi calc() :

 width: calc(100% - 50px);

calc() dapat digunakan di mana saja dengan panjang, frekuensi, sudut, waktu, persentase, angka, atau bilangan bulat yang diizinkan. Lihat Panduan CSS untuk Fungsi CSS untuk ikhtisar lengkap.

Apa yang membuat ini lebih kuat adalah kenyataan bahwa Anda dapat menggabungkan calc() dengan properti kustom CSS—sesuatu yang tidak dapat ditangani oleh praprosesor.

Jarum jam

Gambar jam bulat dengan latar belakang abu-abu terang. Jarum jam berwarna biru tua menunjuk pada 2, menit berwarna biru muda menunjuk pada 9 dan detik berwarna kuning dan menunjuk pada 2.

Mari kita susun fondasinya terlebih dahulu dengan beberapa properti khusus dan definisi animasi untuk jarum jam analog:

 :root { --second: 1s; --minute: calc(var(--second) * 60); --hour: calc(var(--minute) * 60); } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(1turn); } }

Semuanya dimulai dalam konteks root dengan --second mana kami mendefinisikan bahwa satu detik seharusnya, yah, satu detik ( 1s ). Semua nilai dan waktu mendatang akan diturunkan dari ini.

Properti ini pada dasarnya adalah jantung dari jam kita dan mengontrol seberapa cepat atau lambat semua jarum jam bekerja. Menyetel --second ke 1s membuat jam cocok dengan waktu nyata, tetapi kita dapat membuatnya setengah kecepatan dengan menyetelnya ke 2s , atau bahkan 100 kali lebih cepat dengan menyetelnya ke 10ms .

Properti pertama yang kita hitung adalah --minute , yang kita inginkan sama dengan 60 kali satu detik. Kita dapat mereferensikan nilai dari --second dan mengalikannya dengan 60 dengan bantuan calc() :

 --minute: calc(var(--second) * 60);

Properti --hour didefinisikan menggunakan prinsip yang sama persis tetapi dikalikan dengan nilai --minute :

 --hour: calc(var(--minute) * 60);

Kami ingin ketiga jarum jam berputar dari 0 hingga 360 derajat—seputar bentuk tampilan jam! Perbedaan antara ketiga animasi tersebut adalah berapa lama waktu yang dibutuhkan masing-masing untuk berputar. Alih-alih menggunakan 360deg sebagai nilai lingkaran penuh, kita dapat menggunakan nilai CSS yang benar-benar valid dari 1turn .

 @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(1turn); } }

@keyframes ini hanya memberi tahu browser untuk memutar elemen sekali selama animasi. Kami telah mendefinisikan animasi bernama rotate dan sekarang siap untuk ditugaskan ke jarum detik jam:

 .second.hand { animation: rotate steps(60) var(--minute) infinite; }

Kami menggunakan animation untuk menentukan detail animasi. Kami menambahkan nama animasi ( rotate ), berapa lama kami ingin animasi berjalan ( var(--minute) , atau 60 detik) dan berapa kali menjalankannya ( infinite , artinya tidak pernah berhenti berjalan). steps(60) adalah fungsi pengaturan waktu animasi yang memberi tahu browser untuk melakukan animasi 1 putaran dalam 60 langkah yang sama. Dengan cara ini, jarum detik berdetak pada setiap detik daripada berputar dengan mulus di sepanjang lingkaran.

Saat kita membahas animasi CSS, kita dapat menentukan penundaan animasi ( animation-delay ) jika kita ingin animasi dimulai nanti, dan kita dapat mengubah apakah animasi harus diputar maju atau mundur menggunakan animation-direction . Kami bahkan dapat menjeda dan memulai ulang animasi dengan animation-play-state .

Animasi pada jarum menit dan jam akan bekerja sangat mirip dengan jarum detik. Perbedaannya adalah beberapa langkah tidak diperlukan di sini—tangan ini dapat berputar dengan mulus dan linier.

Jarum menit membutuhkan waktu satu jam untuk menyelesaikan satu putaran penuh, jadi:

 .minute.hand { animation: rotate linear var(--hour) infinite; }

Di sisi lain (pun intended) jam tangan mengambil dua belas jam untuk pergi sekitar jam. Kami tidak memiliki properti khusus terpisah untuk jangka waktu ini, seperti --half-day , jadi kami akan mengalikan --hour dengan dua belas:

 .hour.hand { animation: rotate linear calc(var(--hour) * 12) infinite; }

Anda mungkin sudah mengerti bagaimana jarum jam bekerja sekarang. Tapi itu tidak akan menjadi contoh yang lengkap jika kita tidak benar-benar membuat jam .

Wajah jam

Sejauh ini, kita hanya melihat aspek CSS dari jam. Kami juga membutuhkan beberapa HTML agar semua itu berfungsi. Inilah yang saya gunakan:

 <main> <div class="clock"> <div class="second hand"></div> <div class="minute hand"></div> <div class="hour hand"></div> </div> </main>

Mari kita lihat apa yang harus kita lakukan untuk menata jam kita:

 .clock { width: 300px; height: 300px; border-radius: 50%; background-color: var(--grey); margin: 0 auto; position: relative; }

Kami membuat jam 300px tinggi dan lebar, membuat warna latar belakang abu-abu (menggunakan properti kustom, --grey , kami dapat menentukan nanti) dan mengubahnya menjadi lingkaran dengan radius batas 50%.

Ada tiga jarum di jam. Pertama-tama mari kita pindahkan ini ke tengah tampilan jam dengan posisi absolut:

 .hand { position: absolute; left: 50%; top: 50%; }

Perhatikan nama kelas ini ( .hands ) karena ketiga tangan menggunakannya untuk gaya dasarnya. Itu penting karena setiap perubahan pada kelas ini diterapkan pada ketiga tangan.

Mari kita tentukan dimensi tangan dan warnai semuanya:

 .hand { position: absolute; left: 50%; top: 50%; width: 10px; height: 150px; background-color: var(--blue); }

Tangan sekarang semua di tempat:

Jam bulat dengan hanya satu jarum biru muda yang menunjuk langsung ke 6.

Mendapatkan rotasi yang tepat

Mari kita tunda merayakan sebentar. Kami memiliki beberapa masalah dan mungkin tidak terlihat jelas saat jarum jam setipis ini. Bagaimana jika kita mengubahnya menjadi lebar 100px:

Jam bulat dengan latar belakang abu-abu terang. Tangan biru muda itu tebal dan masih menunjuk ke 6, tapi

Kita sekarang dapat melihat bahwa jika sebuah elemen diposisikan 50% dari kiri, itu akan disejajarkan dengan pusat elemen induk—tetapi bukan itu yang kita butuhkan. Untuk memperbaikinya, koordinat kiri harus 50%, dikurangi setengah lebar tangan, yaitu 50px dalam kasus kami:

Lingkaran abu-abu dengan garis vertikal merah membagi dua di tengah. Dua panah merah ada di jam, satu berlabel 50% menunjuk ke garis merah dan satu lagi berlabel negatif 50 piksel menunjuk menjauh dari garis merah.

Bekerja dengan beberapa pengukuran berbeda sangat mudah untuk fungsi calc() :

 .hand { position: absolute; left: calc(50% - 50px); top: 50%; width: 100px; height: 150px; background-color: var(--grey); }

Ini memperbaiki posisi awal kami, namun, jika kami mencoba memutar elemen, kami dapat melihat bahwa asal transformasi, yang merupakan titik pivot rotasi, berada di tengah elemen:

Lingkaran abu-abu menunjukkan persegi panjang biru di atas diputar berlawanan arah jarum jam.

Kita dapat menggunakan properti transform-origin untuk mengubah titik asal rotasi menjadi di tengah sumbu x dan di atas sumbu y:

 .hand { position: absolute; left: calc(50% - 50px); top: 50%; width: 100px; height: 150px; background-color: var(--grey); transform-origin: center 0; }

Ini bagus, tetapi tidak sempurna karena nilai piksel kami untuk jarum jam di-hardcode. Bagaimana jika kita ingin tangan kita memiliki lebar dan tinggi yang berbeda, dan skala dengan ukuran jam yang sebenarnya? Ya, tebakan Anda benar: kami membutuhkan beberapa properti kustom CSS!

 .second { --width: 5px; --height: 140px; --color: var(--yellow); } .minute { --width: 10px; --height: 90px; --color: var(--blue); } .hour { --width: 10px; --height: 50px; --color: var(--dark-blue); }

Dengan ini, kami telah mendefinisikan properti khusus untuk masing-masing tangan. Yang menarik di sini adalah bahwa kita memberikan sifat ini nama yang sama: --width , --height , dan --color . Bagaimana mungkin kita memberi mereka nilai yang berbeda tetapi mereka tidak saling menimpa? Dan nilai mana yang akan saya dapatkan kembali jika saya memanggil var(--width) , var(--height) atau var(--color) ?

Mari kita lihat jarum jam:

 <div class="hour hand"></div>

Kami menetapkan properti kustom baru ke .hour dan mereka dicakup secara lokal ke elemen , yang mencakup elemen dan semua turunannya. Ini berarti gaya CSS apa pun yang diterapkan ke elemen—atau turunannya yang mengakses properti khusus—akan melihat dan menggunakan nilai spesifik yang ditetapkan dalam cakupannya sendiri . Jadi jika Anda memanggil var(--width) di dalam elemen jarum jam atau elemen leluhur apa pun di dalamnya, nilai yang dikembalikan dari contoh kita di atas adalah 10px. Ini juga berarti bahwa jika kita mencoba menggunakan salah satu properti ini di luar elemen ini—misalnya di dalam elemen tubuh—mereka tidak dapat diakses oleh elemen di luar cakupan.

Pindah ke tangan untuk detik dan menit, kita memasuki lingkup yang berbeda. Itu berarti properti kustom dapat didefinisikan ulang dengan nilai yang berbeda.

 .second { --width: 5px; --height: 140px; --color: var(--yellow); } .minute { --width: 10px; --height: 90px; --color: var(--blue); } .hour { --width: 10px; --height: 50px; --color: var(--dark-blue); } .hand { position: absolute; top: 50%; left: calc(50% - var(--width) / 2); width: var(--width); height: var(--height); background-color: var(--color); transform-origin: center 0; }

Hal yang hebat tentang ini adalah bahwa .hand (yang kami tetapkan untuk ketiga elemen tangan) dapat mereferensikan properti ini untuk perhitungan dan deklarasi. Dan masing-masing tangan akan menerima propertinya sendiri dari ruang lingkupnya sendiri. Di satu sisi, kami mempersonalisasi .hand untuk setiap elemen untuk menghindari pengulangan yang tidak perlu dalam kode kami.

Jam kami aktif dan berjalan dan semua jarum bergerak dengan kecepatan yang benar:

Jam yang sudah selesai. Latar belakang abu-abu, dengan menit dan jam menunjuk ke 6 dan detik menunjuk ke 7.

Kita bisa berhenti di sini tapi izinkan saya menyarankan beberapa perbaikan. Jarum jam dimulai pada jam 6, tetapi kita dapat mengatur posisi awalnya menjadi jam 12 dengan memutar jam 180 derajat. Mari tambahkan baris ini ke kelas .clock

 .clock { /* same as before */ transform: rotate(180deg); }

Tangan mungkin terlihat bagus dengan ujung membulat:

 .hand { /* same as before */ border-radius: calc(var(--width) / 2); }

Jam kami terlihat dan berfungsi dengan baik! Dan semua tangan mulai dari jam 12, persis seperti yang kita inginkan!

Mengatur jam

Bahkan dengan semua fitur luar biasa ini, jam tidak dapat digunakan karena sangat gagal memberi tahu waktu sebenarnya . Namun, ada beberapa batasan keras untuk apa yang dapat kita lakukan tentang hal ini. Tidak mungkin mengakses waktu lokal dengan HTML dan CSS untuk menyetel jam kita secara otomatis. Tapi kita bisa mempersiapkannya untuk setup manual.

Kita dapat mengatur jam untuk memulai pada jam dan menit tertentu dan jika kita menjalankan HTML pada waktu yang tepat itu akan menjaga waktu secara akurat setelahnya. Ini pada dasarnya bagaimana Anda mengatur jam dunia nyata, jadi saya pikir ini adalah solusi yang dapat diterima. 😅

Mari tambahkan waktu yang kita inginkan untuk memulai jam sebagai properti khusus di dalam kelas .clock

 .clock { --setTimeHour: 16; --setTimeMinute: 20; /* same as before */ }

Waktu saat ini untuk saya saat saya menulis akan datang ke 16:20 (atau 4:20) sehingga jam akan disetel ke waktu itu. Yang perlu saya lakukan adalah menyegarkan halaman pada 16:20 dan itu akan menjaga waktu secara akurat.

Oke, tapi… bagaimana kita bisa mengatur waktu ke posisi ini dan memutar tangan jika animasi CSS sudah mengendalikan rotasi?

Idealnya, kita ingin memutar dan mengatur jarum jam ke posisi tertentu saat animasi dimulai di awal. Katakanlah Anda ingin mengatur jarum jam ke 90 derajat sehingga dimulai pada 3:00 sore dan menginisialisasi animasi rotasi dari posisi ini:

 /* this will not work */ .hour.hand { transform: rotate(90deg); animation: rotate linear var(--hour) infinite; }

Sayangnya, ini tidak akan berhasil karena transform segera ditimpa oleh animasi, karena ia memodifikasi properti transform Jadi, apa pun yang kita atur, itu akan kembali ke 0 derajat di mana bingkai utama pertama dari animasi dimulai.

Kita dapat mengatur rotasi tangan secara independen dari animasi. Misalnya, kita bisa membungkus tangan menjadi elemen tambahan. Elemen induk tambahan ini, "penyetel", akan bertanggung jawab untuk mengatur posisi awal, kemudian elemen tangan di dalamnya dapat bergerak dari 0 hingga 360 derajat secara independen. Posisi 0-derajat awal kemudian akan menjadi relatif terhadap apa yang kita setel ke elemen penyetel induk.

Ini akan berhasil tetapi untungnya ada opsi yang lebih baik! Biarkan saya memukau Anda! 🪄✨✨

Properti animation-delay adalah apa yang biasanya kita gunakan untuk memulai animasi dengan beberapa penundaan yang telah ditentukan.

Triknya adalah menggunakan nilai negatif, yang langsung memulai animasi, tetapi dari titik tertentu di garis waktu animasi!

Untuk memulai 10 detik ke dalam animasi:

 animation-delay: -10s;

Dalam hal jarum jam dan menit, nilai aktual yang kita butuhkan untuk penundaan dihitung dari properti --setTimeHour dan --setTimeMinute . Untuk membantu perhitungan, mari buat dua properti baru dengan jumlah pergeseran waktu yang kita butuhkan:

  • Jarum jam harus jam yang kita inginkan untuk mengatur jam, dikalikan dengan satu jam.
  • Jarum menit menggeser menit kita ingin mengatur jam dikalikan satu menit.
 --setTimeHour: 16; --setTimeMinute: 20; --timeShiftHour: calc(var(--setTimeHour) * var(--hour)); --timeShiftMinute: calc(var(--setTimeMinute) * var(--minute));

Properti baru ini berisi jumlah waktu yang tepat yang kita butuhkan untuk properti animation-delay untuk mengatur jam kita. Mari tambahkan ini ke definisi animasi kita:

 .second.hand { animation: rotate steps(60) var(--minute) infinite; } .minute.hand { animation: rotate linear var(--hour) infinite; animation-delay: calc(var(--timeShiftMinute) * -1); } .hour.hand { animation: rotate linear calc(var(--hour) * 12) infinite; animation-delay: calc(var(--timeShiftHour) * -1); }

Perhatikan bagaimana kita mengalikan nilai-nilai ini dengan -1 untuk mengubahnya menjadi angka negatif.

Kami hampir mencapai kesempurnaan dengan ini, tetapi ada sedikit masalah: jika kami mengatur jumlah menit menjadi 30, misalnya, jarum jam harus sudah setengah jalan ke jam berikutnya. Situasi yang lebih buruk adalah mengatur menit ke 59 dan jarum jam masih di awal jam.

perbaiki ini, yang perlu kita lakukan adalah menambahkan shift menit dan nilai shift jam bersama-sama untuk jarum jam:

 .hour.hand { animation: rotate linear calc(var(--hour) * 12) infinite; animation-delay: calc( (var(--timeShiftHour) + var(--timeShiftMinute)) * -1 ); }

Dan saya pikir dengan ini kami telah memperbaiki semuanya. Mari kita kagumi indahnya, CSS murni, dapat diatur, jam analog kita:

Mari beralih ke digital

Pada prinsipnya, jam analog dan digital keduanya menggunakan perhitungan yang sama, perbedaannya adalah representasi visual dari perhitungan tersebut.

Jam dengan latar belakang abu-abu muda persegi panjang dengan waktu numerik membaca 14 45 18 dalam format 24 jam.

Inilah ide saya: kita dapat membuat jam digital dengan mengatur kolom angka vertikal yang tinggi dan menganimasikannya alih-alih memutar jarum jam. Menghapus topeng luapan dari versi final wadah jam mengungkapkan triknya:

Markup HTML baru harus berisi semua angka untuk ketiga bagian jam dari 00 hingga 59 pada bagian kedua dan menit dan 00 hingga 23 pada bagian jam:

 <main> <div class="clock"> <div class="hour section"> <ul> <li>00</li> <li>01</li> <!-- etc. --> <li>22</li> <li>23</li> </ul> </div> <div class="minute section"> <ul> <li>00</li> <li>01</li> <!-- etc. --> <li>58</li> <li>59</li> </ul> </div> <div class="second section"> <ul> <li>00</li> <li>01</li> <!-- etc. --> <li>58</li> <li>59</li> </ul> </div> </div> </main>

Untuk membuat angka-angka ini sejajar, kita perlu menulis beberapa CSS, tetapi untuk memulai dengan penataan, kita dapat menyalin properti kustom dari :root lingkup jam analog langsung, karena waktu bersifat universal:

 :root { --second: 1s; --minute: calc(var(--second) * 60); --hour: calc(var(--minute) * 60); }

Elemen pembungkus terluar, .clock , masih memiliki properti khusus yang sama untuk menyetel waktu awal. Semua yang berubah adalah menjadi wadah flexbox:

 .clock { --setTimeHour: 14; --setTimeMinute: 01; --timeShiftHour: calc(var(--setTimeHour) * var(--hour)); --timeShiftMinute: calc(var(--setTimeMinute) * var(--minute)); width: 150px; height: 50px; background-color: var(--grey); margin: 0 auto; position: relative; display: flex; }

Tiga daftar yang tidak berurutan dan item daftar di dalamnya yang berisi nomor tidak memerlukan perlakuan khusus. Angka-angka akan bertumpuk satu sama lain jika ruang horizontalnya terbatas. Mari kita pastikan bahwa tidak ada penataan daftar untuk mencegah poin-poin dan bahwa kita memusatkan hal-hal untuk penempatan yang konsisten:

 .section > ul { list-style: none; margin: 0; padding: 0; } .section > ul > li { width: 50px; height: 50px; font-size: 32px; text-align: center; padding-top: 2px; }

Tata letak selesai!

Di luar setiap daftar yang tidak berurutan adalah <div> dengan kelas .section Ini adalah elemen yang membungkus setiap bagian, sehingga kita dapat menggunakannya sebagai topeng untuk menyembunyikan angka yang berada di luar area jam yang terlihat:

 .section { position: relative; width: calc(100% / 3); overflow: hidden; }

Struktur jam sudah selesai dan rel sekarang siap untuk dianimasikan.

Menganimasikan jam digital

Ide dasar di balik keseluruhan animasi adalah bahwa tiga strip angka dapat dipindahkan ke atas dan ke bawah di dalam topeng mereka untuk menunjukkan angka yang berbeda dari 0 hingga 59 untuk detik dan menit, dan 0 hingga 23 untuk jam (untuk format 24 jam) .

Kita dapat melakukan ini dengan mengubah translateY dalam CSS untuk masing-masing strip angka dari 0 hingga -100%. Ini karena 100% pada sumbu y mewakili ketinggian seluruh strip. Nilai 0% akan menunjukkan angka pertama, dan 100% akan menunjukkan angka terakhir dari strip saat ini.

Sebelumnya, animasi kami didasarkan pada memutar tangan dari 0 hingga 360 derajat. Kami sekarang memiliki animasi berbeda yang memindahkan strip angka dari 0 ke -100% pada sumbu y:

 @keyframes tick { from { transform: translateY(0); } to { transform: translateY(-100%); } }

Menerapkan animasi ini ke strip angka detik dapat dilakukan dengan cara yang sama seperti jam analog. Satu-satunya perbedaan adalah pemilih dan nama animasi yang dirujuk:

 .second > ul { animation: tick steps(60) var(--minute) infinite; }

Dengan pengaturan step(60) , animasi bergerak di antara angka-angka seperti yang kita lakukan untuk jarum detik pada jam analog. Kita bisa mengubah ini untuk ease dan kemudian angka-angka akan meluncur dengan mulus ke atas dan ke bawah seolah-olah berada di pita kertas.

Menetapkan animasi centang baru ke bagian menit dan jam sama mudahnya:

 .minute > ul { animation: tick steps(60) var(--hour) infinite; animation-delay: calc(var(--timeShiftMinute) * -1); } .hour > ul { animation: tick steps(24) calc(24 * var(--hour)) infinite; animation-delay: calc(var(--timeShiftHour) * -1); }

Sekali lagi, deklarasinya sangat mirip, yang berbeda kali ini adalah pemilih, fungsi pengaturan waktu, dan nama animasi.

Jam sekarang berdetak dan menjaga waktu yang tepat:

Waktu membaca 14 1 10 dalam format 24 jam.

Satu lagi detail: Titik dua yang berkedip ( : )

Sekali lagi kita bisa berhenti di sini dan menyebutnya sehari. Tapi ada satu hal terakhir yang bisa kita lakukan untuk membuat jam digital kita sedikit lebih realistis: membuat pemisah titik dua antara menit dan detik berkedip setiap detik berlalu.

Kita bisa menambahkan titik dua ini di HTML tetapi itu bukan bagian dari konten. Kami ingin mereka menjadi peningkatan tampilan dan gaya jam, jadi CSS adalah tempat yang tepat untuk menyimpan konten ini. Untuk itulah content dan kita dapat menggunakannya pada ::after untuk menit dan jam:

 .minute::after, .hour::after { content: ":"; margin-left: 2px; position: absolute; top: 6px; left: 44px; font-size: 24px; }

Itu mudah! Tapi bagaimana kita bisa membuat titik dua detik berkedip juga? Kami ingin itu dianimasikan jadi kami perlu mendefinisikan animasi baru? Ada banyak cara untuk mencapai ini, tetapi saya pikir kita harus mengubah content kali ini untuk menunjukkan bahwa, secara tidak terduga, dimungkinkan untuk mengubah nilainya selama animasi:

 @keyframes blink { from { content: ":"; } to { content: ""; } }

Menganimasikan content tidak akan berfungsi di setiap browser, jadi Anda bisa mengubahnya menjadi opacity atau visibility sebagai opsi yang aman…

Langkah terakhir adalah menetapkan animasi kedip ke elemen semu dari bagian menit:

 .minute::after { animation: blink var(--second) infinite; }

Dan dengan itu, kita semua selesai! Jam digital menjaga waktu secara akurat dan kami bahkan berhasil menambahkan pemisah yang berkedip di antara angka-angka.

Buku: Yang Anda butuhkan hanyalah HTML dan CSS

Ini hanyalah salah satu contoh proyek dari buku baru saya, Yang Anda butuhkan hanyalah HTML dan CSS . Ini tersedia di Amazon di AS dan Inggris

Jika Anda baru memulai pengembangan web, ide-ide dalam buku ini akan membantu Anda naik level dan membangun antarmuka web animasi yang interaktif tanpa menyentuh JavaScript apa pun.

Jika Anda seorang pengembang JavaScript berpengalaman, buku ini adalah pengingat yang baik bahwa banyak hal dapat dibangun dengan HTML dan CSS saja, terutama sekarang karena kami memiliki lebih banyak alat dan fitur CSS yang kuat, seperti yang kami bahas dalam artikel ini. Ada banyak contoh dalam buku yang mendorong batas termasuk komidi putar interaktif, akordeon, penghitungan, penghitungan, validasi input lanjutan, manajemen status, jendela modal yang dapat ditutup, dan bereaksi terhadap input mouse dan keyboard. Bahkan ada widget peringkat bintang yang berfungsi penuh dan keranjang belanja.

Terima kasih telah meluangkan waktu untuk membuat jam bersama saya!


Postingan Tentu Kita Bisa Membuat Jam Khusus CSS Yang Menunjukkan Waktu Saat Ini! muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

July 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *