Home-theater-designers
Doriți ca site-ul dvs. web să arate minunat --- dar abilitățile dvs. de dezvoltare web lipsesc.
Nu dispera! Nu trebuie să știți CSS sau PHP pentru a construi un site elegant cu efecte interesante. Unele etichete HTML simple și știind cum să copiați-și-lipiți vor face.
Pentru a începe să folosiți câteva efecte HTML interesante, am compilat aceste șabloane gratuite de coduri de efect HTML. Acestea vor îmbunătăți funcționalitatea și experiența de utilizare a site-ului dvs., fără a distruge banca. Deși sunt în mare parte HTML, aceste coduri interesante pot conține și CSS și PHP.
1. Cool Parallax Effect cu HTML
Probabil ați văzut efectul Parallax utilizat pe site-uri web cu reclame online. Pe măsură ce derulați în jos un articol, imaginea de fundal pare să deruleze într-un alt ritm sau apare o reclamă.
Alternativ, poate că imaginea de fundal se schimbă pe măsură ce vizitați diferite părți ale site-ului. Este un efect răcoros care adaugă adâncime vizuală conținutului și este ideal chiar dacă nu înțelegeți codul HTML de bază .
Puteți juca cu efectul și puteți copia codul pentru un efect de defilare Parallax simplu de la W3Schools .
În cea mai sofisticată versiune, acest efect este o combinație de HTML, CSS și JS.
Continuați și preluați codurile pentru cele de mai sus Efect paralel antet / subsol de la CodePen .
2. Codul casetei de comentarii HTML defilabil
Acesta este un element HTML simplu, dar util, care vă permite să împachetați fragmente lungi de text într-un format compact. În acest fel, nu ocupă întregul spațiu de pe pagină.
Vă puteți juca cu culorile și dimensiunea casetei de text pentru a o face să se potrivească nevoilor dumneavoastră.
Intrare:
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! :) Dacă doriți ceva puțin mai îndrăgostit, puteți prelua și codul pentru o casetă de comentarii personalizabilă de la Quackit .
Acestea oferă mai multe șabloane, dar puteți utiliza și editorul acestora pentru a modifica manual și a testa (rula) codul personalizat.
3. Un truc HTML minunat: text evidențiat
Cu un simpluEtichetă HTML puteți adăuga o tonă de efecte interesante textului sau imaginilor. Rețineți că nu toate funcționează pe browsere. Cele menționate aici funcționează în Google Chrome, Microsoft Edge și Mozilla Firefox.
Acest efect de text HTML evidențiază textul dintreEtichete.
Intrare:
Your highlighted text here.Demo de ieșire:
4. Adăugați o imagine de fundal la text
La fel, puteți schimba culoarea textului sau puteți adăuga o imagine de fundal. Acesta arată minunat dacă dimensiunea fontului textului este mai mare.
Intrare:
MakeUseOf presents...Același efect se obține prin adăugarea elementelor de stil și font textului într-un etichetă.
compara iphone 12 pro și pro max
Demo de ieșire:
5. Truc HTML util pentru a adăuga un tooltip pentru titlu
Un sfat de instrumente pentru titlu apare atunci când derulați cu mouse-ul peste o bucată de text sau imagine „manipulată”. Le-ați văzut folosite pe site-uri web pe imagini, text conectat sau chiar elemente de meniu în aplicațiile desktop. Utilizați acest cod HTML pentru a adăuga un sfat de instrumente la text simplu pe pagina dvs. web.
Intrare:
Move your mouse over me!Demo de ieșire:
6. Cele mai tari trucuri HTML de până acum: derulare sau cădere a textului
Când căutați „marquee html” pe Google, veți descoperi un mic ou de Paște. Vedeți numărul de rezultate ale căutării în derulare în partea de sus? Acesta este un efect creat de eticheta marcaj, acum învechită. În timp ce acest efect de text HTML o dată rece a fost învechit, majoritatea browserelor îl acceptă în continuare.
Intrare:
I wanna scroll with it, baby!Demo de ieșire:
Poti adăugați alte atribute pentru a controla comportamentul derulării, culoarea fundalului, direcția, înălțimea și multe altele. Aveți grijă, totuși; aceste efecte pot deveni destul de iritante dacă sunt suprautilizate.
Pentru un efect de text rece, îndreaptă-te din nou spre Quackit și copiați codul de marcare foarte personalizat.
7. Construiți un meniu cool cu HTML
Cele mai tari trucuri HTML sunt efecte HTML dinamice. Cu toate acestea, acestea sunt adesea bazate pe scripturi. Iată un efect pentru meniuri pe care veți fi de acord că arată foarte elegant.
Este puțin mai complicat decât eticheta HTML medie, deoarece funcționează cu o foaie de stil și scripturi. Avantajul este că nu trebuie să încărcați un fișier CSS sau script pentru a-l face să funcționeze. În schimb, lipiți pur și simplu următorul cod în secțiunea site-ului dvs. web.
Intrare:
.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 de ieșire:
Din păcate, nu putem demonstra acest efect aici. Dar sursa originală, Unitate dinamică , prezintă o copie de lucru a acestui efect HTML dinamic.
8. Obțineți o foaie de calcul HTML cu Tableizer
Dacă doriți să afișați o foaie de calcul pe site-ul dvs., permiteți Tableizer! transformă-ți datele într-un tabel HTML. Pur și simplu lipiți datele brute din Excel, Google Doc sau orice altă foaie de calcul în instrumentul de conversie la tableizer.journalistopia.com . Ajustează opțiuni de masă , apoi apasa Tableize It pentru a primi ieșirea HTML.
Acesta este probabil unul dintre cele mai tari coduri HTML pentru site-ul dvs., așa cum este Tableize It! face toată munca grea.
Clic Copiați HTML în clipboard pentru a copia codul HTML și a-l adăuga pe site-ul dvs. web. Luați în considerare editarea culorilor de fundal pentru a face să pară mult mai rece.
conectați-vă la wifi, dar nu aveți acces la internet
Deși acest lucru nu este într-adevăr un efect HTML, este destul de la îndemână.
Mai multe coduri HTML și efecte mai interesante pentru site-ul dvs.
Puterea HTML, CSS și JavaScript oferă opțiuni potențial nelimitate pentru efecte uimitoare pe site-ul dvs. web. Vreau mai mult?
- HTML Goodies îți dă grozavetichetați idei.
- Unitate dinamică are multe scripturi HTML dinamice incredibile.
- Quackit oferă cod HTML interesant.
V-am arătat opt coduri HTML interesante pe care le puteți copia pentru a vă îmbunătăți site-ul. Deși sunt diferite, toate sunt ușor de implementat atâta timp cât știți tehnici de codare HTML de bază.
Acțiune Acțiune Tweet E-mail 17 exemple simple de cod HTML pe care le puteți învăța în 10 minuteDoriți să creați o pagină web de bază? Aflați aceste exemple HTML și încercați-le într-un editor de text pentru a vedea cum arată în browserul dvs.
Citiți în continuare Subiecte asemănătoare- Programare
- HTML
- Dezvoltare web
- Instrumente pentru webmasteri
Editor adjunct pentru securitate, Linux, bricolaj, programare și tehnică explicată și producător de podcasturi cu adevărat util, cu o vastă experiență în asistență pentru desktop și software. Colaborator la revista Linux Format, Christian este un jucător Raspberry Pi, un iubitor de Lego și un fan retro al jocurilor.
Mai multe de la Christian CawleyAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona