Как сделать эффект стопки бумаги
Добавил пользователь Morpheus Обновлено: 04.10.2024
Я использую Angular Material Design и пытаюсь создать эффект стопки бумаги, как показано в приведенной ниже ссылке codepen:
3 ответа
Решение 1: если вы включите background: none !important; в вашем собственном CSS для элемента body вы можете снова увидеть стопку бумаги (обратите внимание на использование! Важно, так как CSS из углового материала загружается после вашего собственного).
Решение 2: Вы можете настроить z-index из .letter (который также будет регулировать z-индекс .letter:before а также .letter:after ) чтобы все отображалось поверх фона тела. Даже z-index из 1 сделает свое дело.
К сожалению в этом случае .letter:before а также .letter:after будет оказано над .letter так что это будет выглядеть так, как будто верхняя часть вашей стопки немного кривовата. Вы можете найти объяснение, почему это происходит, со ссылкой на соответствующую часть спецификации в этом вопросе. Однако, если вы выберете это решение, вы всегда можете сделать так, чтобы стек отображался так, как вам нужно, с небольшим манипулированием поворотами и позициями различных элементов
Итак, для начала мы скажем пару слов о данном эффекте. На самом деле, замысловатого в этом ничего нет. Более того, в одной из наших предыдущих статей мы уже использовали данный эффект, только в другом проекте. Чтобы не путать вас еще больше, скажем только, что данный эффект правильно называется текстурой. Т.е., вам нужно будет применить особую бумажную текстуру, чтобы фотография приобрела соответствующий бумажный эффект. Но не будем забегать наперед и расскажем вам обо всем по порядку.
У вас откроется табличка с настройками данного эффекта. Высоту тиснения поставьте примерно на 10-15 (ориентируйтесь непосредственно, под свой рисунок), а эффект – выкрутите примерно на середину строчки. Угол делайте на свое усмотрение.
Оба показателя выкручиваем примерно на 80%, чтобы бумага из серой стала белой. При необходимости вы можете добавить желтизны, чтобы имитировать эффект именно старой бумаги. Делается это также, в корректирующем слое, в параметрах цвета.
Как видите, у вас появилась практически натуральная бумага, слегка измятая. Теперь вам нужно объединить оба слоя (корректирующий и тот, который с градиентом) при помощи комбинации горячих клавиш Ctrl+E и все, слой готов для дальнейшего использования в фотошопе.
Вам останется только добавить фотографию в программу и грамотно ее совместить со слоем мятой бумаги (при помощи режима наложения), но это, как говорится, уже совсем другая история.
Я использую Angular Material Design, и я пытаюсь создать эффект стека бумаги, как указано в следующей кодированной ссылке:
Solution 1: If you include background: none !important; in your own CSS for the body element you can see the paper stack again (note the use of !important since the angular-material CSS is loaded after your own).
Solution 2: You can adjust the z-index of .letter (which will also adjust the z-index of .letter:before and .letter:after ) to make everything display on top of the body background. Even a z-index of 1 will do the trick.
К сожалению, в этом случае .letter: before и .letter: после будет отображаться над .letter , чтобы он выглядел так, как если бы верхняя бумага вашего стека немного криво. Вы можете найти объяснение, почему это происходит со ссылкой на соответствующую часть спецификации в этом вопросе . Если вы выберете это решение, вы всегда можете сделать стек, как вы хотите, с небольшим количеством манипуляций с вращениями и позициями различных элементов
Одиночное изображение, вставленное в страницу HTML, с помощью только CSS можно сделать в виде стопки полароидных фотографий. нужно только использовать псевдо-элементы.
Выше приведенное изображение демонстрирует эффект, который является целью нашего урока. Его можно использовать как для отдельных картинок, так и для галерей, повышая их визуальную привлекательность.
Попробуем воспроизвести эффект только средствами CSS с использованием минимума разметки HTML.
Для эффекта нужен только контейнер div с картинкой внутри. Также добавим контейнеру класс, который будет соответствовать определенному эффекту.
Стили верхнего изображения
Зададим стили для верхнего изображения:
Так как планируется использовать данный эффект в галереях, то изображения будут смещаться влево, а также устанавливается поле 50px для формирования интервала между ними. Высота и ширина устанавливается фиксированной 200px х 200px.
Устанавливаем относительное позиционирование, потому что позже мы будем использовать абсолютное позиционирование для псевдо-элементов.
Также формируем тонкую рамочку вокруг картинки с использованием тени.
Наше изображение должно выглядеть вот так:
Первый псевдо-элемент
Теперь пришло время добавить первый элемент в стопку. Нужно, чтобы он выглядел как еще одно изображение под верхней картинкой. Решим задачу с помощью псевдо-элемента :before, для которого будут использоваться идентичные стили.
Добавим в код псевдо-элемент:
Такая синтаксическая конструкция добавляет еще один элемент, для которого можно устанавливать стили, в структуру документа. Зададим теже свойства, что и для верхнего изображения:
Ключевым моментом является отказ от загрузки изображения. Иначе для каждой картинки придется иметь три ее копии! Так как основная часть псевдо-элемента будет скрыта, то можно использовать фон для достижения нужного эффекта.
Сейчас наш код выдаст следующий результат:
Псевдо-элемент интерферирует с верхним изображением. Для исправления ситуации нужно сделать позиционирование и сдвинуть псевдо-элемент вниз, используя z-index :
Абсолютное позиционирование позволяет разместить псевдо-элемент точно в том месте, где нужно относительно верхнего изображения. Также мы используем поворот, что создать иллюзию стопки картинок.
Второй псевдо-элемент
Пришло время для добавления третьего элемента в нашу композицию. Для него используем псевдо-элемент :after . Все выше изложенные соображения действуют и здесь. Отличия заключаются только в цвете фона, координатах позиционирования и величине угла поворота.
В итоге мы имеем следующий вид нашей картинки:
Продолжаем
В описании идеи изображения в галерее имели разный вид стопок. Для формирования окончательного решения нам нужно сделать несколько классов, которые будут различаться позиционированием и углами поворота псевдо-элементов.
Нужно создать несколько классов, которые будут иметь иметь общую часть. А для формирования правил общей части можно воспользоваться специальным селектором, который облегчит работу, но и создаст условия для поддержки и модификации кода:
Теперь можно создать сколько угодно вариантов оформления стопок в виде классов, имена которых начинаются на stack . Для демонстрации сделаем три класса:
Теперь код удобно модифицировать, так как все свойства сгруппированы в одном месте. И легко добавить новый вариант стопки.
Совместимость с браузерами
Тестирование показало, что выше описанный код работает в Safari, Firefox, Chrome, Opera и IE9+. В IE7 выводится просто галерея изображений без эффекта стопки, что является приемлемым результатом.
Для IE8 нужно приметь трюк, чтобы скрыть псевдо-элементы. Тогда браузер будет выводить простую галерею изображений, как и IE7.
5 последних уроков рубрики "CSS"
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Читайте также: