Зеркальное отражение 3D текста с помощью CSS
 | |
| С обновлением стилей и свойство на CSS, то возможности стали просто огромные, где в этом материале представлено зеркальное отражение текста. Что все сделано в формате 3D, где безусловно уже совершенно по другому смотрится. Веб мастеру остается только самостоятельно все выстроить, настолько как хватит фантазий. Здесь вы можете разместить любой текст, который на темном фоне будет отражаться, как от зеркала. Также с присутствием глянца, что визуально этому элементу отлично добавляет оригинальности. Так, что есть возможность построить отличный формат на сайте, а точнее его красиво в уникальном стиле сделать оформление. Размер может варьироваться от самого небольшого, и до бесконечности, только вам нужно изначально саму структуру выставлять, но и отражение делать. Это как по расстоянию, что насколько оно будет далеко, здесь по умолчанию сделано, как в реальности может быть. В этом материале хочется вам предоставить один из многих вариантов текста с отражением, так как можно много вариаций найти, но этот более осмотрительный. Так как все выполнено в 3 D, и здесь при открытии страницы, то сразу будет в глаза кидаться, что его можно применять в рекламном направлении. Не говоря о том, где выставляют логотипы, что полностью созданы на чистом CSS. Чтобы начать процесс 3D, то изначально выбираем палитру цвета, который вам нравится, и примените его к классу. Затем примените слегка темный оттенок цвета в виде текстовой тени. HTML Для начало нужно создать базовую основу HTML и CSS, где будет текстовый объект. Здесь идет подчеркивание, которое будет задействовано в дизайне, где нужно по размеру длинны ставить. Код <div class="kasimpla-showinga"> <span class="gyourumousev">Zornet.Ru</span> <span class="gyourumousev shadow">_________</span> <span class="gyourumousev kislpertun">Zornet.Ru</span> </div> CSS Код .kasimpla-showinga { margin: 0 auto; align-self: center; width: 597px; -moz-perspective: 975px; -webkit-perspective: 975px; perspective: 975px; position: relative; } .gyourumousev { display: inline-block; z-index: 0; position: relative; line-height: 0.61em; height: 0.7em; -moz-transform: rotateY(45deg); -webkit-transform: rotateY(45deg); transform: rotateY(45deg); font-family: 'Bree Serif', serif; font-size: 9em; color: #efecec; text-shadow: white 0.006em 0.006em 1px, rgba(10, 10, 10, 0.15) -3px 7px 10px, #ccc7c7 -1px 1px 1px, #ccc7c7 -2px 1px 1px, #ccc7c7 -3px 1px 1px, #ccc7c7 -4px 1px 1px, #ccc7c7 -5px 1px 1px, #ccc7c7 -6px 1px 1px, #ccc7c7 -7px 1px 1px, #ccc7c7 -8px 1px 1px, #ccc7c7 -9px 1px 1px, #ccc7c7 -10px 1px 1px, #ccc7c7 -11px 1px 1px, #ccc7c7 -12px 1px 1px, rgba(247, 242, 242, 0.6) -5px 2px 100px; } .gyourumousev.kislpertun { z-index: 0; opacity: 0.2; -moz-transform: rotateX(180deg) rotateY(-45deg); -webkit-transform: rotateX(180deg) rotateY(-45deg); transform: rotateX(180deg) rotateY(-45deg); } .gyourumousev.shadow { opacity: 0.6; z-index: 2; color: transparent; letter-spacing: -0.02em; position: absolute; width: 25%; top: 0.44em; left: 0.1em; -moz-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg); -webkit-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg); transform: rotateX(-100deg) rotateY(-5deg) rotateZ(25deg); text-shadow: rgba(8, 8, 8, 0.8) 0 0 30px, rgba(0, 0, 0, 0.8) 0 0 80px, black 0 0 150px, black 0 0 150px, black 0 0 248px, black 0 0 250px, white -0.15em 0.4em 248px; } В материале, как можно подробно рассказано, как использовать текстуру изображения в нескольких слоев, для создания зеркального эффекта. Размышления могут добавить интересное измерение к объектам, придавая прикосновение реализма и придавая им контекст в их окружении. Давайте посмотрим на достижение отражений с помощью CSS, и мы рассмотрим светящееся и кросс-браузерная размытие для хорошей меры. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |