Home-theater-designers
Anda ingin situs web Anda terlihat luar biasa --- tetapi keterampilan pengembangan web Anda kurang.
Jangan putus asa! Anda tidak perlu tahu CSS atau PHP untuk membangun situs mewah dengan efek keren. Beberapa tag HTML sederhana dan mengetahui cara menyalin dan menempel akan berhasil.
Untuk memulai dengan beberapa efek HTML yang keren, kami telah menyusun template kode efek HTML gratis ini. Mereka akan meningkatkan fungsionalitas dan pengalaman pengguna situs Anda, tanpa merusak bank. Meskipun sebagian besar berupa HTML, kode keren ini mungkin juga berisi beberapa CSS dan PHP.
1. Efek Paralaks Keren Dengan HTML
Anda mungkin pernah melihat Efek Paralaks yang digunakan di situs web dengan iklan online. Saat Anda menggulir artikel ke bawah, tombol gambar latar belakang muncul untuk menggulir pada kecepatan yang berbeda, atau iklan muncul.
Atau, mungkin gambar latar belakang berubah saat Anda mengunjungi bagian situs yang berbeda. Ini adalah efek keren yang menambahkan kedalaman visual ke konten dan ideal bahkan jika Anda tidak melakukannya memahami kode HTML dasar .
Anda dapat bermain dengan efek dan menyalin kode untuk a efek gulir Parallax sederhana dari W3Schools .
Dalam versi tercanggihnya, efek ini merupakan kombinasi dari HTML, CSS, dan JS.
Silakan dan ambil kode untuk yang di atas Efek Paralaks Header/Footer dari CodePen .
2. Kode Kotak Komentar HTML yang Dapat Digulir
Ini adalah elemen HTML sederhana namun bermanfaat yang memungkinkan Anda mengemas potongan teks yang panjang ke dalam format yang ringkas. Dengan cara ini tidak memakan seluruh ruang pada halaman.
Anda dapat bermain dengan warna dan ukuran kotak teks agar sesuai dengan kebutuhan Anda.
Memasukkan:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) Jika Anda menginginkan sesuatu yang sedikit lebih menarik, Anda juga dapat mengambil kode untuk kotak komentar yang dapat disesuaikan dari Quackit .
Mereka menawarkan beberapa template, tetapi Anda juga dapat menggunakan editor mereka untuk secara manual mengubah dan menguji (menjalankan) kode kustom Anda.
3. Trik HTML Keren: Teks yang Disorot
Dengan sederhanaTag HTML Anda dapat menambahkan banyak efek keren ke teks atau gambar Anda. Perhatikan bahwa tidak semuanya berfungsi di seluruh browser. Yang disebutkan di sini berfungsi di Google Chrome, Microsoft Edge, dan Mozilla Firefox.
Efek teks HTML ini menyoroti teks antaratag.
Memasukkan:
Your highlighted text here.Demo keluaran:
4. Tambahkan Gambar Latar Belakang ke Teks
Demikian juga, Anda dapat mengubah warna teks atau menambahkan gambar latar belakang. Yang ini terlihat bagus jika ukuran font teks lebih besar.
Memasukkan:
MakeUseOf presents...Efek yang sama dicapai dengan menambahkan elemen gaya dan font ke teks dalam a menandai.
bagaimana saya tahu jika ponsel saya diretas?
Demo keluaran:
5. Trik HTML Berguna untuk Menambahkan Judul Tooltip
Tooltip judul muncul saat Anda menggulir dengan mouse di atas sepotong teks atau gambar yang 'dimanipulasi'. Anda akan melihat ini digunakan di situs web pada gambar, teks tertaut, atau bahkan item menu di aplikasi desktop. Gunakan kode HTML ini untuk menambahkan tooltip ke teks biasa di halaman web Anda.
Memasukkan:
Move your mouse over me!Demo keluaran:
6. Trik HTML Paling Keren: Teks Bergulir atau Jatuh
Saat Anda mencari 'marquee html' di Google, Anda akan menemukan sedikit Easter Egg. Lihat hitungan hasil pencarian bergulir di atas? Itu adalah efek yang dibuat oleh tag tenda yang sekarang sudah usang. Meskipun efek teks HTML yang dulu keren ini sudah tidak digunakan lagi, sebagian besar browser masih mendukungnya.
Memasukkan:
I wanna scroll with it, baby!Demo keluaran:
Kamu bisa tambahkan atribut lebih lanjut untuk mengontrol perilaku pengguliran, warna latar belakang, arah, tinggi, dan lainnya. Berhati-hatilah, namun; efek ini bisa menjadi sangat menjengkelkan jika digunakan secara berlebihan.
Untuk efek teks jatuh yang keren, pergi ke Quackit lagi dan salin kode tenda mereka yang sangat disesuaikan.
7. Buat Switchmenu Keren Dengan HTML
Trik HTML paling keren adalah efek HTML dinamis. Namun, mereka sering berbasis skrip. Berikut adalah salah satu efek untuk menu yang Anda setujui terlihat sangat apik.
Ini sedikit lebih rumit daripada tag HTML rata-rata Anda karena berfungsi dengan lembar gaya dan skrip. Keuntungannya adalah Anda tidak perlu mengunggah file CSS atau skrip untuk membuatnya berfungsi. Sebagai gantinya, cukup tempel kode berikut ke bagian situs web Anda.
Memasukkan:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
Demo keluaran:
Sayangnya, kami tidak dapat menunjukkan efek ini di sini. Tapi sumber aslinya Drive Dinamis , menampilkan copy pekerjaan dari efek HTML dinamis ini.
8. Dapatkan Spreadsheet HTML Dengan Tableizer
Jika Anda ingin menampilkan spreadsheet di situs Anda, biarkan Tableizer! mengubah data Anda menjadi tabel HTML. Cukup tempelkan data mentah dari Excel, Google Doc, atau spreadsheet lainnya ke alat konverter di tableizer.journalistopia.com . Sesuaikan pilihan meja , lalu klik Tabelkan Itu untuk menerima keluaran HTML.
Ini mungkin salah satu kode HTML paling keren untuk situs web Anda, seperti Tableize It! melakukan semua kerja keras.
Klik Salin HTML ke Papan Klip untuk menyalin kode HTML dan menambahkannya ke situs web Anda. Pertimbangkan untuk mengedit warna latar belakang agar terlihat jauh lebih keren.
cara membuat wiki sendiri
Meskipun ini sebenarnya bukan efek HTML, ini cukup berguna.
Lebih Banyak Kode dan Efek HTML Keren untuk Situs Anda
Kekuatan HTML, CSS, dan JavaScript menawarkan opsi yang berpotensi tidak terbatas untuk efek menakjubkan di situs web Anda. Ingin lebih?
- Pernak-Pernik HTML memberimu hebatide tag.
- Drive Dinamis memiliki banyak skrip HTML dinamis yang luar biasa.
- dukun menawarkan kode HTML yang keren.
Kami telah menunjukkan kepada Anda delapan kode HTML keren yang dapat Anda salin untuk menyempurnakan situs web Anda. Meskipun berbeda, semuanya mudah diterapkan selama Anda mengetahui teknik pengkodean HTML dasar.
Membagikan Membagikan Menciak Surel 17 Contoh Kode HTML Sederhana yang Dapat Anda Pelajari dalam 10 MenitIngin membuat halaman web dasar? Pelajari contoh HTML ini dan coba di editor teks untuk melihat tampilannya di browser Anda.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- HTML
- Pengembangan web
- Alat Webmaster
Wakil Editor untuk Keamanan, Linux, DIY, Pemrograman, dan Penjelasan Teknologi, dan produser Podcast yang Sangat Berguna, dengan pengalaman luas dalam dukungan desktop dan perangkat lunak. Seorang kontributor untuk majalah Format Linux, Christian adalah seorang pengotak Raspberry Pi, pecinta Lego dan penggemar game retro.
More From Christian CawleyBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan