Home-theater-designers
Желите да ваша веб страница изгледа сјајно --- али недостају ваше вештине веб развоја.
Не очајавајте! Не морате да знате ЦСС или ПХП да бисте направили отмену веб локацију са ефектима. Неке једноставне ХТМЛ ознаке и знање како копирати и залепити ће вам помоћи.
Да бисте започели са неким сјајним ХТМЛ ефектима, саставили смо ове бесплатне предлошке кода ХТМЛ ефеката. Они ће побољшати функционалност и корисничко искуство ваше веб странице, а притом неће пробити банку. Иако су углавном ХТМЛ, ови кул кодови могу садржати и неке ЦСС и ПХП.
1. Цоол Параллак Еффецт са ХТМЛ -ом
Вероватно сте видели Параллак ефекат који се користи на веб страницама са огласима на мрежи. Док листате чланак надоле, Позадинска слика се појављује за померање другачијим темпом или се појави оглас.
Алтернативно, можда се позадинска слика мења док посећујете различите делове веб локације. То је кул ефекат који додаје визуелну дубину садржају и идеалан је чак и ако то не учините разумеју основни ХТМЛ код .
Можете се играти са ефектом и копирати код за једноставан Параллак померање са В3Сцхоолс .
У својој најсофистициранијој верзији, овај ефекат је комбинација ХТМЛ -а, ЦСС -а и ЈС -а.
Само напред и донесите кодове за горе наведено Паралелни ефекат заглавља/подножја из ЦодеПен -а .
2. Код оквира за коментаре ХТМЛ -а за померање
Ово је једноставан, али користан ХТМЛ елемент који вам омогућава да спакујете дугачке исечке текста у компактни формат. На овај начин не заузима цео простор на страници.
Можете се играти са бојама и величином оквира за текст како би одговарао вашим потребама.
Улазни:
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! :) Ако желите нешто мало маштовитије, можете набавити и код за прилагодљиво поље за коментаре из Куацкит -а .
Нуде неколико предложака, али можете користити и њихов уређивач за ручну промену и тестирање (покретање) прилагођеног кода.
3. Супер ХТМЛ трик: Истакнути текст
Са једноставнимХТМЛ ознаком можете додати тону кул ефеката у текст или слике. Имајте на уму да не раде сви у различитим прегледачима. Овде поменути раде у Гоогле Цхроме -у, Мицрософт Едге -у и Мозилла Фирефок -у.
Овај ХТМЛ текстуални ефекат истиче текст измеђуознаке.
Улазни:
Your highlighted text here.Оутпут демо:
4. Додајте позадинску слику тексту
Слично, можете променити боју текста или додати слику позадине. Овај изгледа сјајно ако је величина фонта текста већа.
Улазни:
MakeUseOf presents...Исти ефекат се постиже додавањем стила и елемената фонта тексту у а таг.
најбољи начин да приватно делите фотографије на мрежи
Оутпут демо:
5. Корисни ХТМЛ трик за додавање наслова
Објашњење наслова појављује се када клизите мишем преко дела „манипулираног“ текста или слике. Видели сте да се они користе на веб локацијама на сликама, повезаном тексту или чак ставкама менија у апликацијама за рачунаре. Помоћу овог ХТМЛ кода додајте опис у обичан текст на својој веб страници.
Улазни:
Move your mouse over me!Оутпут демо:
6. Најхладнији досадашњи ХТМЛ трикови: померање или падање текста
Када тражите 'маркуее хтмл' на Гоогле -у, открићете мало ускршњег јајета. Видите број резултата претраживања који се померају на врху? То је ефекат који је створила застарела ознака за избор. Иако је овај некада цоол ХТМЛ текстуални ефекат застарео, већина прегледача га и даље подржава.
Улазни:
I wanna scroll with it, baby!Оутпут демо:
Можете додајте додатне атрибуте за контролу понашања, боје позадине, смера, висине и још много тога. Пазите, међутим; ови ефекти могу постати прилично иритантни ако се прекомерно користе.
За хладан падајући текстуални ефекат, идите поново у Куацкит и копирајте њихов високо прилагођени код за избор.
7. Направите цоол Свитцхмену мени са ХТМЛ -ом
Најхладнији ХТМЛ трикови су динамички ХТМЛ ефекти. Међутим, често се заснивају на скриптама. Ево једног ефекта за меније за који ћете се сложити да изгледа веома глатко.
Мало је компликованији од ваше просечне ХТМЛ ознаке јер ради са стилским листом и скриптама. Предност је што не морате да учитате ЦСС или скрипт датотеку да би функционисала. Уместо тога, једноставно залепите следећи код у одељак ваше веб локације.
Улазни:
.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
Оутпут демо:
Нажалост, овде не можемо показати овај ефекат. Али изворни извор, Динамиц Дриве , садржи радну копију овог динамичког ХТМЛ ефекта.
8. Набавите ХТМЛ табелу са Таблеизер -ом
Ако желите да прикажете табелу на свом сајту, дозволите Таблеизер -у! претворите своје податке у ХТМЛ табелу. Само налепите сирове податке из програма Екцел, Гоогле Доц или било које друге табеле у алат за претварање на адреси таблеизер.јоурналистопиа.цом . Подесите опције стола , а затим кликните Таблеизе Ит да бисте примили ХТМЛ излаз.
Ово је можда један од најхладнијих ХТМЛ кодова за вашу веб страницу, као Таблеизе Ит! обавља сав тежак посао.
Кликните Копирајте ХТМЛ у међуспремник да бисте копирали ХТМЛ код и додали га на своју веб локацију. Размислите о уређивању боја позадине како би изгледало много хладније.
како утишати вентилатор лаптопа
Иако ово није ХТМЛ ефекат, прилично је згодан.
Још кул ХТМЛ кодова и ефеката за вашу веб локацију
Снага ХТМЛ -а, ЦСС -а и ЈаваСцрипт -а нуди потенцијално неограничене могућности за задивљујуће ефекте на вашој веб локацији. Желим више?
- ХТМЛ Гоодиес даје вам одличноидеје за означавање.
- Динамиц Дриве има много невероватних динамичких ХТМЛ скрипти.
- Куацкит нуди кул ХТМЛ код.
Показали смо вам осам кул ХТМЛ кодова које можете копирати како бисте побољшали своју веб локацију. Иако су различите, све их је лако имплементирати све док познајете основне технике кодирања ХТМЛ -ом.
Објави Објави Твеет Емаил 17 једноставних примера ХТМЛ кода које можете научити за 10 минутаЖелите да креирате основну веб страницу? Научите ове ХТМЛ примере и испробајте их у уређивачу текста да видите како изгледају у вашем прегледачу.
Прочитајте следеће Повезане теме- Програмирање
- ХТМЛ
- Веб Девелопмент
- Алати за вебмастере
Заменик уредника за безбедност, Линук, уради сам, програмирање и објашњење технологије и заиста користан произвођач подцаста, са великим искуством у подршци за десктоп и софтвер. Сарадник часописа Линук Формат, Цхристиан је љубитељ Распберри Пи -а, љубитељ Лега и љубитељ ретро игара.
Више од Цхристиана ЦавлеијаПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили