Java, UX, HTML, CSS, WEB-design

Создайте впечатляющий эффект отражения с помощью CSS и Reflection.js

Краткое описание по статье Создайте впечатляющий эффект отражения с помощью CSS и Reflection.js

Название: Создайте впечатляющий эффект отражения с помощью CSS и Reflection.js . Краткое описание: ⭐ Один из удивительных эффектов, которые вы може . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


Один из удивительных эффектов, которые вы можете сделать с помощью современного веб-дизайна, — это создать эффект отражения изображения.

Однако создание эффекта отражения изображения с помощью только CSS для вашего сайта может занять много времени. Это может работать какое-то время; однако, когда вам нужно изменить изображения на вашем сайте, вам также необходимо изменить некоторые части вашего CSS, что может занять некоторое время. Другая проблема, с которой вы можете столкнуться, заключается в том, что она может работать не во всех браузерах.

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна



Хорошо, что есть новая утилита JavaScript под названием Reflection.js, доступная как для jQuery, так и для MooTools. Это создает отражения для вашего сайта намного проще и быстрее.

Хорошо, давайте начнем.

Ресурс, необходимый для завершения этого руководства

  • Любое изображение, которое вы хотите использовать
  • Отражение.js
  • Время и терпение
[demo source=”https://1stwebdesigner.com/demos/reflection.zip” demo=”https://1stwebdesigner.com/demos/reflection/css_version.html”]

Версия CSS3

Разметка

Для нашего HTML мы просто добавим изображение и поместим его на рисунок элемента HTML5.

<figure>
        <img align="center" alt="rocket" src="https://1stwebdesigner.com/reflection-effect-css/img/rocket.png">
    </figure>

CSS

Для нашего CSS мы собираемся сделать следующее:
1. Добавьте поле в 60 пикселей сверху и отцентрируйте его на экране, используя значение auto.
2. Далее мы будем использовать -webkit-коробка-отражать Свойство CSS для отражения изображения вниз.
3. Затем мы маскируем изображение, используя -вебкит-градиент , чтобы затемнить изображение внизу, отображая только часть или меньше изображения.

  img{ margin: 60px auto 0 auto; -webkit-box-reflect:below -1px
    -webkit-gradient(linear, left top, left bottom, from(transparent),
    color-stop(67%, transparent) , to(rgba(250, 250, 250, 0.5))); }

Используя приведенные выше коды, вы получите красивую фигуру отражения, похожую на изображение ниже.

отражение

Недостатки эффекта отражения CSS

Согласно сайту разработчиков Mozilla, -webkit-коробка-отражать Свойство CSS в настоящее время работает только в Chrome и Opera. Хотя есть и другие способы получить аналогичные результаты с помощью CSS3, суть в том, что все еще есть проблемы, которые необходимо решить, и на их создание уйдет много времени.

В конце концов, есть серебряная подкладка. Reflection.js избавит вас от необходимости создавать эффекты отражения, не беспокоясь о совместимости браузеров. Давайте теперь проверим, как мы можем легко получить тот же результат, используя Reflection.js.

jQuery-версия

Настройка

Прежде чем мы начнем с разметки, загрузите файл Reflection.js вместе с mootools.js здесь. Затем нам нужно добавить ссылки на наши Reflection.js и mootools.js в нашем разделе заголовка.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to Create a Reflection Effect using CSS3 and Reflection.js for
    MooTools</title>
    <script src="https://1stwebdesigner.com/reflection-effect-css/js/mootools.js" type="text/javascript"></script>
    <script src="https://1stwebdesigner.com/reflection-effect-css/js/reflection.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Разметка

Для нашего HTML мы по-прежнему добавим изображение и поместим его в элемент HTML5. фигура, но на этот раз мы добавим класс отражать. Этот класс будет использоваться Reflection.js для создания приятного и плавного эффекта отражения для любого изображения, имеющего этот класс.

    <figure>
            <img src="https://1stwebdesigner.com/reflection-effect-css/img/rocket.png" align="center" class="reflect" alt="rocket"/>
     </figure>

jQuery

Версия MooTools для Reflect.js будет использовать метод отражения для создания приятного и плавного эффекта отражения. Вы также можете поиграть с его непрозрачностью, например, насколько ярким должно быть отражение.

document.ready(function() {
    var options = {
        opacity: 0.73
    };
    $('.reflect').reflect(options);
});

И это все! Вот как легко и удивительно этот инструмент. Если вы запустите это в своем браузере, вы получите такие же результаты, как на изображении, показанном ниже.

отражение

Хотя в Photoshop и CSS3 есть хороший способ создания приятного эффекта отражения, все еще есть проблемы, которые необходимо решить, и на их создание может уйти много времени. Код Кристофа Бейлса Reflection.js — отличный инструмент JavaScript для реализации этого эффекта отражения. Вместо того, чтобы делать это в Photoshop или с помощью CSS3, я бы рекомендовал использовать этот инструмент JavaScript, чтобы сделать вашу работу проще и быстрее.

Итак, как вам эффект отражения, созданный в этом уроке? У нас есть еще одна вещь, чтобы показать вам. Следующая глава посвящена созданию потрясающей страницы продукта с некоторыми сумасшедшими фоновыми эффектами CSS.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Создайте впечатляющий эффект отражения с помощью CSS и Reflection.js

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»