3D куб с текстом с использованием только CSS
Иллюзия 3D куба с текстом на гранях может быть создана с использованием современных техник CSS без использования JavaScript, изображений или SVG. Свойства трансформации для создания наклонов и вращений прямоугольников с тенями можно скомбинировать для формирования куба.
Как это устроено
Разметка HTML очень проста. Каждая грань имеет свой собственный элемент div
, класс и содержание. Верхняя грань требует дополнительной разметки для обеспечения соответствующей трансформации.
<div class="cube"> <div class="topFace"> <div> Содержание </div> </div> <div class="leftFace"> Содержание </div> <div class="rightFace"> Содержание </div> </div>
В нашем примере геометрия куба будет немного грубоватой и неточной, но, в целом, он будет похож на самый настоящий куб.
Каждый из прямоугольников будет иметь слегка отличающийся оттенок серого для создания иллюзии глубины изображения. В примере левая грань находится в тени. Каждая грань позиционируется абсолютно по отношению к контейнеру cube. Размер граней - 200 x 200 px, включая 10 px на отступы.
.cube { position: relative; top: 200px; } .rightFace, .leftFace, .topFace div { padding: 10px; width: 180px; height: 180px; } .rightFace, .leftFace, .topFace { position: absolute; }
Теперь немного геометрии. Левую и правую грани отклоним на ±30? от вертикальной оси, а правую грань дополнительно сдвинем на 200px, накладывая два ребра для создания угла, выравненного по центру.
.leftFace { -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); background-color: #ccc; } .rightFace { -webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); background-color: #ddd; left: 200px; }
Верхняя грань создается несколько сложнее: ее надо наклонить, масштабировать, повернуть и позиционировать. Наклон выполняется на –30? от вертикальной оси, а получившийся угол должен быть повернут по часовой стрелке на 60?. Поворот угла приводит к изменению ориентации содержания.
Мы используем простой способ для создания верхней грани без использования математики и в результате получаем форму бриллианта. Теперь надо позиционировать и масштабировать заполнение формы верхней грани. Для использованных углов коэффициент масштабирования по направлению оси Y составляет 1.16. Размер шрифта нужно уменьшить на тотже коэффициент.
.topFace div { -webkit-transform: skewY(-30deg) scaleY(1.16); -moz-transform: skewY(-30deg) scaleY(1.16); background-color: #eee; font-size: 0.862em; } .topFace { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); top: -158px; left: 100px; }
Окончательный вид CSS кода будет таким:
.cube { position: relative; top: 200px; } .rightFace, .leftFace, .topFace div { padding: 10px; width: 180px; height: 180px; } .rightFace, .leftFace, .topFace { position: absolute; } .leftFace { -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); background-color: #ccc; } .rightFace { -webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); background-color: #ddd; left: 200px; } .topFace div { -webkit-transform: skewY(-30deg) scaleY(1.16); -moz-transform: skewY(-30deg) scaleY(1.16); background-color: #eee; font-size: 0.862em; } .topFace { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); top: -158px; left: 100px; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/p45jRYYtEs4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Неудача — это не единичное внезапное событие. Ваш провал не возникает внезапно. Напротив, неудача появляется, когда вы совершаете одни и те же ошибки изо дня в день. Джим Рон |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.