Web Sitenize Ekleyebileceğiniz 8 Harika HTML Efekti

[Replicant]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

​

Web sitenizin harika görünmesini istiyorsunuz ancak web geliştirme becerileriniz eksik mi?

Umutsuzluğa kapılmayın! Harika efektlerle süslü bir site oluşturmak için CSS veya PHP bilmenize gerek yok. Bazı basit HTML etiketleri ve nasıl kopyalayıp yapıştırılacağını bilmek yeterli olacaktır.

Bazı harika HTML efektleriyle başlamanız için, bu ücretsiz HTML efekt kodu şablonlarını derledik.
Sitenizin işlevselliğini ve kullanıcı deneyimini geliştireceklerdir. Çoğunlukla HTML olsalar da, bu harika kodlar ayrıca CSS ve PHP içerebilir.

1. HTML ile Harika Paralaks Etkisi​

Muhtemelen çevrimiçi reklamların bulunduğu web sitelerinde kullanılan Paralaks Etkisini görmüşsünüzdür. Bir makaleyi aşağı kaydırdığınızda, arka plan görüntüsü farklı bir hızda kayıyormuş gibi görünür veya bir reklam görünür.

Alternatif olarak, sitenin farklı bölümlerini ziyaret ettiğinizde arka plan resmi de değişebilir. Temel HTML kodunu anlamasanız bile içeriğe görsel derinlik katan harika bir efekttir.

Efektle oynayabilir ve W3Schools'tan basit bir Paralaks kaydırma efekti için kodu kopyalayabilirsiniz.

En gelişmiş sürümünde, bu efekt HTML, CSS ve JS'nin bir kombinasyonudur.

Devam edin ve CodePen'den yukarıdaki Üstbilgi / Altbilgi Paralaks efekti için kodları alın .

2. Kaydırılabilir HTML Yorum Kutusu Kodu​

Bu, uzun metin parçacıklarını kompakt bir biçimde paketlemenizi sağlayan basit ama yararlı bir HTML öğesidir. Bu şekilde sayfadaki tüm alanı kaplamaz.

İhtiyaçlarınıza uyması için metin kutusunun renkleri ve boyutuyla oynayabilirsiniz.

Giriş:

<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;">
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! :)</div>

Biraz daha meraklı bir şey istiyorsanız, Quackit'ten özelleştirilebilir bir yorum kutusu için kod da getirebilirsiniz.

​

Birkaç şablon sunarlar, ancak özel kodunuzu manuel olarak değiştirmek ve test etmek (çalıştırmak) için düzenleyicilerini de kullanabilirsiniz.

3. Harika Bir HTML Hilesi: Vurgulanan Metin​

Basit bir <span> HTML etiketi ile metninize veya resimlerinize bir ton harika efekt ekleyebilirsiniz. Hepsinin tarayıcılarda çalışmadığını unutmayın. Burada bahsedilenler Google Chrome, Microsoft Edge ve Mozilla Firefox'ta çalışır.

Bu HTML metin efekti, <span> etiketleri arasındaki metni vurgular.

Giriş:

<span style="background-color: #FFFF00>Your highlighted text here.</span>

Çıktı demosu:

​

4. Metne Arka Plan Resmi Ekleyin​

Aynı şekilde, metninizin rengini değiştirebilir veya bir arka plan resmi ekleyebilirsiniz. Metnin yazı tipi boyutu daha büyükse bu harika görünüyor.

Giriş:

<span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>

Aynı etki, stil ve yazı tipi öğelerinin bir <strong> etiketindeki metne eklenmesiyle elde edilir.

5. Bir Başlık Araç İpucu Eklemek için Yararlı HTML Hilesi​

Fare ile "değiştirilmiş" bir metin veya resim parçasının üzerinde gezindiğinizde bir başlık ipucu görüntülenir. Bunların web sitelerinde resimlerde, bağlantılı metinlerde ve hatta masaüstü uygulamalarındaki menü öğelerinde kullanıldığını göreceksiniz. Web sayfanızdaki düz metne bir araç ipucu eklemek için bu HTML kodunu kullanın.

Giriş:

<span title="See, this is the tooltip. :)">Move your mouse over me!</span>

Çıktı demosu:

6. Şimdiye Kadarki En Harika HTML Hileleri: Kaydırma veya Düşen Metin​

Google'da "marquee html" araması yaptığınızda, küçük bir Paskalya Yumurtası keşfedeceksiniz. En üstte kayan arama sonucu sayısını görüyor musunuz? Bu, artık kullanılmayan seçim çerçevesi etiketinin oluşturduğu bir efekttir. Bir zamanlar harika olan bu HTML metin efekti kullanımdan kaldırılmış olsa da, çoğu tarayıcı hala bunu desteklemektedir.

Giriş:

<marquee>I wanna scroll with it, baby!</marquee>

Çıktı demosu:

Başka özellikler eklemek kaydırma davranışını kontrol etmek, arka plan rengini, yön, yükseklik ve daha fazlası. Ancak dikkatli olun; aşırı kullanıldığında bu etkiler oldukça rahatsız edici hale gelebilir.

Serin bir düşen metin efekti için tekrar Quackit'e gidin ve son derece özelleştirilmiş seçim çerçevesi kodunu kopyalayın.

7. HTML ile Harika Bir Anahtar Menüsü Oluşturun​

En havalı HTML hileleri dinamik HTML efektleridir. Ancak, genellikle komut dosyası tabanlıdırlar. İşte menüler için çok şık göründüğünü kabul edeceğiniz bir efekt.

Bir stil sayfası ve komut dosyalarıyla çalıştığı için ortalama bir HTML etiketinizden biraz daha karmaşıktır. Bunun avantajı, çalışmasını sağlamak için bir CSS veya komut dosyası yüklemenize gerek olmamasıdır. Bunun yerine, aşağıdaki kodu web sitenizin <head> bölümüne yapıştırmanız yeterlidir.

Giriş:

<style type="text/css">

.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;

}

</style><script type="text/javascript">/***********************************************

* 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('<style type="text/css">n')

document.write('.submenu{display: none;}n')

document.write('</style>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<ar.length; 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</script>

And this code goes wherever you want the dynamic menu to appear.

<!-- Keep all menus within masterdiv-->

<div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>

<span id="sub1">

- <a href="https://www.turkmmo.com/service/browser">Browsers/Addons</a><br>

- <a href="https://www.turkmmo.com/service/web_based">Web Apps</a><br>

- <a href="https://www.turkmmo.com/service/how-to">How-To Tips</a><br>

- <a href="https://www.turkmmo.com/service/applications">Cool Software</a><br>

...and more!

</span><div onclick="SwitchMenu('sub2')">Staff Writers</div>

<span id="sub2">

- <a href="https://www.turkmmo.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>

- <a href="https://www.turkmmo.com/tag/author/tinsie/">Tina</a><br>

- <a href="https://www.turkmmo.com/tag/author/varunkashyap/">Varun Kashyap</a><br>

...and more!

</span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>

<span id="sub3">

- <a href="https://www.turkmmo.com/about/">About</a><br>

- <a href="https://www.turkmmo.com/contact">Contact</a><br>

- <a href="https://www.turkmmo.com/archives-2">Archives</a><br>

- <a href="https://www.turkmmo.com/disclaimer">Disclaimer</a><br>

</span></div>

Çıktı demosu:

Maalesef bu etkiyi burada gösteremiyoruz. Ancak orijinal kaynak olan Dynamic Drive, bu dinamik HTML efektinin çalışan bir kopyasını içerir.

8. Tableizer ile bir HTML Elektronik Tablosu Alın​

Sitenizde bir elektronik tablo görüntülemek istiyorsanız, bırakın Tableizer! verilerinizi bir HTML tablosuna dönüştürün. Excel, Google Doc veya diğer herhangi bir elektronik tablodaki ham verileri tableizer.journalistopia.com adresindeki dönüştürücü aracına yapıştırmanız yeterlidir. Tablo seçeneklerinde ince ayar yapın , ardından HTML çıktısını almak için Tablo Oluştur'u tıklayın .

​

Tableize It olarak bu belki de web siteniz için en havalı HTML kodlarından biridir! tüm zor işi yapar.

HTML kodunu kopyalayıp web sitenize eklemek için HTML'yi Panoya Kopyala'yı tıklayın. Çok daha havalı görünmesi için arka plan renklerini düzenlemeyi düşünün.

 

[sergioneral]

eline sağlık

 

[Replicant]

eline sağlık

Rica ederim

 

[Fauda]

Paylaşım için teşekkürler.

 

[Replicant]

Paylaşım için teşekkürler.

Rica ederim