8 Cuplikan CSS & JavaScript Lezat untuk Membuat Ulang Camilan Manis

Hal hebat tentang suguhan manis adalah kita tidak perlu alasan untuk memilikinya. Tidak harus hari ulang tahun atau hari libur untuk menikmati permen, makanan yang dipanggang, atau bahkan minuman ringan. Bukan berarti salah satu dari kita akan berlebihan, ingatlah.

Selain bercanda, ramuan lezat ini sering dikaitkan dengan saat-saat indah. Mereka membawa kembali kenangan masa kecil dan saat-saat bersama dengan orang-orang terkasih. Dan pengalaman membuatnya juga bisa memicu perasaan kabur yang hangat itu.

Bukan rahasia lagi bahwa banyak desainer web memiliki gigi manis. Beberapa bahkan telah melangkah lebih jauh dengan menggunakan keterampilan mereka untuk membuat kuil virtual untuk favorit mereka. Resepnya berbeda, tetapi semuanya memiliki dua bahan yang sama: CSS dan JavaScript.

Untuk membuktikan maksud kami, berikut adalah delapan cuplikan yang menggugah selera untuk mempermanis layar Anda.

Gula, Gula dengan Three.js & GSAP oleh Steve Gardner

Siapa yang siap untuk setumpuk barang? Animasi pintar ini mengandalkan Three.js dan GSAP untuk mengeja kata “GULA.” Ini adalah penarik perhatian pasti. Plus, ini menunjukkan bagaimana seseorang dapat membuat beberapa presentasi kompleks menggunakan perpustakaan ini.

Lihat Pena Gula gula oleh Steve Gardner

Permen Cincin Preloader CSS Murni oleh Jon Kantner

Memuat grafik memberikan peluang utama untuk menambah kreativitas. Cuplikan CSS murni ini menciptakan pusaran permen biru dan putih yang indah. Ini menyenangkan sekaligus memesona.

Lihat Pena Preloader Cincin Permen oleh Jon Kantner

Slider Cupcake Khusus CSS dengan Taburan oleh Jamie Coulter

Visual dapat melakukan keajaiban dalam hal membuat pelanggan tertarik pada produk Anda. Di sini kita memiliki slider yang menggoda sekaligus licin. Animasinya menghadirkan perasaan interaktivitas, sementara ilustrasinya sangat indah. Dan untuk berpikir bahwa semua ini dilakukan hanya dengan menggunakan CSS? Luar biasa.

Lihat Pena Slider Cupcake Khusus CSS dengan Taburan! oleh Jamie Coulter

Hati Permen CSS & GSAP oleh Katherine Kato

Permen hati secara tradisional dikaitkan dengan Hari Valentine. Tapi kecintaan kami pada kode dapat dirayakan sepanjang tahun! Animasi menyenangkan ini menggabungkan kedua gairah dengan bantuan CSS dan GSAP.

Lihat Pena Permen Hati oleh Katherine Kato

Buat ulang Candyland dengan CSS, SVG & JavaScript oleh Luke Lincoln

Penghormatan berlebihan untuk permainan papan klasik ini Negeri Permen cukup berat pada gula. Untungnya, semuanya bebas dari rasa bersalah saat ditampilkan di layar Anda. Yang ini adalah perpaduan yang bagus antara SVG dan JavaScript yang menghasilkan presentasi yang lezat.

Lihat Pena Gula terburu-buru (permen) oleh luke lincoln

Buat Latar Belakang Soda Oranye oleh Lisa Benmore

Mungkin tidak ada yang lebih menyenangkan daripada menikmati soda di hari yang hangat. Jika Anda tidak memiliki salah satu dari hal-hal itu, cuplikan ini mungkin merupakan hal terbaik berikutnya. Gelembung acak dengan latar belakang oranye membawa rasa jeruk manis ke pikiran. Dan itu akan menjadi latar belakang yang bagus untuk area pahlawan situs web.

Lihat Pena Siapa yang Suka Soda Jeruk? #codepenchallenge oleh Lisa Benmore

Buat Kue 3D CSS oleh S. Shahriar

Tidak yakin potongan kue mana yang Anda inginkan? Maka mungkin Anda harus melihat-lihat untuk menemukan bagian yang paling menarik. Itulah tepatnya yang dilakukan model 3D ini, karena Anda dapat menyeretnya (atau menggunakan keyboard) untuk mendapatkan tampilan 360 derajat. Karya seni dibuat menggunakan CSS, sementara sedikit JavaScript menambahkan rasa.

Lihat Pena Kue 3D CSS oleh S. Shahriar

Puding Arahkan CSS oleh Deren

Terkadang hal paling sederhana yang membuat kita bahagia – seperti sedikit puding untuk pencuci mulut. Cuplikan ini memberi kita kesempatan untuk tersenyum pada makanan kita sekali saja. Arahkan kursor ke puding ini dan nikmati reactionnya yang menyenangkan.

Lihat Pena Tantangan: Puding Arahkan CSS🍮 oleh Deren

Menulis Kode Termanis

Kreativitas kita cenderung menjadi yang terbaik saat kita bersenang-senang. Dan apa yang bisa lebih menyenangkan daripada membuat sesuatu yang manis? Cuplikan di atas adalah contoh utama tentang bagaimana desainer web yang inovatif dapat menjadi ketika diberi kebebasan untuk bereksperimen.

Plus, mudah untuk melihat kesamaan antara menulis kode dan membuat suguhan manis. Masing-masing membutuhkan penggunaan alat dan bahan yang ahli untuk menghasilkan hasil terbaik.

Jika Anda ingin menggoda selera Anda lebih jauh, silakan lihat kami Koleksi CodePen!

Leave a Comment

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

Scroll to Top