Home-theater-designers
Искате вашият уебсайт да изглежда страхотно --- но вашите умения за уеб разработка липсват.
Не се отчайвайте! Не е нужно да знаете CSS или PHP, за да създадете фантастичен сайт с готини ефекти. Някои прости HTML тагове и знанието как да копирате и поставите ще свършат работа.
За да започнете с някои готини HTML ефекти, ние сме събрали тези безплатни шаблони за код на HTML ефект. Те ще подобрят функционалността и потребителското изживяване на вашия сайт, като същевременно не разбият банката. Въпреки че са предимно HTML, тези готини кодове могат да съдържат и някои CSS и PHP.
1. Готин паралакс ефект с HTML
Вероятно сте виждали паралакс ефекта, използван на уебсайтове с онлайн реклами. Докато превъртате статия надолу, фоновото изображение се появява за превъртане с различно темпо или се появява реклама.
Като алтернатива може би фоновото изображение се променя, когато посещавате различни части на сайта. Това е готин ефект, който добавя визуална дълбочина към съдържанието и идеален, дори ако не го направите разбират основния HTML код .
Можете да играете с ефекта и да копирате кода за прост ефект на превъртане на паралакс от W3Schools .
В най -сложната си версия този ефект е комбинация от HTML, CSS и JS.
Продължете и вземете кодовете за горното Паралакс ефект на заглавката/долния колонтитул от CodePen .
2. Код на полето за коментар в HTML с превъртане
Това е прост, но полезен HTML елемент, който ви позволява да опаковате дълги фрагменти от текст в компактен формат. По този начин не заема цялото място на страницата.
Можете да играете с цветовете и размера на текстовото поле, така че да отговаря на вашите нужди.
Вход:
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! :) Ако желаете нещо малко по -красиво, можете също да вземете код за персонализирано поле за коментар от Quackit .
Те предлагат няколко шаблона, но можете също да използвате редактора им, за да промените ръчно и тествате (стартирате) вашия персонализиран код.
3. Готин трик с HTML: Маркиран текст
С простHTML маркер можете да добавите много готини ефекти към вашия текст или изображения. Имайте предвид, че не всички от тях работят в различни браузъри. Споменатите тук работят в Google Chrome, Microsoft Edge и Mozilla Firefox.
Този HTML текстов ефект подчертава текста междутагове.
Вход:
Your highlighted text here.Изходна демонстрация:
4. Добавете фоново изображение към текст
По същия начин можете да промените цвета на текста си или да добавите фоново изображение. Това изглежда страхотно, ако размерът на шрифта на текста е по -голям.
Вход:
MakeUseOf presents...Същият ефект се постига чрез добавяне на стила и елементите на шрифта към текст в a етикет.
как да отворите bios windows 10
Изходна демонстрация:
5. Полезен трик с HTML за добавяне на подсказка за заглавие
Подсказка за заглавието се появява, когато превъртате с мишката върху парче „манипулиран“ текст или изображение. Ще видите, че те се използват на уебсайтове върху изображения, свързан текст или дори елементи от менюто в настолни приложения. Използвайте този HTML код, за да добавите подсказка към обикновен текст на вашата уеб страница.
Вход:
Move your mouse over me!Изходна демонстрация:
6. Най -готините HTML трикове: превъртане или падане на текст
Когато търсите „marquee html“ в Google, ще откриете малко великденско яйце. Вижте броя на резултатите от търсенето с превъртане в горната част? Това е ефект, създаден от вече неактуалния маркер. Въпреки че този някога готин HTML текстов ефект е оттеглен, повечето браузъри все още го поддържат.
Вход:
I wanna scroll with it, baby!Изходна демонстрация:
Можеш добавете допълнителни атрибути за да контролирате поведението при превъртане, цвета на фона, посоката, височината и др. Внимавайте обаче; тези ефекти могат да станат доста дразнещи при прекомерна употреба.
За хладен падащ текстов ефект, насочете се отново към Quackit и копирайте силно персонализирания им код за маркиране.
7. Създайте готино меню за превключване с HTML
Най -готините трикове с HTML са динамичните HTML ефекти. Те обаче често се основават на скриптове. Ето един ефект за менютата, за който ще се съгласите, че изглежда много хлъзгав.
Той е малко по -сложен от средния ви HTML маркер, защото работи със стилова таблица и скриптове. Предимството е, че не е нужно да качвате 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;
}
/***********************************************
* 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
Изходна демонстрация:
За съжаление не можем да демонстрираме този ефект тук. Но първоизточникът, Динамично задвижване , разполага с работно копие на този динамичен HTML ефект.
8. Вземете HTML електронна таблица с Tableizer
Ако искате да покажете електронна таблица на вашия сайт, позволете на Tableizer! преобразувайте данните си в HTML таблица. Просто поставете необработените данни от Excel, Google Doc или всяка друга електронна таблица в инструмента за конвертиране на адрес tableizer.journalistopia.com . Променете опции за маса , след което щракнете Таблицирайте го за да получите HTML изход.
Това е може би един от най -готините HTML кодове за вашия уебсайт, като Tableize It! върши цялата упорита работа.
Щракнете Копирайте HTML в буферната памет да копирате HTML кода и да го добавите към уебсайта си. Помислете за редактиране на цветовете на фона, за да изглежда много по-хладно.
как да предавате от android на xbox one
Въпреки че това всъщност не е HTML ефект, той е доста удобен.
Още готини HTML кодове и ефекти за вашия сайт
Силата на HTML, CSS и JavaScript предлага потенциално неограничени възможности за зашеметяващи ефекти на вашия уебсайт. Искам още?
- HTML екстри ти дава страхотноидеи за етикети.
- Динамично задвижване има много невероятни динамични HTML скриптове.
- Quackit предлага страхотен HTML код.
Показахме ви осем готини HTML кода, които можете да копирате, за да подобрите уебсайта си. Макар и различни, всички те са лесни за изпълнение, стига да знаете основни техники за HTML кодиране.
Дял Дял Туит електронна поща 17 прости примера за HTML код, които можете да научите за 10 минутиИскате ли да създадете основна уеб страница? Научете тези примери за HTML и ги изпробвайте в текстов редактор, за да видите как изглеждат във вашия браузър.
Прочетете Напред Свързани теми- Програмиране
- HTML
- Уеб разработка
- Инструменти за уеб администратори
Заместник -редактор по сигурност, Linux, DIY, програмиране и обяснени технологии и наистина полезен производител на подкаст, с богат опит в поддръжката на настолни компютри и софтуер. Сътрудник на списание Linux Format, Кристиан е калайджия на Raspberry Pi, любител на Lego и фен на ретро игри.
Още от Кристиан КаулиАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате