Herkesin Web Sitelerine Ekleyebileceği 8 Harika HTML Efekti

Herkesin Web Sitelerine Ekleyebileceği 8 Harika HTML Efekti

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





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. Bankayı bozmadan sitenizin işlevselliğini ve kullanıcı deneyimini geliştireceklerdir. Çoğunlukla HTML olsalar da, bu harika kodlar ayrıca bazı CSS ve PHP içerebilir.





1. HTML ile Harika Paralaks Etkisi

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

Alternatif olarak, sitenin farklı bölümlerini ziyaret ettiğinizde arka plan resmi değişebilir. İçeriğe görsel derinlik katan ve yapmasanız bile ideal olan harika bir efekt. temel HTML kodunu anlamak .



Efekt ile oynayabilir ve kodu kopyalayabilirsiniz. W3Schools'dan basit Paralaks kaydırma efekti .

En gelişmiş versiyonunda bu efekt HTML, CSS ve JS'nin bir kombinasyonudur.



Devam edin ve yukarıdakilerin kodlarını alın CodePen'den Üstbilgi/Altbilgi Paralaks efekti .

2. Kaydırılabilir HTML Yorum Kutusu Kodu

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



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

Giriş:


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! :)

Biraz daha meraklısı bir şey istiyorsanız, kodunu da alabilirsiniz. Quackit'ten özelleştirilebilir bir yorum kutusu .

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 Numarası: Vurgulanan Metin

Basit birHTML etiketi, metninize veya resimlerinize bir sürü 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, metin arasındaki metni vurgular.etiketler.

Giriş:

Your highlighted text here.

Çıkış 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ş:

MakeUseOf presents...

Aynı etki, metne stil ve yazı tipi öğeleri eklenerek elde edilir. etiket.

sahip olduğum anakartı nasıl bulabilirim

Çıkış demosu:

5. Başlık Eklemek İçin Yararlı HTML İpucu

Fare ile 'manipüle edilmiş' bir metin veya resim parçası üzerinde gezindiğinizde bir başlık ipucu belirir. 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ş:

Move your mouse over me!

Çıkış demosu:

6. Şimdiye Kadarki En Harika HTML Püf Noktaları: Kayan veya Düşen Metin

Google'da 'marquee html' için arama 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 yarattığı bir efekt. Bir zamanlar harika olan bu HTML metin efekti kullanımdan kaldırılmış olsa da, çoğu tarayıcı hala onu desteklemektedir.

Giriş:

I wanna scroll with it, baby!

Çıkış demosu:

Yapabilirsiniz daha fazla özellik ekle kaydırma davranışını, arka plan rengini, yönünü, yüksekliğini ve daha fazlasını kontrol etmek için. Ancak dikkatli olun; Bu etkiler aşırı kullanıldığında oldukça rahatsız edici olabilir.

Serin bir düşen metin efekti için, tekrar Quackit'e git ve son derece özelleştirilmiş seçim çerçevesi kodlarını 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 kaygan göründüğünü kabul edeceğiniz bir efekt.

Bir stil sayfası ve komut dosyalarıyla çalıştığı için, ortalama HTML etiketinizden biraz daha karmaşıktır. Avantajı, çalışması için bir CSS veya komut dosyası yüklemeniz gerekmemesidir. Bunun yerine, aşağıdaki kodu web sitenizin bölümüne yapıştırmanız yeterlidir.

Giriş:


.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

Çıkış demosu:

Maalesef bu etkiyi burada gösteremiyoruz. Ama asıl kaynak, Dinamik Sürüş , 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, Tableizer'a izin verin! verilerinizi bir HTML tablosuna dönüştürün. Excel, Google Doc veya başka bir elektronik tablodaki ham verileri şu adresteki dönüştürücü aracına yapıştırmanız yeterlidir. tableizer.journalistopia.com . ince ayar yapın tablo seçenekleri , ardından tıklayın Tablolaştır HTML çıktısını almak için.

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

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

android mikrofon arama sırasında çalışmıyor

Bu gerçekten bir HTML efekti olmasa da oldukça kullanışlıdır.

Siteniz İçin Daha Harika HTML Kodları ve Efektleri

HTML, CSS ve JavaScript'in gücü, web sitenizde çarpıcı efektler için potansiyel olarak sınırsız seçenekler sunar. Daha fazla istemek?

Web sitenizi geliştirmek için kopyalayabileceğiniz sekiz harika HTML kodu gösterdik. Farklı olsalar da, temel HTML kodlama tekniklerini bildiğiniz sürece hepsinin uygulanması kolaydır.

Paylaş Paylaş Cıvıldamak E-posta 10 Dakikada Öğrenebileceğiniz 17 Basit HTML Kodu Örneği

Temel bir web sayfası oluşturmak ister misiniz? Bu HTML örneklerini öğrenin ve tarayıcınızda nasıl göründüklerini görmek için bir metin düzenleyicide deneyin.

Sonrakini Oku İlgili konular
  • Programlama
  • HTML
  • Web Geliştirme
  • Webmaster araçları
Yazar hakkında Christian Cawley(1510 Makale Yayınlandı)

Masaüstü ve yazılım desteği konusunda kapsamlı deneyime sahip Güvenlik, Linux, Kendin Yap, Programlama ve Teknik Açıklama ve Gerçekten Faydalı Podcast yapımcısı için Editör Yardımcısı. Linux Format dergisine katkıda bulunan Christian, bir Raspberry Pi tamircisi, Lego aşığı ve retro oyun hayranıdır.

Christian Cawley'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın