Как добавить эффект отражения к изображению
Короткое объяснение, как добавить эффект отражения к изображению с помощью CSS и какие параметры стоит подбирать.
Форум Invision Power Board (IPB) v2.3.6
Что представляет собой Invision Power Board версии 2.3.6, какие задачи решает и как подойти к оценке совместимости с DataLife Engine без гарантий и обещаний.
Экспорт новостей сайта в DataLife Engine: как устроена задача и как её решить
Что даёт экспорт новостей в DataLife Engine, какие форматы бывают у сторонних модулей и как безопасно проверить такой скрипт на своём сайте.
Скрипт Catalog v.12: каталог товаров и интернет-магазин на DLE
Что представляет собой скрипт Catalog v.12, какие задачи решает каталог товаров в составе DLE и как подойти к проверке совместимости и настроек перед запуском.
Как проверить расширение Del Reason 1.0 до установки на сайт
Как составить требования, сопоставить их с документацией и проверить неизвестное расширение в изолированной копии, не допуская выводов о его поведении.
Opera 10.0.1622 beta 2 (рус) для Windows: как проверить и настроить
Практические шаги проверки и настройки браузера Opera 10.0.1622 beta 2 в русской локализации для Windows: что можно проверить локально, какие настройки влияют на работу и где границы подтверждённых сведений.
Модуль Del Reason 1.0 для DLE 7: назначение и порядок проверки
Как устроено удаление записей с указанием причины в DataLife Engine 7: что делает модуль, где он встраивается в административный интерфейс и как безопасно проверить его работу на копии сайта.
Модуль статистики FTP-сервера ProFTPD: что он фиксирует и как этим пользоваться
Практическое руководство по сбору статистики FTP-сервера ProFTPD: какие данные он фиксирует, как читать журналы и какие шаги предпринять при оценке нагрузки.
Deadlink v.1.1 by Gauss: модуль проверки битых ссылок для DLE
Что представляет собой модуль Deadlink v.1.1 by Gauss, какие задачи он решает в DataLife Engine и как безопасно проверить его работу на локальной копии сайта.
Модуль Car Market v2.1.0 для DataLife Engine: назначение и проверка
Что такое модуль Car Market для DataLife Engine, как устроена торговая логика авторынка и какие шаги проверки стоит выполнить перед установкой.
Модуль файлообменник v10 для DLE: как оценить перед установкой
Практические шаги оценки модуля файлообменника для DataLife Engine: что проверить перед установкой, как устроить тестовую среду и какие ограничения стоит учитывать.
Ping-модуль для DLE: как работает отправка уведомлений и что проверить перед установкой
Практический разбор того, как устроены ping-модули для DataLife Engine: что они делают, как проверяется их работа и какие ограничения стоит учитывать при установке.
Модуль случайного анекдота на AJAX для DLE
Как устроена подгрузка анекдота без перезагрузки страницы в DLE: выбор модуля, настройка источника и проверка работы AJAX-запроса.
Принцип отражения
Эффект отражения создаётся дублированием изображения и его переворачиванием по вертикальной оси. В CSS это делается через свойство transform с функцией scaleY(-1), а затем наложенным градиентом, который плавно затухает к нижнему краю отражённой копии.
Практические шаги
Оберните картинку в контейнер, добавьте второй элемент с тем же src и классом отражения. Настройте opacity и linear-gradient, чтобы зеркальная копия не выглядела слишком контрастной. Тестируйте на разных разрешениях экрана, поскольку высота отражения может смещать макет.