CaraMembuat Tulisan Berjalan di Blog Keren (Running Text) By Kopi Prestasi 11 Apr, 2019 7 comments. Internet banyak digunakan untuk keperluan dari mencari informasi, berita, data, dan banyak hal lain seperti membuat website bisnis ataupun blog pribadi. Banyak yang mencari tahu bagaimana membuat tulisan berjalan seperti di layar televisi di Langkah2. Buatlah sebuah tulisan dengan menggunakan Type tools pada Photoshop. Langkah 3. Jika Anda menggunakan versi Photoshop 7 hingga CS: Klik icon Jump to Image ready. Icon ini terletak di sebelah bawah pada Tools Box. Anda juga bisa memilih menu File > Jump To > Adobe ImageReady 7.0 (pada Photoshop 7), atau File > Edit in Image Ready Simpanini sebagai 'hdr-bkg.png' di dalam folder 'img'. Berikutnya, kita akan membuat judul konten. Sekali lagi, buka Photoshop dan buat 934x284 px. Buat persegi panjang melengkung dengan menggunakan tool yang sesuai, pilih buat yang dibuat, buat sebuah layer baru, tambahkan gradien dan beri itu beberapa drop shadow. Membuatbackground matrix Bergerak di blog Written By SMPN4BANDARSEIKIJANG on Senin, 29 Oktober 2012 | 23.23. Hy sobat blog.. Melanjutkan Postingan Sebelumnya, namun kali ini saya akan membahas Cara membuat Background matrix blog. Namun background nya bergerak sob. hehehehehe.. Ok langsung saja kita simak caranya: ItulahCara membuat teks berjalan (marquee) baik di notepad, di blog (website) ataupun ditempat coding lainnya yang bisa Anda praktikkan dengan sangat mudah. Sumber Referensi: carakumembuat dan caramadia. Jika MARQUEE Tidak Bergerak, Silakan Klik Tautan Berikut ini Untuk Melihat Tutorial Cara Membuat Marquee. Caramembuat video animasi bergerak dapat dibuat menjadi lebih mudah, apalagi dijaman yang sudah modern saat ini. Tentu saja anda juga bisa meminta bantuan lewat siapapun itu, baik itu meminta bantuan melalui sebuah jasa video animasi atau mungkin anda bisa membantuan melalui sebuah aplikasi. Dengan begitu, anda akan merasa menjadi lebih mudah dan tidak mengalami kerepotan dalam pembuatan . Pengantar CSS modern adalah alat bantu andal yang dapat Anda gunakan untuk membuat banyak fitur Antarmuka Pengguna UI mutakhir. Dahulu, fitur ini mengandalkan pustaka JavaScript. Dalam panduan ini, Anda akan menyiapkan beberapa baris CSS untuk membuat efek gulir parallax pada halaman web. Anda akan menggunakan gambar dari sebagai gambar latar belakang penampung. Anda akan memiliki halaman web dengan efek gulir parallax yang murni menggunakan CSS saja setelah menyelesaikan tutorial. Peringatan Artikel ini menggunakan properti CSS eksperimental yang tidak berfungsi di semua peramban. Proyek ini telah diuji dan berfungsi di Chrome. Teknik ini kurang berhasil di Firefox, Safari, dan iOS karena adanya beberapa optimalisasi di peramban-peramban tersebut. Langkah 1 — Membuat Proyek Baru Dalam langkah ini, gunakan baris perintah untuk menyiapkan folder dan berkas proyek baru. Untuk memulai, buka terminal Anda dan buat folder proyek baru. Ketikkan perintah berikut untuk membuat folder proyek mkdir css-parallax Dalam hal ini, Anda menamai folder tersebut css-parallax. Sekarang, masuk ke folder css-parallax cd css-parallax Selanjutnya, buat berkas di folder css-parallax dengan perintah nano nano Anda akan menempatkan semua HTML untuk proyek ke dalam berkas ini. Di langkah selanjutnya, Anda akan mulai membuat struktur halaman web. Langkah 2 — Menyiapkan Struktur Aplikasi Dalam langkah ini, Anda akan menambahkan HTML yang diperlukan untuk membuat struktur proyek. Di dalam berkas tambahkan kode berikut css-parallax/ CSS Scrolling Parallax Ini adalah struktur dasar kebanyakan halaman web yang menggunakan HTML. Tambahkan kode berikut di dalam tag css-parallax/ ... Cute Kitten Boring Fluffy Kitten ... Kode ini menghasilkan tiga bagian berbeda. Dua bagian akan memiliki gambar latar belakang, dan satu lagi akan berupa latar belakang statis dan polos. Dalam beberapa langkah selanjutnya, Anda akan menambahkan gaya untuk setiap bagian menggunakan kelas yang Anda tambahkan di HTML. Langkah 3 — Membuat Berkas CSS dan Menambahkan CSS Awal Dalam langkah ini, Anda akan membuat sebuah berkas CSS. Kemudian, Anda akan menambahkan CSS awal untuk menata gaya situs web dan membuat efek parallax. Pertama, buat berkas di folder css-parallax dengan perintah nano nano Di sinilah Anda akan menempatkan semua CSS yang diperlukan untuk membuat efek gulir parallax. Selanjutnya, mulai dengan kelas .wrapper. Di dalam berkas tambahkan kode berikut css-parallax/ .wrapper { height 100vh; overflow-x hidden; overflow-y auto; perspective 2px; } Kelas .wrapper mengatur properti perspective dan scroll untuk keseluruhan halaman. Tinggi pelipat perlu diatur ke nilai tetap agar efek dapat berfungsi. Anda dapat menggunakan unit vh viewport yang telah diatur ke 100 untuk mendapatkan ketinggian penuh viewport layar. Bila Anda mengatur skala gambar, bilah gulir horizontal akan ditambahkan ke layar, sehingga Anda dapat menonaktifkannya dengan menambahkan overflow-x hidden;. Properti perspective mensimulasikan jarak dari viewport ke elemen semu yang akan Anda buat dan transformasikan lebih jauh di CSS. Di langkah selanjutnya, Anda akan menambahkan CSS lainnya untuk menata gaya halaman web. Langkah 4 — Menambahkan Gaya untuk Kelas .section Dalam langkah ini, Anda akan menambahkan gaya ke kelas .section. Di dalam berkas tambahkan kode berikut di bawah kelas wrapper css-parallax/ .wrapper { height 100vh; overflow-x hidden; perspective 2px; } .section { position relative; height 100vh; display flex; align-items center; justify-content center; color white; text-shadow 0 0 5px 000; } Kelas .section mendefinisikan properti ukuran, tampilan, dan teks untuk bagian utama. Atur posisi relative agar anak, .parallaxafter dapat sepenuhnya diposisikan secara relatif ke elemen induk .section. Setiap bagian memiliki view-heightvh sebesar 100 untuk mengambil ketinggian penuh viewport. Nilai ini dapat diubah dan diatur ke ketinggian apa pun yang Anda sukai untuk setiap bagian. Terakhir, properti CSS selebihnya digunakan untuk memformat dan menambahkan penataan gaya pada teks di dalam setiap bagian. Properti ini memosisikan teks di tengah setiap bagian dan menambahkan warna white putih. Selanjutnya, Anda akan menambahkan elemen semu dan menata gayanya untuk membuat efek parallax pada dua bagian di HTML. Langkah 5 — Menambahkan Gaya untuk Kelas .parallax Dalam langkah ini, Anda akan menambahkan gaya ke kelas .parallax. Pertama, Anda akan menambahkan elemen semu di kelas .parallax yang akan diberi gaya. Catatan Anda dapat mengunjungi dokumentasi web MDN untuk mempelajari lebih lanjut tentang elemen semu CSS. Tambahkan kode berikut di bawah kelas .section css-parallax/ ... .section { position relative; height 100vh; display flex; align-items center; justify-content center; color white; text-shadow 0 0 5px 000; } .parallaxafter { content " "; position absolute; top 0; right 0; bottom 0; left 0; transform translateZ-1px scale background-size 100%; z-index -1; } ... Kelas .parallax menambahkan elemen semu after ke gambar latar belakang dan menyediakan transformasi yang diperlukan untuk efek parallax. Elemen semu adalah anak terakhir dari elemen dengan kelas .parallax. Paruh pertama dari kode menampilkan dan memosisikan elemen semu. Properti transform menjauhkan elemen semu dari kamera di z-index, lalu menskalakannya kembali untuk mengisi viewport. Karena elemen semu menjauh, seakan-akan bergerak lebih lambat. Di langkah selanjutnya, Anda akan menambahkan gambar latar belakang dan gaya latar belakang statis. Langkah 6 — Menambahkan Gambar dan Latar Belakang untuk Setiap Bagian Dalam langkah ini, Anda akan menambahkan properti CSS terakhir untuk menambahkan gambar latar belakang dan warna latar belakang bagian statis. Pertama, tambahkan warna latar belakang pekat ke bagian .static dengan kode berikut setelah kelas .parallaxafter css-parallax/ ... .parallaxafter { content " "; position absolute; top 0; right 0; bottom 0; left 0; transform translateZ-1px scale background-size 100%; z-index -1; } .static { background red; } ... Kelas .static menambahkan latar belakang ke bagian statis yang tidak memiliki gambar. Kedua bagian dengan kelas .parallax juga memiliki kelas ekstra yang masing-masing berbeda. Gunakan kelas .bg1 dan kelas .bg2 untuk menambahkan gambar latar belakang Kitten. Tambahkan kode berikut ke kelas .static css-parallax/ ... .static { background red; } .bg1after { background-image url' } .bg2after { background-image url' } ... Kelas .bg1, .bg2 menambahkan masing-masing gambar latar belakang untuk setiap bagian. Gambar dari situs web placekitten. Ini adalah layanan untuk mendapatkan gambar anak kucing untuk digunakan sebagai penampung. Karena semua kode untuk efek gulir parallax telah ditambahkan, Anda dapat menautkan ke berkas di Langkah 7 — Menautkan dan Membuka di Peramban Dalam langkah ini, Anda akan menautkan berkas dan membuka proyek di peramban untuk melihat efek gulir parallax. Pertama, tambahkan kode berikut ke tag di berkas [label css-parallax/ ... CSS Parallax ... Sekarang, Anda dapat membuka berkas di peramban Dengan demikian, Anda telah menyiapkan halaman web yang berfungsi dengan efek gulir. Lihatlah repositori GitHub ini untuk mengetahui kode selengkapnya. Kesimpulan Dalam artikel ini, Anda menyiapkan proyek dengan berkas dan serta sekarang memiliki halaman web yang fungsional. Anda telah menambahkan struktur halaman web dan membuat gaya untuk berbagai bagian di situs. Anda bisa saja menempatkan gambar yang digunakan atau membuat efek parallax menjauh sehingga gerakannya menjadi lebih lambat. Anda harus mengubah jumlah piksel pada properti perspective dan transform. Jika Anda tidak ingin gambar latar belakang bergulir sama sekali, gunakan background-attachment fixed; sebagai ganti perspective/translate/scale. Artikel unik kali ini adalah tentang cara membuat gambar background bergerak menjadi dinamis Scrolling Background pada halaman blog atau di dalam elemen HTML menggunakan kode Javascript sederhana. Artikel ini merupakan artikel lama yang ada pada blog lama admin kemudian artikel tersebut admin perbarui kembali dengan beberapa tweaking penyesuaian pada kode script agar terlihat uptodate dan lebih menarik. Scrolling Background ini membuat gambar background blog bergerak secara vertikal ataupun horizontal dengan beberapa pengaturan awal untuk mempermudah pemasangan dan modifikasi. Konsep awal pembuatan dan penggunaan Scrolling Background adalah untuk membuat gambar latar belakang dari suatu elemen HTML bisa terlihat dinamis tanpa mempengaruhi performa bandwidth dan rendering. Jadi agar bisa membuat gambar latar terlihat dinamis digunakan konsep Scrolling Background menggunakan script sederhana tanpa mengurangi performa tampilan halaman web / blog. Contoh Scrolling Background seperti yang terlihat pada elemen HTML di bawah ini, apabila tidak terlihat silakan sobat refresh browsernya. Buat sobat blogger yang ingin mencobanya silakan disimak tutorial membuat scrolling background ini. Informasi Singkat jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT. Sintaks pada jQuery didesain untuk memudahkan dalam navigasi sebuah dokumen, pemilihan elemen DOM, pembuatan animasi, penanganan event, dan pengembangan aplikasi berbasis Ajax. jQuery juga menyediakan kemampuan bagi para pengembang untuk dapat membuat plug-in pada pustaka JavaScript ini. Ini memungkinan mereka untuk membuat abstraksi pada interaksi dan animasi tingkat-rendah, efek lanjutan, serta tampilan widget yang dapat dimodifikasi. Pendekatan modular pada jQuery memungkinkan kita dalam pembuatan halaman Web yang dinamis dan aplikasi berbasis Web yang ajib. Sekumpulan fitur inti jQuery—yakni pemilihan elemen DOM, transferal dan manipulasi—dimungkinkan berkat adanya selector engine yang bernama Sizzle sejak versi yang membuat sebuah "gaya pemrograman baru", memadukan antara algoritme dan data struktur DOM. Gaya ini dipengaruhi oleh arsitektur JavaScript lainnya seperti YUI v3 dan Dojo, yang nantinya menstimulasi pembuatan standar Selector API. Microsoft dan Nokia membundle jQuery pada platfoem mereka. Microsoft mengikut sertakannya dengan Visual Studio di dalam pembuatan AJAX dan framework MVC miliknya. Sementara itu, Nokia meng-integrasikannya di dalam platform pengembangan widget Web Run-Time. jQuery juga telah digunakan di MediaWiki sejak versi Sumber Wikipedia DAFTAR ISI Cara Pemasangan Pada Template Blogger Contoh Gambar Tile Background 1 Cara Pemasangan Pada Template Blogger PERINGATAN Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah. Silakan login dahulu ke blog Anda. Klik tombol Tema untuk masuk ke tema editor. Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog. Geser scrollbar ke posisi paling bawah. Letakan kode dibawah ini tepat diatas kode . // KETERANGAN var bgScrollElementID = "body"; Merupakan variabel untuk target lokasi elemen, pada contoh di atas letak background akan di posisikan pada elemen body. Apabila ingin diposisikan pada elemen tertentu maka variabel tersebut bisa diisi dengan nama elemen ID dari target elemen. Contoh penulisan apabila diposisikan pada elemen tertentu, misal elemen dengan ID cthBGElm maka pada variabel ini dituliskan sebagai berikut. var bgScrollElementID = "cthBGElm"; Dikarenakan menggunakan elemen ID maka sebelum nama elemen ditambahkan karakte hashtag , jika menggunakan nama elemen class maka sebelum nama elemen ditambahkan karakter dot ., sedangkan apabila merujuk pada elemen HTML maka penulisan langsung menggunakan nama elemen tanpa penambahan karakter. var bgScrollDirection = "up"; Merupakan variabel arah gerakan animasi background. Apabila ingin merubah arah gerakan ke atas ganti tinggal merubah varabel "left" dengan "up". Adapun kode variabel arah gerakan ada empat macam, yaitu left => Gerakan dari kanan ke kiri, right => Gerakan dari kiri ke kanan, up => Gerakan dari bawah ke atas, down => Gerakan dari atas ke bawah. var bgScrollImage = " Merupakan variabel untuk URL gambar yang digunakan sebagai Background Image. var bgScrollColor = "black"; Merupakan variabel untuk mengatur warna latar. var bgScrollSpeed = 70; Merupakan variabel untuk mengatur kecepatan gerakan animasi, semakin angkanya kecil maka gerakan animasi semakin cepat. Kode javascript diatas menggunakan library JQuery, pastikan pada website / blog sudah terpasang JQuery. Script di atas bisa ditaruh di dalam kode template blog, di dalam kotak widget atau di dalam postingan artikel. Jika ingin ditaruh pada kotak widget silakan tekan tombol Add to Blogger untuk mempermudah pemasangan kode script tersebut. 2 Contoh Gambar Tile Background Gambar tile merupakan gambar dengan menggunakan pola tertentu yang dapat diduplikasi berulang sehingga membentuk pola yang seakan-akan menyatu menjadi satu pola gambar yang utuh. Penggunaan tile dalam sebagai background image akan mereduksi ukuran file gambar yang digunakan sebagai background image, sehingga tidak banyak memakan bandwidth jika dibandingkan menggunakan gambar utuh dalam ukuran besar. Penggunaan efek Scrolling Background ini memang disarankan untuk menggunakan gambar tile berukuran kecil dan gambar memiliki pola yang berkesinambungan sehingga apabila background image di repeat duplikasi maka gambar tersebut akan terlihat menyatu menjadi satu bagian utuh. Berikut beberapa contoh gambar tile yang bisa anda gunakan pada efek Scrolling Background. Cara menggunakan gambar tile tersebut adalah dengan mengganti isi variabel var bgScrollImage dengan URL gambar tile yang ingin digunakan. Selain gambar di atas anda dapat menggunakan gambar tile sesuai pilihan anda. Gambar tile menggunakan format standar HTML. Pastikan URL gambar menggunakan protokol https agar tidak diblokir oleh browser modern. Keyword Background, Image, CSS, Code, Script, JavaScript, JQuery, HTML, CSS3, HTML5, Moving, Up, Down, Left, Right, Gambar, Latar, Animated, Animation, Animasi, Bergerak, Atas, Bawah, Kiri, Kanan, Cara, Membuat, Memasang, Halaman, Website, Blog, Blogger, Blogspot Incoming Search Term Cara Memasang Script Background Bergerak, Kode Membuat Animasi Background, Background Image Animated Using JQuery, How to make moving HTML background, Script Animasi Gambar Latar Bergerak Ke atas bawah kiri kanan, Javascript Gambar Background Bergerak, Gambar Background Bergerak, Gambar Latar Bergerak, Animasi Gambar Latar, Kode Animasi Membuat Gambar Bergerak keyframes animate-earth { from { background-position 120% 70px, 10px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } -webkit-keyframes animate-earth { from { background-position 120% 70px, 0px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } -moz-keyframes animate-earth { from { background-position 120% 70px, 0px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } -ms-keyframes animate-earth { from { background-position 120% 70px, 0px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } -webkit-keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } -moz-keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } -ms-keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } keyframes move-mists-back { from {background-position0 0;} to {background-position-10000px 1000px;} } -webkit-keyframes move-mists-back { from {background-position0 0;} to {background-position-10000px 1000px;} } -moz-keyframes move-mists-back { from {background-position0 0;} to {background-position-10000px 1000px;} } -ms-keyframes move-mists-back { from {background-position 0 0;} to {background-position-10000px 1000px;} } .stars, .twinks, .mists, .earth { positionabsolute; top0; left0; right0; bottom0; width100%; height100%; displayblock; } .stars { background000 urlimages/ repeat top center; } .rocket { -ms-transform rotate90deg; -webkit-transform rotate90deg; transform rotate90deg; margin 200px 0px 0px 45%; } .twinks{ backgroundtransparent urlimages/ repeat top center; -moz-animationmove-twink-back 200s linear infinite; -ms-animationmove-twink-back 200s linear infinite; -o-animationmove-twink-back 200s linear infinite; -webkit-animationmove-twink-back 200s linear infinite; animationmove-twink-back 200s linear infinite; } .earth { margin 0px auto; background-image urlimages/ background-position 120% 70px, 0px 0px, 0px 0px; background-repeat no-repeat, repeat-x, repeat-x; animation animate-earth linear 50s infinite; -moz-animation animate-earth linear 50s infinite; -ms-animation animate-earth linear 50s infinite; -o-animation animate-earth linear 50s infinite; -webkit-animation animate-earth linear 50s infinite; } .mists{ backgroundtransparent urlimages/ repeat top center; -moz-animationmove-mists-back 200s linear infinite; -ms-animationmove-mists-back 200s linear infinite; -o-animationmove-mists-back 200s linear infinite; -webkit-animationmove-mists-back 200s linear infinite; animationmove-mists-back 200s linear infinite; } Dalam perancangan desain sebuah website, background latar belakang adalah bagian penting yang membangun sebuah website. Background memberikan efek dan dekorasi visual terhadap sebuah elemen dengan begitu akan menimbulkan makna tertentu terkait dengan konten dari elemen tersebut. Penggunaan background juga penting dalam menentukan konsep dari sebuah website. Ada beberapa properti CSS yang berhubungan dengan pengaturan background, yaitu 1. Background Color Background Color digunakan untuk memberikan latar belakang berupa warna terhadap suatu elemen. Penambahan latar belakang warna juga dapat menggunakan properti background selain dari penggunaan properti background-color. Berikut adalah contoh penggunaan properti background-color background { backgroundred; background-color red; } Pengisian jenis warna di properti background ataupun background-color dapat juga menggunakan kode heksa seperti FFF, RGBA seperti rgb255, 0, 0, RGBA seperti rgba255,0,0,1, HSL seperti hsl0, 50, 100 atau HSLA seperti hsla0,50,100,1. 2. Background Image Dengan menggunakan properti background image ataupun property background, kita dapat meletakkan gambar sebagai latar belakang sebuah elemen,sebagai contoh body { background-image url" } Tetapi secara default-nya, jika ukuran gambar lebih kecil dari ukuran elemennya maka akan terjadi perulangan gambar baik secara vertikal atau horizontal tergantung ukuran elemennya, sebagai contoh di mana ukuran image hanya 260 x 300px Hasil dari eksekusi kode diatas adalah Kita juga dapat mengatur perulangan dari gambar tersebut dengan menggunakan properti background-repeat yang berisi repeat, no-repeat, repeat-x dan repeat-y. Dimana repeat-x memberikan perulangan hanya pada sumbu x horizontal, repeat-y memberikan perulangan hanya pada sumbu y vertikal dan no-repeat menghilangkan perulangan. Sebagai contohnya dari properti repeat-x adalah body { background-image url" background repeat repeat-x; } Hasil dari eksekusi kodediatas adalah 3. Background Postion Dengan menggunakan properti background position maka kita dapat mengatur posisi dari background tersebut. Properti background position dapat diberi nilai dengan pixel ataupun persentase yang mengatur koordinat di sumbu-x dan sumbu-y. Berikut contoh penggunaan background-position body { background-image url" background-repeat no-repeat; background-position 100px 50px; } Hasil dari eksekusi kode diatas adalah 4. Background-Shorthand properti Untuk menulis seluruh gabungan dari properti CSS yang berhubungan dengan background, menggunakan sintaks yaitu background color image position repeat; Sebagai contoh dari penggunaan sintaks di atas, yaitu body { background FFF url" no-repeat100px 50px; } uli IKUTI TRIAL KURSUS ONLINE NAMA PESERTA TEST & PENERIMA BEASISWA 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. 🙌

cara membuat background website bergerak