7 HTML Efek Keren Itu Siapa pun Bisa Tambahkan di Website mereka

HTML-Efek  
Website Terampil dirancang dengan efek yang layak dan menyoroti hati-hati dipilih tidak hanya bagus untuk melihat, mereka juga fungsional dan meningkatkan pengalaman pengguna.
Sayangnya, tidak semua orang memiliki karunia, waktu atau kebebasan finansial untuk membuat sebuah website yang luar biasa dan canggih lengkap dengan CSS dan yang lainnya. Beberapa dari kita hanya akan harus hidup dengan halaman HTML sederhana untuk sedikit lebih lama.
Sementara itu, Anda mungkin masih ingin mengambil keuntungan dari sederhana, efek dingin dan tag HTML untuk membuat informasi menonjol dengan gaya.
Mungkin salah satunya adalah apa yang telah anda cari.

1. Tableizer!

Jika Anda memiliki Excel yang ada, Calc atau template spreadsheet lain, Tableizer! akan mengubah data Anda ke dalam sebuah tabel HTML dalam sekejap. Kode HTML yang dihasilkan dapat dengan mudah ditambahkan ke website Anda. Tentu saja, ini tidak benar-benar efek HTML, tapi cukup berguna.
Input:
keren html efek
Output:
keren html efek
Dengan sedikit kesabaran dan pengeditan latar belakang-warna yang Anda dapat membuatnya terlihat lebih dingin banyak, misalnya dengan mewarnai "indeks" paling kiri kolom biru juga.

2. Kotak Teks digulir

Ini adalah efek, membantu HTML dingin jika anda ingin pak potongan panjang teks ke dalam format kompak, sehingga tidak memakan seluruh ruang pada halaman.
Input:
<Div style = "width: 25%; height: 50px; overflow: auto; scrollbar-face-color: # CE7E00; scrollbar-shadow-color: # FFFFFF; br / scrollbar-highlight-color: # 6F4709; scrollbar-3dlight -color: # 11111; scrollbar-darkshadow-color: # 6F4709; br / scrollbar-track-color: # FFE8C1; scrollbar-arrow-color: # 6F4709 "> Teks Anda pergi di sini. Dan dapat gulir ke bawah. Anda hanya perlu menambahkan jumlah yang cukup teks untuk membuat scrollbar menunjukkan. Itu saja! :) </ Div>
Output:
Teks Anda pergi di sini. Dan dapat gulir ke bawah. Anda hanya perlu menambahkan jumlah yang cukup teks untuk membuat scrollbar menunjukkan. Itu saja! :)
Anda dapat bermain dengan warna dan ukuran kotak teks.

3. Sorot Teks

Dengan tag HTML sederhana <span> Anda dapat menambahkan satu ton efek ke teks atau gambar. Perhatikan bahwa sebagian mungkin hanya bekerja di IE dan bahwa aku hanya menyebutkan bahwa yang bekerja dengan baik IE dan Firefox.
Input:
<span style= "background-color: teks #FFFF00"> Anda di sini. </ span>
Output:
Teks Anda di sini.

4. Tambahkan Gambar Latar Belakang Teks

Demikian juga, Anda dapat mengubah warna teks atau menambahkan gambar latar belakang. Yang satu ini hanya menjadi benar-benar menarik jika teks Anda memiliki ukuran yang cukup besar, itulah sebabnya saya juga meningkatkan ukuran font.
Input:
<SPAN STYLE = "background-image: url ( http://www.makeuseof.com/wp-content/uploads/2009/08/HTMLEffects03.png~~V ); Font-size: 20pt "> MakeUseOf hadiah ... </ SPAN>
Output:
MakeUseOf menyajikan ...

5. Tambahkan Tip Judul Alat

Sebuah tool tip judul muncul bila Anda menggulir dengan mouse pada sehelai teks "dimanipulasi" atau gambar. Kau tahu ini dari gambar atau teks yang terhubung. Berikut adalah bagaimana Anda dapat menambahkan satu ini ke teks biasa.
Input:
<SPAN TITLE = "Lihat, ini adalah tool tip. :) "> Gerakkan mouse ke aku! </ SPAN>
Output:
Gerakkan mouse ke saya!

6. Mengubah Latar Belakang / Warna Teks

Memilih warna yang semua orang senang adalah bisnis yang sulit. Singkatnya, tidak mungkin. Entah Anda akan melanggar selera pribadi seseorang atau Anda akan mendiskriminasi orang buta warna. Jika Anda ingin menjadi super benar, membiarkan pengunjung Anda mengubah latar belakang dan warna teks pada situs web Anda sendiri.
Input:
<select name="clr" onchange="document.bgColor=this.options[this.selectedIndex].value" size="1"> <br> <option value="black"> hitam <nilai opsi = "oranye" > jeruk <option value="flamingred"> fuschia <option value="lightyellow"> <option kuning muda value="green"> hijau <option value="cyan"> cyan <option value="yellow"> kuning <opsi value = "merah"> merah <option value="white"> putih </ option> </ select> Warna Latar Belakang
<br> <select name="clr" onchange="document.fgColor=this.options[this.selectedIndex].value" size="1"> <br> <option value="black"> hitam <option value = "oranye"> jeruk <option value="flamingred"> fuschia <option value="lightyellow"> <option lampu kuning value="cyan"> cyan <option value="yellow"> value="red"> <option kuning merah <option value="white"> putih </ option> </ select> Warna Teks
Output:
Demonstrasi ini akan benar-benar tidak bekerja di sini, itulah sebabnya mengapa saya telah membuat contoh kerja itu di halaman ini .

7. Tambahkan Switchmenu sebuah

Efek HTML yang paling menarik adalah efek HTML dinamis. Namun, mereka sering berdasarkan naskah. Berikut adalah salah satu efek untuk menu, bahwa Aku datang untuk dipuja. Ini sedikit lebih rumit daripada Anda avarage tag HTML karena bekerja dengan sebuah style sheet dan skrip. Keuntungannya adalah bahwa Anda tidak harus meng-upload file CSS atau script untuk membuatnya bekerja, Anda dapat menanam semua informasi yang diperlukan ke bagian <head> website Anda.
Input:
Tambahkan kode berikut ke dalam bagian <head> halaman Anda:
<style type="text/css">
. Menutitle {
kursor: 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;
}
</ Style>
<script type="text/javascript">
/ ***********************************************
* Ubah menu script-oleh B Beladiri http://getElementById.com/
* Diubah oleh Dynamic Drive untuk format & NS4/IE4 kompatibilitas
* Kunjungi http://www.dynamicdrive.com/ untuk kode sumber lengkap
*********************************************** /
var persistmenu = "yes" / / "ya" atau "tidak". Pastikan setiap konten SPAN berisi ID incrementing mulai dari 1 (id = "Sub1", id = "sub2", dll)
var persisttype = "seluruh situs" / / masukkan "seluruh situs" untuk menu untuk bertahan di situs, "lokal" untuk halaman ini hanya
if (document.getElementById) {perubahan / / DynamicDrive.com
document.write ('<style type="text/css"> n')
document.write ('submenu. {display: none;} n')
document.write ('</ style> n')
}
fungsi SwitchMenu (obj) {
if (document.getElementById) {
var el = document.getElementById (obj);
var ar = document.getElementById ("masterdiv") Buka menu ("span");. perubahan / / DynamicDrive.com
if (el.style.display = "blok"!) perubahan {/ / DynamicDrive.com
for (var i = 0; i <ar.length; i + +) {
if (ar [i]. className == "submenu") / perubahan / DynamicDrive.com
ar [i] style.display = "none".;
}
el.style.display = "blok";
} Else {
el.style.display = "none";
}
}
}
fungsi get_cookie (Nama) {
var search = Nama + "="
var returnvalue = "";
if (document.cookie.length> 0) {
offset = document.cookie.indexOf (pencarian)
if (offset = -1) {
offset + = search.length
akhir = document.cookie.indexOf (";", Offset);
if (berakhir == -1) end = document.cookie.length;
returnvalue = unescape (document.cookie.substring (offset, akhir))
}
}
kembali returnvalue;
}
fungsi onloadfunction () {
if (persistmenu == "ya") {
var cookiename = (persisttype == "seluruh situs")? "Switchmenu": window.location.pathname
var cookievalue = get_cookie (cookiename)
if (cookievalue! = "")
document.getElementById (cookievalue). style.display = "blok"
}
}
fungsi savemenustate () {
var inc = 1, blockID = ""
sementara (document.getElementById ("sub" + inc)) {
if (document.getElementById ("sub" + inc). style.display == "block") {
blockID = "sub" + inc
istirahat
}
inc + +
}
var cookiename = (persisttype == "seluruh situs")? "Switchmenu": window.location.pathname
var cookievalue = (persisttype == "seluruh situs")? 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 = onloadfunction
if (persistmenu == "ya" && document.getElementById)
window.onunload = savemenustate
</ Script>
Dan kode ini berjalan di manapun Anda ingin menu dinamis untuk muncul.
<- Jauhkan semua menu dalam masterdiv->
<div id="masterdiv"> <div onclick="SwitchMenu('sub1')"> Topik </ div>
<span id="sub1">
- Browser href="http://www.makeuseof.com/service/browser"> <a / Addons </ a> <br>
- <a Href="http://www.makeuseof.com/service/web_based"> Web Apps </ a> <br>
- <a Href="http://www.makeuseof.com/service/how-to"> Bagaimana-Untuk Tips </ a> <br>
- <a Href="http://www.makeuseof.com/service/applications"> Software Keren </ a> <br>
... Dan lagi!
</ Span>
<div onclick="SwitchMenu('sub2')"> Penulis Staf </ div>
<span id="sub2">
- <a Href="http://www.makeuseof.com/tag/author/karl-l-gechlik/"> Karl Gechlik </ a> <br>
- <a Href="http://www.makeuseof.com/tag/author/tinsie/"> Tina </ a> <br>
- <a Href="http://www.makeuseof.com/tag/author/varunkashyap/"> Varun Kashyap </ a> <br>
... Dan lagi!
</ Span>
<div onclick="SwitchMenu('sub3')"> Miscellaneous </ div>
<span id="sub3">
- <a Href="http://www.makeuseof.com/about/"> Tentang </ a> <br>
- <a Href="http://www.makeuseof.com/contact"> Kontak </ a> <br>
- <a Href="http://www.makeuseof.com/archives-2"> Arsip </ a> <br>
- <a Href="http://www.makeuseof.com/disclaimer"> Sangkalan </ a> <br>
</ Span>
</ Div>
Output:
Sekali lagi, menu ini tidak dapat ditunjukkan di sini, maka saya telah membuatnya tersedia untuk dilihat di halaman demonstrasi . Dan di sini adalah sumber asli untuk efek HTML dinamis.
Untuk tag <span> lebih lanjut, kunjungi HTML Goodies . Jika Anda mulai tertarik dalam HTML dinamis, memeriksa Dynamic Drive untuk ton script luar biasa. Dan akhirnya, jangan lupa, bahwa website Anda adalah terbaik dinikmati ketika beban cepat. Dengan hal ini, Anda dapat menemukan artikel Guy pada 5 Tips HTML untuk Membuat Website Cepat Memuat sangat informatif.
Apa efeknya favorit HTML Anda pada Anda atau website lain? Silahkan berbagi dengan kami!
by http://www.makeuseof.com/tag/7-cool-html-effects-that-anyone-can-add-to-their-website-nb/

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel ini dipublish oleh Unknown pada hari Senin, 25 Juni 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan
 

0 komentar:

Posting Komentar