Ранее мы уже рассказывали о создании анимации фильтров, но это не всегда оптимальный способ для создания изменений изображений. Для некоторых эффектов, таких как воспроизведение проявления фотографии Polaroid, может понадобиться менее шаблонный подход. Нам не нужно, чтобы этот эффект изменял внешние поля изображения, что произошло бы, если бы мы просто добавили свойство границы изображению. Вместо этого создадим рамку с помощью блока:

<div id="polaroid"></div>

У этого элемента задано фоновое изображение, и блок смасштабирован так, чтобы соответствовать ему, а также широкая внутренняя тень с большим значением распространения применена вместе с фильтром для создания выцветшей фотографии:

div#polaroid {
        margin: 0 auto;
        border: 25px solid #e3e4d3;
        border-bottom-width: 50px;
        transition: 3s box-shadow ease-in;
        box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset,
                0 0 3px 6px rgba(0, 0, 0, 0.07);
        width: 50%;
        padding-top: 50%;
        background-image: url(christine-adams.jpg);
        background-size: cover;
        filter: sepia(50%);
}

Вторая внешняя тень отделяет фотографию от ее фона. При наведении указателя мыши изменим значения свойства тени блока и уменьшим значения фильтра для создания выцветшей фотографии:

div#polaroid:hover {
        box-shadow: 0 0 100px 0 rgba(29, 25, 4, 0.8) inset,
                0 0 3px 6px rgba(0, 0, 0, 0.07);
        filter: sepia(20%);
}

Наведите указатель мыши или прикоснитесь к сенсорному экрану, чтобы проявить фотографию Polaroid.

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

Автор урока Dudley Storey

Смотрите также: