Home-theater-designers
Želite da vaša web stranica izgleda sjajno --- ali vaše vještine web razvoja nedostaju.
Ne očajavajte! Ne morate poznavati CSS ili PHP da biste izradili otmjenu web stranicu sa cool efektima. Neke jednostavne HTML oznake i znanje kako kopirati i zalijepiti će vam poslužiti.
Za početak s nekim cool HTML efektima sastavili smo ove besplatne predloške koda HTML efekata. Oni će poboljšati funkcionalnost i korisničko iskustvo vaše web stranice, a pritom neće probiti banku. Iako su uglavnom HTML, ovi kul kodovi mogu sadržavati i neke CSS i PHP.
1. Cool Parallax Effect s HTML -om
Vjerojatno ste vidjeli Parallax Effect koji se koristi na web stranicama s oglasima na mreži. Dok listate članak prema dolje, pojavljuje se pozadinska slika za pomicanje drugačijim tempom ili se pojavi oglas.
Alternativno, možda se pozadinska slika mijenja dok posjećujete različite dijelove web stranice. To je cool efekt koji dodaje vizualnu dubinu sadržaju i idealan je čak i ako to ne učinite razumjeti osnovni HTML kod .
Možete se igrati s efektom i kopirati kôd za jednostavan Parallax efekt pomicanja iz W3Schools .
U svojoj najsofisticiranijoj verziji, ovaj je učinak kombinacija HTML -a, CSS -a i JS -a.
Samo naprijed i donesite kodove za gore navedeno Parallax efekt zaglavlja/podnožja iz CodePena .
2. Kôd okvira HTML komentara koji se može pomicati
Ovo je jednostavan, ali koristan HTML element koji vam omogućuje pakiranje dugih isječaka teksta u kompaktni format. Na taj način ne zauzima cijeli prostor na stranici.
Možete se igrati s bojama i veličinom okvira za tekst kako bi odgovarao vašim potrebama.
Ulazni:
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! :) Ako želite nešto malo zaljubljenije, možete dohvatiti i kod za prilagodljiv okvir za komentare iz tvrtke Quackit .
Nude nekoliko predložaka, ali možete koristiti i njihov uređivač za ručnu promjenu i testiranje (pokretanje) vašeg prilagođenog koda.
3. Sjajan HTML trik: Istaknuti tekst
S jednostavnimHTML oznakom možete dodati hrpu kul efekata u tekst ili slike. Imajte na umu da ne rade svi u različitim preglednicima. Ovdje spomenuti rade u preglednicima Google Chrome, Microsoft Edge i Mozilla Firefox.
Ovaj HTML tekstualni efekt ističe tekst izmeđuoznake.
Ulazni:
Your highlighted text here.Izlazni prikaz:
4. Dodajte pozadinsku sliku tekstu
Isto tako, možete promijeniti boju teksta ili dodati pozadinsku sliku. Ovaj izgleda sjajno ako je veličina fonta teksta veća.
Ulazni:
MakeUseOf presents...Isti učinak postiže se dodavanjem stila i elemenata fonta tekstu u a označiti.
kako povećati namjenski video ram bez biosa
Izlazni prikaz:
5. Korisni HTML trik za dodavanje naslova Opis
Opis naslova pojavljuje se kada pomičete mišem po komadu 'izmijenjenog' teksta ili slike. Vidjeli ste da se oni koriste na web stranicama na slikama, povezanom tekstu ili čak stavkama izbornika u aplikacijama za stolna računala. Pomoću ovog HTML koda dodajte opis u običan tekst na svojoj web stranici.
Ulazni:
Move your mouse over me!Izlazni prikaz:
6. Najhladniji dosadašnji HTML trikovi: pomicanje ili padanje teksta
Kad tražite 'marquee html' na Googleu, otkrit ćete malo uskršnjeg jaja. Vidite pomicanje rezultata pretraživanja pri vrhu? To je učinak koji je stvorila zastarjela oznaka za izbor. Iako je ovaj nekoć cool HTML tekstualni efekt zastario, većina preglednika ga i dalje podržava.
Ulazni:
I wanna scroll with it, baby!Izlazni prikaz:
Možeš dodajte dodatne atribute za upravljanje ponašanjem pomicanja, bojom pozadine, smjerom, visinom itd. Pazite ipak; ti učinci mogu postati prilično iritantni ako se prekomjerno koriste.
Za hladan padajući tekstualni efekt, ponovno se uputite u Quackit i kopirajte njihov visoko prilagođeni kôd za izbor.
7. Izgradite Cool Switchmeni s HTML -om
Najhladniji HTML trikovi su dinamički HTML efekti. Međutim, često se temelje na skriptama. Evo jednog efekta za izbornike za koji ćete se složiti da izgleda vrlo glatko.
Malo je kompliciranije od vaše prosječne HTML oznake jer radi sa stilskom tablicom i skriptama. Prednost je što ne morate učitavati CSS ili skriptnu datoteku da bi funkcionirala. Umjesto toga, jednostavno zalijepite sljedeći kôd u odjeljak svoje web stranice.
Ulazni:
.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
Izlazni prikaz:
Nažalost, ovdje ne možemo dokazati ovaj učinak. Ali izvorni izvor, Dinamički pogon , sadrži radnu kopiju ovog dinamičkog HTML učinka.
8. Nabavite HTML proračunsku tablicu s Tableizer -om
Ako želite prikazati proračunsku tablicu na svojoj web lokaciji, dopustite Tableizeru! pretvorite svoje podatke u HTML tablicu. Samo zalijepite neobrađene podatke iz programa Excel, Google Doc ili bilo koje druge proračunske tablice u alat za pretvaranje na adresi tableizer.journalistopia.com . Podesite mogućnosti stola , a zatim kliknite Tableize It za primanje HTML izlaza.
Ovo je možda jedan od najhladnijih HTML kodova za vašu web stranicu, kao Tableize It! obavlja sav težak posao.
Klik Kopirajte HTML u međuspremnik kopirati HTML kôd i dodati ga na svoju web stranicu. Razmislite o uređivanju boja pozadine kako bi izgledala puno hladnije.
računalo se neće probuditi iz stanja spavanja windows 10
Iako ovo zapravo nije HTML efekt, prilično je zgodan.
Još cool HTML kodova i učinaka za vašu web stranicu
Snaga HTML -a, CSS -a i JavaScripta nudi potencijalno neograničene mogućnosti za zadivljujuće učinke na vašoj web stranici. Želite više?
- HTML dobrote daje vam superideje za označavanje.
- Dinamički pogon ima mnogo nevjerojatnih dinamičkih HTML skripti.
- Quackit nudi cool HTML kod.
Pokazali smo vam osam kul HTML kodova koje možete kopirati kako biste poboljšali svoju web stranicu. Iako su različite, sve ih je lako implementirati sve dok poznajete osnovne tehnike kodiranja HTML -om.
Udio Udio Cvrkut E -pošta 17 jednostavnih primjera HTML koda koje možete naučiti za 10 minutaŽelite li izraditi osnovnu web stranicu? Naučite ove primjere HTML -a i isprobajte ih u uređivaču teksta kako biste vidjeli kako izgledaju u vašem pregledniku.
Pročitajte Dalje Povezane teme- Programiranje
- HTML
- Web razvoj
- Alati za webmastere
Zamjenik urednika za sigurnost, Linux, DIY, programiranje i objašnjenje tehnologije, te zaista koristan producent Podcasta, s velikim iskustvom u podršci za stolna i softverska rješenja. Suradnik časopisa Linux Format, Christian je majstor za maline Pi, ljubitelj Lega i ljubitelj retro igara.
Više od Christiana CawleyjaPretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu