Cara membuat efek sliding background ini bukanlah hal baru. Saya sudah melihat beberapa situs web menggunakan efek ini, biasanya background yang digunakan adalah macam-macam foto dokumentasi dan sebagainya. Disini saya akan membahas bagaimana cara membuat efek sliding background. Berikut previewnya Demo. perlu di perhatikan bahwa ini berbeda dengan CSS slideshow atau Carousel, dimana gambar tersebut bisa dipisahkan menjadi slide yang dapat berhenti. Cara ini mengambil background dari satu elemen yang akan menjadi efek background yang akan selalu bergerak. HTML Posisi Element Mari kita tambah CSS untuk menetapkan posisi yang benar untuk 2 elemen ini. .wrapper { overflow hidden; } .sliding-background { height 500px; width 5076px; } .wrapper disini adalah 100% dari width default suatu browser, dan kita tambakan overflow properti yang akan menyembunyikan apapun secara visual yang berada di luar itu, anggap saja seperti tanaman dalam sebuah foto, mungkin ada beberapa hal extra di luar bungkuswrapper, tapi si pembungkus itu yang mencegah kita dari melihatnya. untuk .sliding-background disinilah triknya, saya memberi lebar 5076px agar membuat sliding efek ini bekerja. Membuat/memilih background image Disini kalian bebas memilih gambarnya. seperti di langkah sebelumnya saya agak sewenang-wenang membuat lebarnya 5076px hehe, itu sengaja dalam arti jika dibagi 3 akan cocok untuk waktu slide per menit. dengan kata lain gambar ini akan mengulang 3 kali dalam 1 menit. tambahkan background url pada CSS nya. .sliding-background { background url"tempatimage" repeat-x; height 500px; width 5076px; } nah, dengan begitu si gambar akan selalu bergerak mengulang di layar. Efek sliding Disini gambar akan bergerak dari kiri ke kanan, kalian juga dapat menggantinya dari kiri ke kanan, dengan mengubah properti transform pada 0%, dengan kata lain tinggal menukar posisinya saja. keyframes .slide { 0% { transform translate3d 0, 0, 0 ; } 100% { transform translate3d -1692px, 0, 0 ; } } Sekarang mari kita tambahkan waktu animasi slide pada .sliding-background dan jalankan untuk 1 menit dengan pengulangan tak terbatas. .sliding-background { background url"..path/to/image" repeat-x; height 560px; width 5076px; animation slide 60s linear infinite; } Dengan begitu efek sliding background ini sudah dapat dicoba. untuk mencobanya bisa disini Demo. Sekian Tutorial cara membuat efek sliding background menggunakan CSS, semoga bisa membantu. Comments comments
CaraMembuat Pengunjung Membuka Link Otomatis Tanp Cara Membuat Buka Tab Baru Tanpa Meninggalkan Hala template saya 22052013, 14:13; Cara Membuat Daftar Isi Blog Secara Otomatis; Tips Mencari Inspirasi Untuk Menulis Artikel; CARA PASANG BACKGROUND BERUBAH-UBAH; Cara Membuat Background Blog Dengan CSS Dan HTML
Cara membuat wallpaper bergerak? Sepertinya bakalan bikin tampilan layar HP atau PC dan laptop kamu menjadi tampil lebih ciamik, geng. Sebenarnya sudah ada banyak aplikasi untuk membuat wallpaper bergerak yang bisa kamu coba sekarang, geng. Baik itu untuk PC ataupun HP. Namun, kalau kamu cukup bingung bagaimana menggunakan dan memakainya, maka kamu bisa simak pembahasan Jaka selengkapnya kali ini. Jaka sudah merangkum semua tutorialnya secara lengkap, mulai dari cara membuat wallpaper bergerak tanpa aplikasi hingga cara membuat wallpaper bergerak dari TikTok. Kumpulan Cara Membuat Wallapaper Bergerak Lengkap Ada banyak aplikasi untuk membuat wallpaper bergerak yang bisa kamu download dan coba, geng. Bahkan Jaka sudah pernah membahasnya di artikel terpisah yang bisa kamu baca di bawah ini 10 Aplikasi Wallpaper Bergerak Keren 2020 Di Android & PC, Download Gratis! Mau tau cara membuat wallpaper bergerak keren? Nih, Jaka punya rekomendasi aplikasi wallpaper bergerak terbaik dan gratis untuk Android dan PC Update 2022 LIHAT ARTIKEL Namun, jika kamu merasa masih membutuhkan panduan langkah cara membuatnya secara lengkap, berikut adalah pembahasannya. Cara Membuat Wallpaper Bergerak Tanpa Aplikasi Bagaimana cara membuat wallpaper bergerak tanpa aplikasi? Tentu kamu bisa menggunakan website atau situs online untuk membuat foto yang bisa bergerak, geng. Kalau kamu sudah bosan dengan tampilan wallpaper laptop atau PC dan HP kamu yang begitu saja, kamu bisa coba membuat background bergerak tanpa aplikasi berikut ini. 1. Buka Situs Plotaverse Lewat aplikasi browser di HP atau PC, kamu buka situs Plotaverse lalu masuk ke halaman in PLOTAGRAPH. 2. Buat Akun dan Sign In Selanjutnya klik continue with browser lalu sign in dengan akun milikmu, kalau belum ada akun kamu bisa pilih create a free account kemudian memasukkan email dan nama saja. 3. Mulai Tambahkan Foto Jika sudah maka akan masuk ke halaman Plotaverse > Klik tombol + > klik Plotagraph. 4. Pilih Gambar Kemudian klik choose image untuk memilih foto yang akan kamu edit > klik create dan tunggu sampai gambar terunggah sepenuhnya. 5. Mulai Editing Gambar Jika gambar sudah terunggah maka akan langsung masuk ke halaman editing. Untuk membuat gambar foto tersebut bergerak, klik stabillizer/anchor points lalu batasi bagian objek awan saja. 6. Masukkan Animation Points Kemudian klik animation points fungsinya yaitu untuk membuat arah gerak dari awan atau background tersebut. Kamu bisa membuatnya dalam jumlah yang banyak dan tentunya searah. Selain itu, kamu juga bisa mengatur kecepatan gerak animasi loh. 7. Export File Jika sudah selesai mengedit > klik file > export as custom export > biarkan pengaturan aslinya langsung saja klik export. 8. Download File Jika sudah selesai kamu buka my export dan masuk ke halaman export dan tunggu sampai file selesai disimpan. Kemudian klik download file dalam bentuk video dapat kamu gunakan sebagai wallpaper di PC atau HP. Selain foto diri sendiri, kamu juga bisa gunakan gambar lainnya termasuk animasi untuk membuatnya menjadi wallpaper bergerak, geng. Lumayan deh buat latihan sebelum menggunakan aplikasi pembuat animasi di HP. Cara Membuat Wallpaper Bergerak di PC Berikutnya yakni cara membuat wallpaper bergerak di PC. Kalau para pengguna dan mantan pengguna Windows 7 pasti mengenal software DreamScene yang bisa mengubah video menjadi wallpaper di PC atau laptop. Namun, sayangnya software ini hanya bisa digunakan di Windows 7, geng. Belum ada pembaruan lagi dari software ini yang bisa digunakan untuk versi Windows di atasnya. Jangan sedih, Jaka sudah dapat penggantinya, geng. Software ini disebut sebagai Live Wallpaper by Giant. Kamu bisa dapatkan software ini melalui tautan berikut Live Wallpaper by Giant Latest Version Apps Productivity MscoderStudio DOWNLOAD Fungsi dan caranya pun hampir mirip dengan DreamScene. Kamu bisa simak tutorial langkah menggunakannya berikut ini. 1. Buka Software Live Wallpaper by Giant Download dan pasang software Live Wallpaper by Giant di PC atau laptop kamu. Kamu bisa download melalui tautan yang sudah Jaka sediakan tadi atau melalui Microsoft Store. Jika sudah terpasang buka software tersebut. 2. Pilih Create Wallpaper Selanjutnya klik tombol + atau Create Wallpaper 3. Pilih File Video Kemudian klik tombol Select the File untuk memilih file video yang hendak digunakan sebagai wallpaper bergerak di PC kamu. Selanjutnya klik Save. 4. Mainkan Wallpaper Video Selanjutnya kamu tinggal klik pada pilihan wallpaper yang sudah tersedia dalam software tadi. Voila, wallpaper PC kamu sudah berubah menjadi wallpaper bergerak video, seperti di gambar, geng. Oh ya, jika kamu ingin menghentikan wallpaper ini, kamu cukup menutup atau Exit software Live Wallpaper by Giant ini di Desktop kamu. Mudah bukan? Cara Membuat Wallpaper Bergerak di iPhone Berikutnya yakni cara membuat wallpaper bergerak di iPhone. Cara berikut ini sangat singkat dan mudah. Pasalnya memang fitur ini sudah disediakan oleh iPhone sejak kehadiran iOS 7 di iPhone ataupun iPad, geng. Simak tutorial dan langkah cara membuat wallpaper bergerak di iPhone milik kamu berikut ini. Simak hingga selesai, ya. 1. Buka Setting Buka Setting di iPhone milik kamu. 2. Masuk Ke Wallpaper Pilih opsi Wallpaper untuk masuk ke pengaturan wallpaper iPhone atau iPad. 3. Choose a New Wallpaper Pilih Choose a New Wallpaper untuk mengganti wallpaper baru. Kamu juga bisa melihat wallpaper yang sedang kamu gunakan saat ini. 4. Pilih Dynamic Wallpaper Pilih Dynamic untuk menggunakan wallpaper bergerak dengan animasi. Kamu juga bisa memilih Stills untuk wallpaper diam yang nggak bergerak. 5. Pilih Jenis Wallpaper Pilih animasi yang ingin kamu gunakan sebagai wallpaper bergerak. Saat ini ada 7 animasi pilihan yang bisa kamu pilih di iOS 10. Langkah 6 - Set Wallpaper Setelah kamu atur, kamu bisa lihat lockscreen atau halaman terdepan untuk melihat wallpaper animasi sudah bisa atau belum. Cara Membuat Wallpaper WA Bergerak Selanjutnya adalah cara membuat wallpaper WhatsApp WA bergerak, geng. Pada tutorial kali ini kamu juga butuh menggunakan aplikasi. Aplikasi tersebut ialah Coocoo WhatsApp, aplikasi ini apabila sudah kamu download dan instal akan secara otomatis terhubung atau sinkronisasi dengan akun WhatsApp kamu. Kamu bisa download aplikasi tersebut melalui tautan berikut ini, kemudian kamu juga dapat membaca tutorial selengkapnya di sini CoocooWhatsApp Apps Social & Messaging CoocooWhatsApp DOWNLOAD 1. Buka aplikasi WhatsApp Download dan install terlebih dahulu aplikasi WhatsApp MOD bernama Coocoo WhatsApp. Setelah itu masuk ke akun masing-masing seperti biasanya. 2. Buka Menu Lainnya Ketuk menu tiga titik yang berada di bagian kanan atas. Lalu pilih menu Coocoo Setting. 3. Buka Theme Store Pilih menu Theme Store kemudian pilih salah satu tema transparan yang ada. 4. Buka DIY Theme Buka lagi Coocoo setting dan pilih DIY Theme. Selanjutnya pilih menu Wallpaper dan pilih wallpaper gerak yang umumnya ditandai dengan icon play kecil. Jika sudah ketuk Save untuk menggunakannya di WhatsApp. Cara Membuat Wallpaper Bergerak dari TikTok Untuk bisa mengubah video TikTok jadi wallpaper bergerak HP kamu hanya perlu instal satu aplikasi tambahan bernama Video Wallpaper. Dengan aplikasi ini membuat kamu bisa download video TikTok dan menjadikannya wallpaper HP kamu, geng. Kamu bisa download melalui tautan berikut ini Video Wallpaper - Set your video as Live Wallpaper Apps DOWNLOAD Cara menggunakan aplikasi ini juga sangat sederhana. Hanya butuh beberapa tahap sederhana saja. Ikuti tutorial langkah membuat wallpaper video di bawah ini, ya. 1. Pilih Video TikTok Siapkan video yang akan kamu jadikan wallpaper. Kamu bisa download video TikTok dan masukkan ke dalam galeri. Setelah videonya terunduh, langsung saja buka aplikasi Video Wallpapernya. Cari dan pilih video yang ingin kamu jadikan wallpaper video dari galeri. 2. Pasang Wallpaper Video TikTok Kamu bisa pilih untuk menggunakan video wallpaper berserta suaranya atau nggak. Ketuk opsi Turn On Audio kalau kamu mau membuat video wallpaper dengan suara. Setelah itu ketuk Set As Launcher Wallpaper. 3. Set Wallpaper TikTok Langkah membuat wallpaper video TikTok selanjutnya adalah ketuk tombol Set Wallpaper yang ada di bagian sudut kanan atas, geng. 4. Pilih Home Screen atau Lock Screen Setelah itu kamu akan diberikan pilihan, apakah akan mejadikan video wallpaper hanya untuk home screen atau dengan lock screen sekaligus. Ketuk pilihan mana yang kamu inginkan. Sekarang video Tik Tok kamu sudah aktif jadi video wallpaper guys. Dijamin tampilan HP kamu jadi lebih kece karena objeknya yang bergerak. Akhir Kata Nah, itu tadi kumpulan cara membuat wallpaper bergerak terlengkap untuk segala jenis perangkat. Mulai dari cara membuat wallpaper bergerak tanpa aplikasi hingga membuatnya dari video TikTok. Apakah ada hal lain yang kamu tanyakan mengenai teknologi dan aplikasi? Yuk, bagikan pertanyaan dan pendapatmu melalui kolom komentar, geng. Baca juga artikel seputar Tech Hack atau artikel menarik lainnya dari Ilham Fariq Maulana ARTIKEL TERKAIT 15 Aplikasi Edit Foto Jadi Video Terbaik 2021 di Android dan PC, Praktis! Cara Mudah Edit Video Jadi Cinematic, Modal HP Doang! 19 Aplikasi Download Video Terbaik 2023, Bisa Download dari Medsos! 4 Cara Lengkap Menggabungkan Video di HP dan Laptop, Gampang! 10 Aplikasi Penggabung Video di Android Gratis 2023, Tanpa Watermark! Cara Memperkecil Ukuran Video Tanpa Mengurangi Kualitas, Bisa di HP Juga!
Cara Membuat Background Website Bergerak – Background website yang bergerak selalu menarik perhatian pengunjung. Dengan background yang bergerak, website Anda akan terlihat lebih menarik dan berbeda dari yang lain. Jika Anda ingin membuat background website Anda bergerak, berikut adalah caranya 1. Pertama, pastikan bahwa Anda telah menyiapkan sebuah gambar yang ingin Anda gunakan sebagai background. Anda bisa membuat gambar sendiri atau menggunakan gambar yang telah tersedia di internet. Pastikan juga bahwa gambar yang Anda gunakan memiliki ukuran yang sesuai dengan ukuran background website Anda. 2. Selanjutnya, Anda perlu mengunggah gambar yang Anda pilih ke server web Anda. Anda bisa menggunakan FTP atau cPanel untuk mengunggah gambar ke server web Anda. 3. Setelah gambar berhasil diunggah, Anda perlu menambahkan kode CSS berikut untuk membuat background website Anda bergerak. body { background-image url“[URL Gambar Anda]”; background-repeat no-repeat; background-size cover; animation slide 30s linear infinite; } keyframes slide { 0% { background-position 0% 0%; } 50% { background-position 100% 0%; } 100% { background-position 0% 0%; } } 4. Simpan kode CSS yang Anda tambahkan, dan cobalah untuk melihat hasilnya. Jika background website Anda bergerak dengan benar, Anda sudah berhasil membuat background website bergerak. Dengan membuat background website bergerak, website Anda akan terlihat lebih menarik dan berbeda dari yang lain. Semoga cara di atas dapat membantu Anda membuat background website Anda bergerak dengan mudah. Daftar Isi 1 Penjelasan Lengkap Cara Membuat Background Website 1. Pastikan bahwa Anda telah menyiapkan gambar yang akan digunakan sebagai background 2. Unggah gambar ke server web Anda dengan menggunakan FTP atau 3. Tambahkan kode CSS untuk membuat background website 4. Simpan kode CSS dan lihat hasilnya untuk melihat apakah bergerak dengan 5. Dengan membuat background website bergerak, website Anda akan terlihat menarik dan berbeda dari yang lain. Penjelasan Lengkap Cara Membuat Background Website Bergerak 1. Pastikan bahwa Anda telah menyiapkan gambar yang akan digunakan sebagai background website. Pastikan bahwa Anda telah menyiapkan gambar yang akan digunakan sebagai background website adalah langkah pertama yang harus Anda lakukan saat membuat background website bergerak. Gambar yang dipilih harus sesuai dengan tema website Anda dan harus memiliki resolusi tinggi agar hasil akhirnya terlihat jelas. Beberapa jenis format gambar yang dapat Anda gunakan antara lain PNG, JPEG, dan GIF. Jika Anda memilih untuk menggunakan GIF, pastikan bahwa ukurannya tidak terlalu besar karena dapat menyebabkan website Anda menjadi lambat. Selain itu, pastikan juga bahwa gambar yang Anda pilih dapat ditampilkan dengan jelas di layar website. Untuk melakukan ini, Anda mungkin perlu memotong gambar atau menggunakan gambar yang sudah memiliki ukuran yang sesuai. Namun, ingat bahwa Anda akan menggunakan gambar ini sebagai background bergerak, jadi pastikan bahwa hasil akhirnya tetap menarik dan menyenangkan untuk dipandang. Ketika Anda telah menyiapkan gambar yang akan digunakan sebagai background website, selanjutnya Anda akan siap untuk membuatnya bergerak. Untuk melakukan ini, Anda dapat menggunakan beberapa cara, termasuk menggunakan bahasa pemrograman HTML dan CSS untuk membuat animasi atau menggunakan beberapa tools online yang tersedia untuk membuat background website bergerak. Setelah Anda selesai, Anda hanya perlu menyimpan file tersebut ke dalam folder website Anda, dan Anda akan siap untuk menikmati hasil akhir dari background website bergerak Anda. 2. Unggah gambar ke server web Anda dengan menggunakan FTP atau cPanel. Setelah Anda memiliki gambar yang ingin Anda gunakan untuk membuat background website bergerak, langkah selanjutnya adalah mengunggah gambar tersebut ke server web Anda. Ini bisa dilakukan menggunakan File Transfer Protocol FTP atau cPanel. Metode yang paling disukai adalah FTP, karena lebih cepat, sederhana, dan lebih mudah digunakan. Untuk mengunggah gambar Anda ke server web Anda dengan FTP, Anda harus terlebih dahulu mengunduh dan menginstal perangkat lunak FTP ke komputer Anda. Setelah diinstal, Anda harus membuat koneksi FTP ke server Anda dengan menggunakan nama pengguna dan kata sandi yang disediakan oleh penyedia layanan web hosting Anda. Kemudian, Anda dapat mengunggah gambar ke server Anda dengan menggunakan perangkat lunak FTP. Anda hanya perlu mencari gambar yang ingin Anda unggah dan klik tombol “Unggah”. Anda juga dapat menggunakan cPanel untuk mengunggah gambar ke server Anda. Pada cPanel, Anda akan melihat menu “File Manager” di sisi kiri, di mana Anda dapat mengunggah gambar Anda. Setelah Anda selesai mengunggah gambar tersebut ke server, Anda dapat mulai membuat background website bergerak. Anda perlu menambahkan kode HTML dan CSS ke halaman web Anda untuk membuat gambar bergerak. Ini akan memastikan bahwa gambar yang Anda unggah benar-benar bergerak di halaman web Anda. 3. Tambahkan kode CSS untuk membuat background website bergerak. Ketika membuat background website bergerak, Anda harus menggunakan kode CSS. CSS adalah bahasa markup yang digunakan untuk membuat desain di situs web. Untuk membuat background bergerak, Anda harus menggunakan properti CSS yang disebut “background-position”. Kode CSS ini akan mengatur posisi background dari atas ke bawah atau dari kiri ke kanan. Untuk membuat background bergerak, Anda harus menambahkan tag CSS berikut ke dalam file HTML Anda body { background-position center; background-repeat no-repeat; background-size cover; background-image url“ animation move 3s linear infinite; } Di atas, Anda dapat melihat beberapa properti CSS yang kami gunakan. Terlebih dahulu, kami menetapkan posisi background di tengah halaman, kemudian mengatur agar tidak diulang, lalu membuat ukurannya sesuai dengan ukuran halaman web. Terakhir, kami menambahkan animasi yang akan menggerakkan background. Kemudian, kami juga harus menambahkan sebuah animasi berdasarkan properti CSS yang disebut “keyframes”. Dengan properti ini, Anda dapat menentukan berapa banyak gambar yang akan diperlukan untuk membuat efek bergerak. Dengan properti ini, Anda dapat menentukan berapa banyak gambar yang akan diperlukan untuk membuat efek bergerak. Kode ini harus ditambahkan setelah tag CSS body keyframes move { 0% { background-position 0px 0px; } 100% { background-position 500px 500px; } } Di atas, kami menentukan bahwa kami akan menggunakan animasi bergerak selama tiga detik, dan kami menetapkan posisi awal dan akhir dari background. Selanjutnya, kami harus menyimpan file HTML dan CSS dan memuatnya di browser web untuk melihat hasil akhir. Dengan menggunakan properti CSS dan animasi keyframes, Anda dapat membuat background website bergerak dengan mudah. Ini adalah cara yang efektif untuk menambahkan efek visual ke situs web Anda. 4. Simpan kode CSS dan lihat hasilnya untuk melihat apakah bergerak dengan benar. Langkah keempat dalam membuat background website bergerak adalah menyimpan kode CSS dan melihat hasilnya untuk melihat apakah bergerak dengan benar. Kode CSS yang Anda tulis dapat digunakan untuk membuat gambar bergerak di background website Anda. Kode tersebut harus disimpan di file CSS yang berbeda dari file HTML Anda. Setelah Anda menyimpan kode CSS Anda, Anda harus memuat ulang halaman untuk melihat apakah background bergerak dengan benar. Jika Anda melihat bahwa gambar tidak bergerak sesuai yang diharapkan, maka Anda harus memeriksa ulang kode CSS yang Anda tulis. Ini bisa sangat membantu untuk melihat apakah Anda telah menulis kode yang benar. Anda juga dapat menggunakan debugger CSS untuk memeriksa apakah ada kesalahan dalam kode Anda. Jika Anda menemukan kesalahan, Anda dapat menyelesaikannya dengan menggunakan debugger. Setelah Anda yakin bahwa kode CSS Anda benar, Anda dapat melihat apakah background bergerak dengan benar. Anda dapat melihat hasil untuk melihat apakah background bergerak dengan benar. Jika background bergerak dengan benar, maka Anda telah berhasil membuat background website bergerak. Jika tidak, maka Anda harus mengulangi langkah-langkah yang telah Anda lakukan sebelumnya untuk memastikan bahwa Anda telah menulis kode yang benar. Dengan demikian, cara membuat background website bergerak adalah dengan menyimpan kode CSS yang Anda tulis dan melihat hasilnya untuk memastikan bahwa background bergerak dengan benar. Hal ini penting untuk memastikan bahwa website Anda berfungsi dengan benar. 5. Dengan membuat background website bergerak, website Anda akan terlihat menarik dan berbeda dari yang lain. Membuat background website bergerak adalah salah satu cara untuk membuat website Anda terlihat menarik dan berbeda dari yang lain. Ini adalah cara yang efektif dan mudah untuk meningkatkan daya tarik website Anda tanpa meningkatkan biaya. Untuk membuat background website bergerak, Anda harus memiliki akses ke editor HTML dan CSS. Terlebih dahulu, Anda harus membuat gambar yang akan bergerak, maka Anda harus membuat gambar yang sesuai dengan ukuran yang Anda inginkan. Kemudian, Anda perlu menyisipkan gambar tersebut ke dalam kode HTML Anda. Setelah itu, Anda perlu menambahkan style untuk gambar tersebut dengan menggunakan CSS. Anda bisa menggunakan style seperti position absolute, atau bisa juga menggunakan properti transform untuk membuat gambar bergerak. Ketika design background website bergerak selesai, Anda akan melihat hasilnya. Dengan membuat background website bergerak, website Anda akan terlihat menarik dan berbeda dari yang lain. Background website bergerak akan menarik perhatian pengunjung dan mendorong mereka untuk menelusuri lebih jauh website Anda. Selain itu, membuat background website bergerak juga merupakan cara yang baik untuk meningkatkan ranking SEO website Anda. Hal ini karena website yang menarik dianggap lebih relevan oleh mesin pencari. Jadi, dengan membuat background website bergerak, Anda dapat meningkatkan kredibilitas website Anda dan meningkatkan ranking SEO. Dengan demikian, membuat background website bergerak merupakan cara yang efektif dan efisien untuk meningkatkan daya tarik website Anda. Hal ini dapat meningkatkan pengalaman pengguna dan meningkatkan ranking SEO website Anda.CaraMembuat Stiker WA Bergerak Dari Video Media sosial Whatsapp atau sering disingkat dengan WA menjadi salah satu aplikasi primadona dikalangan kawula muda dewasa bahkan sampai bapak-bapak dan emak-emak yang membuat grup keluarga. Fitur untuk menampilkan gambar bergerak ini dikenal dengan nama sliders atau disebut juga dengan nama carousel. CSS HTMLSetelah kita belajar tentang properti color dan nilai-nilai warna yang valid di CSS, berikutnya kita pelajari tentang namanya, properti background fungsinya untuk memberikan background pada elemen kamu coba ketik background pada kode CSS di Inspect Elemen, maka akan muncul beberapa saran properti yang berkaitan dengan properti background- punya fungsi yang dua cara kita memberikan background di CSS, yakni dengan warna dan gambar. Permberian background dengan gambar membutuhkan beberapa properti tambahan lagi untuk mengatur sebabnya ada banyak properti background-* si tutorial ini, kita akan membahas properti-properti yang penting dan sering digunakan dalam membuat kita mulai.. Background WarnaUntuk memberikan background warna, kita bisa memberikan nilai warna pada properti background seperti ranam warna, kode heksa warna, fungsi rgb, rgba, hsl, dan kita langsung coba file baru dengan nama kemduian isi kodenya seperti ini Contoh Background Warna header { background-color violet; } Belajar Background di CSS Maka hasilnyaElemen berhasil kita set warna latarnya menjadi kita menggunakan properti background-color untuk memberikan warna latar. Sebenarnya bisa juga dengan properti background yang kita berikan pada background-color berupa nama warna. Silahkan coba juga gunakan nilai warna yang lain seperti kode heksa, fungsi rgb, hsl, dan menggunakan kode heksaNilai warna sudah kita pelajari di materi sebelumnyaTutorial CSS Menggunakan Warna di CSSOke, selanjutnya kita akan coba menggunakan background dengan warna kita buat dulu warna gradasinya di website copy kode CSS gradient yang kamu dapatkan...dan ubah kode CSS contoh yang tadi menjadi seperti ini Contoh Background Warna header { background rgb34,193,195; background linear-gradient90deg, rgba34,193,195,1 0%, rgba240,45,253,1 100%; } Belajar Background di CSS Maka hasilnyaMantap 👍, sekarang backgroud-nya pakai warna mengapa kita menggunakan dua properti background?background rgb34,193,195; background linear-gradient90deg, rgba34,193,195,1 0%, rgba240,45,253,1 100%;Ini untuk antisipasi, jika browser tidak mendukung menggunakan warna gradasi, maka warna background yang dipakai adalah warna dari fungsi rgb.Background ImageJika ingin menggunakan warna latar gambar, maka kita bisa menggunakan properti background-image atau background gambar yang didukung bisa jpg, png, gif, webp, avif, svg, selama format gambar tersebut bisa dibuka di web browser, maka bisa dipakai sebagai kalau begitu..Mari kita coba latihan menggunakan background silahkan download file gambarnya di Unsplash[ Download Background].Download yang ukuran bisa pakai yang mana aja. Tapi kita coba ukuran medium, karena bisanya ukuran layar komputer dan Hp kamu download, ubah namanya menjadi kemudian taruh di satu folder dengan file file tidak berada di satu folder dengan File HTML, maka nanti kamu bisa tulis alamat path-nya di itu, buat file HTML baru dengan nama dengan isi sebagai berikut. Contoh Background Warna body { background-image url' } header { background rgba255,255,225, } Belajar Background di CSS Pada kode ini, kita memberikan background gambar untuk elemen dan memberikan background putih transparan 50% untuk elemen .Maka hasilnyaCoba perbesar dan perkecil ukuran jendelanya.. atau coba juga melakukan zoom RepeatJika kita melakukan zoom out pada contoh yang tadi, maka hasilnya akan seperti iniGambar background-nya akan diulang-ulang. Jika kamu pakai ukuran gambar yang kecil, maka akan ditampilkan seperti cara agar tidak diulang-ulang?Kita bisa gunakan properti background-repeat. Properti ini punya beberapa nilairepeat-x artinya mengulang background pada sumbu x aja;repeat-y artinya mengulang background pada sumbu y aja;no-repeat artinya tidak mengulang kita bisa pakai no-repeat bila ingin background-nya tidak kode CSS-nya akan menjadi seperti inibody { background-image url' background-repeat no-repeat; }Maka hasilnyaBackground tidak akan Ukuran BackgroundKita bisa mengatur ukuran background dengan properti background-size, properti ini punya beberapa nilai yang validpx, pt, em, rem fixed ukuran dalam angka dan satuan, contoh 200px, vh dynamic mengikuti ukuran tinggi dan lebar layar view port;contain dynamic mengikuti ukuran lebar elemen;cover dynamic mengikuti ukuran lebar dan tinggi elemen;Mari kita coba kode CSS background pada contoh sebelumnya menjadi seperti inibody { background-image url' background-repeat no-repeat; background-size cover; }Maka hasilnyaMenggunakan Gambar SVGGambar SVG Scaleable Vector Graphic merupakan format gambar vektor yang menjadi standar di web saat seperti gambar bitmap jpg, png, gif yang ukurannya dibatasi dengan piksel. Vektor bisa kita perbesar ukurannya berapapun yang kita mau, tanpa merusak untuk latihan.. kita akan menggunakan gambar vektor dari buat gambar vektor wave di sana, kemudian download file taruh di satu folder dengan itu, buat file HTML baru dengan nama dan isi kodenya seperti ini Contoh Background SVG body { background-image url' background-repeat no-repeat; } header { background rgba255,255,225, } Belajar Background di CSS Pada kode ini, kita tidak perlu menentukan ukuran background untuk file vektor. Ukuran yang dipakai adalah ukuran maksimal 100%. Tapi kamu juga bisa menentukan ukurannya, jika sekarang coba buka di web hasilnyaWoaw.. keren 😍.Background Blur di CSSBelakangan ini banyak konsep desain web dengan background blur. Konsep ini dikenal dengan glass morphology design, karena bentuknya mirip seperti untuk membuat yang seperti ini, ada properti css baru bernama backdrop-filter untuk memberikan filter pada ingin memberikan filter blur, maka kita harus memberikan nilai dengan fungsi blur.ContohBuatlah file baru dengan nama kemudian, isi dengan kode berikut. Contoh Background Blur body { background-image url' background-repeat no-repeat; background-size cover; } header { background rgba255,255,225, } article { background-color rgba255, 255, 255, backdrop-filter blur10px; padding 1rem; } Belajar Background di CSS Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum. Pada contoh ini, kita memberikan efek filter blur 10px untuk background elemen .Maka hasilnyaMantap.. 😍 efek blur, masih ada lagi efek lainnya sepertibrightness untuk efek kecerahan;contrast untuk efek kontras;drop-shadow untuk efek bayangan;grayscale untuk efek hitam putih;hue-rotate untuk efek warna hue;invert untuk efek warna negatif;opacity untuk efek transparan;saturate untuk efek sturasi warna;sepia untuk efek warna kamu coba-coba backdrop-filter adalah properti baru yang belum masuk standar resmi CSS. Tidak semua browser mendukung properti ini. Kamu bisa mengeceknya di Selanjutnya?Oke, biar tutorial ini tidak terlalu panjang.. kita akhiri sampai di masih banyak lagi properti yang berkaitan tentang background, terutama dalam menggunakan background yang saya bahas di tutorial ini adalah yang paling sering dipakai saati ni. Sisanya, kamu bisa coba-coba ada yang dibingungkan, tanya aja di komentar!Selanjutnya silahkan pelajari tentang Teks Formating di belajar. 🙌 2 Wallpaper Bergerak. Setelah mengetahui cara merubah wallpaper laptop dengan gambar statis atau tidak bergerak, selanjutnya tinggal mencoba menggunakan gambar bergerak (Live Wallpaper). Agar bisa melakukannya harus menggunakan aplikasi pihak ketiga. Sebab Windows tidak menyediakan fitur untuk mengubah wallpaper menjadi bergerak. Jasa Buat Website – 12 Background Animasi Untuk Website & Blog, Para desainer dan pengembang telah mengetahui bahwa latar belakang adalah salah satu aspek terpenting dalam keseluruhan desain dan nuansa halaman web. Baru-baru ini orang beralih ke animasi untuk menambahkan lebih banyak daya tarik visual ke latar belakang situs web mereka. Berikut adalah 10 Background Animasi Untuk Website & Blog yang patut Anda coba 1. SakuraSee the Pen tqdmv by Anand Davaasuren at80 on Floating Cloud BackgroundSee the Pen Floating Cloud Background by Shaw shshaw on Ambient BackgroundSee the Pen Ambient Background by Dimitra Vasilopoulou mimikos on Canvas Particle BackgroundSee the Pen canvas – particles – waves by deathfang deathfang on Rainbow Lines of StraightnessSee the Pen rainbow lines of straightness by Matei Copot towc on Rain-Bros don’t like JSSee the Pen Rain-Bros don’t like JS by cihadturhan cihadturhan on Canvas Particle AnimationSee the Pen Canvas Particle Animation by Julian Laval JulianLaval on Particles in spaceSee the Pen Particles in space by Dean Wagman deanwagman on Mouse OrbitSee the Pen Mouse Orbit by Isaac Suttell isuttell on Particle Network AnimationSee the Pen Particle Network Animation by Franky franky on Particle GalaxySee the Pen Particle Galaxy by Sebastian Schepis sschepis on Error 404See the Pen Error 404 by Swarup Kumar Kuila uiswarup on Mencoba !!! , Jika tamplan tidak terbuka sempurna, silahkan Klik link Non – Web Design – Jasa Bikin Website Murah – Maintenance Website Adalah Agency / Jasa Pembuatan Website Murah dan Berkualitas, Jasa Buat Aplikasi Mobile, Android, IOS, Windows & Sistem Informasi. Kami memberikan jasa pembuatan website perusahaan dan web managed services yang sekaligus dapat digunakan untuk Branding, Kampanye Online, dan Penghubung antara Dunia Online dan Offline untuk mendapatkan prospek bisnis. .
cara membuat background website bergerak
