Последнее обновление 05.01.2023 — Василий Иванов
Вы хотите, чтобы ваш веб-сайт выглядел потрясающе, но вам не хватает навыков веб-разработки.
Не отчаивайтесь! Вам не нужно знать CSS или PHP, чтобы создать модный сайт с крутыми эффектами. Несколько простых тегов HTML и знание того, как копировать и вставлять, подойдут.
Чтобы вы могли начать работу с классными HTML-эффектами, мы собрали эти бесплатные шаблоны кода для копирования. Они улучшат функциональность и пользовательский опыт вашего сайта, не тратя ни копейки. Хотя в основном это HTML, эти классные коды также могут содержать немного CSS и PHP.
1. Классный HTML-эффект параллакса
Вы, наверное, видели эффект параллакса, используемый на веб-сайтах с онлайн-рекламой. Когда вы прокручиваете статью вниз, фоновое изображение прокручивается с разной скоростью или появляется реклама.
В качестве альтернативы, возможно, фоновое изображение меняется, когда вы посещаете разные части сайта. Это классный эффект, который добавляет визуальной глубины контенту, и его можно добавить, даже если вы не понимаете основы HTML-кода.
Вы можете поиграть с эффектом и скопировать код простого эффекта прокрутки Parallax из W3Schools.
В наиболее сложной версии этот эффект представляет собой комбинацию HTML, CSS и JS.
Идите вперед и получите коды для вышеупомянутого эффекта параллакса верхнего/нижнего колонтитула из CodePen.
2. Прокручиваемый HTML-код окна комментариев
Это простой, но полезный элемент HTML, который позволяет упаковывать длинные фрагменты текста в компактный формат. Таким образом, он не занимает все место на странице.
Вы можете поиграть с цветами и размером текстового поля, чтобы оно соответствовало вашим потребностям.
Вход:
<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
Если вы хотите чего-то более необычного, вы также можете получить код для настраиваемого поля комментариев из Quackit.
Там вы найдете несколько шаблонов, но вы также можете использовать их редактор, чтобы вручную изменить и протестировать (запустить) свой собственный код.
3. Крутой HTML-трюк: выделенный текст
С помощью простого тега вы можете добавить массу крутых HTML-эффектов к тексту или изображениям. Обратите внимание, что не все из них работают в разных браузерах. Упомянутые здесь работают в Google Chrome, Microsoft Edge и Mozilla Firefox.
Этот текстовый эффект HTML выделяет текст между тегами .
Вход:
<span style="background-color: #FFFF00>Your highlighted text here.</span>
Выходная демонстрация:
4. HTML-код для добавления классного фонового изображения к тексту
Точно так же вы можете изменить цвет текста или добавить фоновое изображение. Это выглядит великолепно, если размер шрифта текста больше.
Вход:
<span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>
Тот же эффект достигается добавлением элементов стиля и шрифта к тексту в теге .
Выходная демонстрация:
5. Полезный HTML-трюк для добавления всплывающей подсказки к заголовку
Всплывающая подсказка заголовка появляется, когда вы прокручиваете мышью фрагмент «манипулируемого» текста или изображения. Вы видели, как они используются на веб-сайтах для изображений, связанного текста или даже элементов меню в настольных приложениях. Используйте этот HTML-код, чтобы добавить всплывающую подсказку к обычному тексту на вашей веб-странице.
Вход:
<span title="See, this is the tooltip. :)">Move your mouse over me!</span>
Выходная демонстрация:
6. Самые крутые трюки с HTML: прокрутка или падение текста
Когда вы ищете «marquee html» в Google, вы обнаружите небольшое пасхальное яйцо. Видите количество прокручиваемых результатов поиска вверху? Это эффект, созданный ныне устаревшим тегом marquee. Хотя этот когда-то классный текстовый HTML-эффект устарел, большинство браузеров все еще поддерживают его.
Вход:
<marquee>I wanna scroll with it, baby!</marquee>
Выходная демонстрация:
Вы можете добавить дополнительные атрибуты для управления поведением прокрутки, цветом фона, направлением, высотой и т. д.
Например, вы можете прокручивать влево с помощью:
<marquee
Переключите «влево» на «вправо», чтобы прокручивать текст в противоположном направлении.
Кроме того, вы можете даже прокручивать вверх или вниз:
<marquee
Кроме того, выделение также имеет поведение «слайда», которое ограничивает, насколько далеко может прокручиваться текст. Однако будьте осторожны; эти эффекты могут стать довольно раздражающими, если ими злоупотреблять. Чтобы получить классный падающий текстовый эффект, снова зайдите в Quackit и скопируйте их специально настроенный код выделения.
7. Создайте классное меню переключателей с помощью HTML
Самые крутые HTML-трюки — это динамические HTML-эффекты. Однако они часто основаны на сценариях. Вот один эффект для меню, который, согласитесь, выглядит очень красиво.
Это немного сложнее обычного HTML-тега, потому что он работает с таблицей стилей и скриптами. Преимущество заключается в том, что вам не нужно загружать файл CSS или скрипт, чтобы заставить его работать. Вместо этого просто вставьте код из Dynamic Drive в раздел
вашего веб-сайта.8. Получите электронную таблицу HTML с помощью Tableizer
Если вы хотите отобразить электронную таблицу на своем сайте, позвольте Tableizer! преобразовать ваши данные в HTML-таблицу. Просто вставьте необработанные данные из Excel, Google Doc или любой другой электронной таблицы в инструмент преобразования на tableizer.journalistopia.com. Настройте параметры таблицы, затем нажмите Tableize It, чтобы получить вывод HTML.
Это, пожалуй, один из самых крутых HTML-кодов для вашего сайта, как Tableize It! выполняет всю тяжелую работу.
Нажмите Копировать HTML в буфер обмена, чтобы скопировать HTML-код и добавить его на свой веб-сайт. Рассмотрите возможность редактирования свойства background-colors для более холодного эффекта.
Хотя на самом деле это не HTML-эффект, он весьма удобен.
Еще больше классных HTML-кодов и эффектов для вашего сайта
Возможности HTML, CSS и JavaScript предлагают потенциально неограниченные возможности для потрясающих эффектов на вашем веб-сайте. Хочу больше?
- HTML Goodies: дает вам отличные идеи тега .
- Dynamic Drive: содержит множество невероятных динамических HTML-скриптов.
- Quackit: предлагает классный HTML-код.
Мы показали вам восемь классных HTML-кодов, которые вы можете скопировать, чтобы улучшить свой веб-сайт. Несмотря на то, что они разные, все они просты в реализации, если вы знаете основные методы кодирования HTML.
