Home-theater-designers
Вы хотите, чтобы ваш сайт выглядел великолепно, но вам не хватает навыков веб-разработки.
Не отчаивайтесь! Вам не нужно знать CSS или PHP, чтобы создать красивый сайт с классными эффектами. Подойдет несколько простых HTML-тегов и умение копировать и вставлять.
Чтобы вы могли начать работу с некоторыми классными HTML-эффектами, мы собрали эти бесплатные шаблоны кода HTML-эффектов. Они улучшат функциональность и удобство использования вашего сайта, не нарушая при этом больших затрат. Хотя это в основном HTML, эти классные коды могут также содержать некоторые CSS и PHP.
1. Классный эффект параллакса с HTML
Вы, наверное, видели эффект параллакса, используемый на веб-сайтах с онлайн-рекламой. При прокрутке статьи вниз фоновое изображение прокручивается в другом темпе, или появляется реклама.
В качестве альтернативы, возможно, фоновое изображение меняется при посещении разных частей сайта. Это классный эффект, который добавляет визуальной глубины контенту и идеален, даже если вы этого не сделаете. понимать базовый HTML-код .
Вы можете поиграть с эффектом и скопировать код для простой эффект прокрутки Parallax от 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...Тот же эффект достигается путем добавления элементов стиля и шрифта к тексту в ярлык.
как удалить хакера с моего телефона Android
Выходная демонстрация:
5. Полезный трюк с HTML для добавления подсказки к заголовку
Всплывающая подсказка заголовка появляется, когда вы прокручиваете мышью фрагмент «измененного» текста или изображения. Вы видели, как они используются на веб-сайтах в изображениях, связанном тексте или даже в пунктах меню в настольных приложениях. Используйте этот HTML-код, чтобы добавить всплывающую подсказку к обычному тексту на вашей веб-странице.
Вход:
Move your mouse over me!Выходная демонстрация:
6. Самые крутые трюки с HTML: прокрутка или падение текста.
При поиске в Google «marquee html» вы обнаружите маленькое пасхальное яйцо. Видите вверху счетчик результатов поиска с прокруткой? Это эффект, созданный устаревшим тегом marquee. Хотя этот некогда крутой текстовый эффект 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-код и добавить его на свой сайт. Попробуйте отредактировать фоновые цвета, чтобы он выглядел намного круче.
почему мой телефон не заряжается быстро
Хотя это не совсем HTML-эффект, но он очень удобен.
Еще больше интересных HTML-кодов и эффектов для вашего сайта
Возможности HTML, CSS и JavaScript предлагают потенциально неограниченные возможности для потрясающих эффектов на вашем веб-сайте. Хочу больше?
- HTML Goodies дает вам отличныйпометить идеи.
- Динамический привод имеет множество невероятных динамических сценариев HTML.
- Quackit предлагает классный HTML-код.
Мы показали вам восемь интересных HTML-кодов, которые вы можете скопировать для улучшения своего сайта. Несмотря на то, что они разные, их все легко реализовать, если вы знаете базовые методы кодирования HTML.
Делиться Делиться Твитнуть Эл. адрес 17 простых примеров HTML-кода, которые можно выучить за 10 минутХотите создать простую веб-страницу? Изучите эти примеры HTML и попробуйте их в текстовом редакторе, чтобы увидеть, как они выглядят в вашем браузере.
Читать далее Похожие темы- Программирование
- HTML
- Веб-разработка
- Инструменты для веб-мастеров
Заместитель редактора по безопасности, Linux, DIY, программированию и техническому объяснению, а также производитель действительно полезных подкастов с большим опытом поддержки настольных компьютеров и программного обеспечения. Автор журнала Linux Format, Кристиан - мастер Raspberry Pi, любитель Lego и фанат ретро-игр.
Ещё от Christian CawleyПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться