Красивый 3D текст с эффектом с помощью CSS
 | |
| Здесь вы можете создать не просто текстовой формат в 3D, то также к нему закрепляем эффект анимации, который появится при наведении клика. А точнее заключается в том, если вы вправо поведете клик, то все знаки аналогично будут повторять и делать наклон в аналогичную сторону. Также работает по правой стороне, так, что только был добавлен клик, что теперь можно самостоятельно поставить ссылку на переход. Но некоторые применяют такой обзор, который безусловно становится ярким, и все внимание идет на нее, то можно создать в рекламном характере. Это не все, где можно применить, так как возможности большие. Это пример текста, созданного только с помощью CSS3, который используйте несколько свойств затемнение для создания текста на любом элементе HTML. Никаких дополнительных HTML, никаких дополнительных головных болей, просто потрясающий соус. Время от времени я делаю что-то глупое, что может фактически иметь непосредственное практическое применение. Мы собираемся создать 3D-эффект для редактируемого текста, используя только свойство text-shadow. В этом пособии показано, как создавать действительно интересные и вдохновляющие текстовые эффекты с использованием затемнение в CSS3. Во-первых, важно понять свойство text-shadow. Это почти идентично box-shadow, за исключением того, что оно применяется к тексту. Это делает его очень удобным для затемнения с более сложными формами. Другой важный аспект теневой тени состоит в том, что вы можете иметь несколько теневых свойств для одного элемента, разделенных запятой. Это при проверки на работоспособность, где Demo страница преложена  HTML Код <h1 style="cursor:pointer;">3D-текст</h1> Количество затемнение, по сути, неограниченное можно выставить, что не нужно увлекаться, должно быть все в норме. Теперь о чуть более сложном CSS: Важная вещь, на которую нужно обратить внимание, это свойство text-shadow. Как вы можете видеть, мы используем 10 текстовых теней, и каждый из них поэтапно находится в шахматном порядке на 1px дальше. Эта техника в основном создает наш 3D-текст, по одному слою за раз. Цвета тоже слегка меняются, начиная с более темного цвета сзади, и когда тени приближаются к фактическому тексту, они слегка ослабевают. CSS Код h1 { margin: 100px auto; text-align: center; font-size: 100px; color: #fffcfc; position: relative; left: 0; text-shadow: 1px 1px 0px #c8e2ea, 2px 2px 0px #b6d9e2, 3px 3px 0px #aaced8, 3px 3px 0px #92b2bb, 4px 4px 0px #789ca7, 5px 5px 0px #769fab, 5px 5px 0px #608590, 7px 7px 0px #5b828e, 7px 7px 0px #4e737d, 8px 8px 0px #4c7683, 10px 10px 18px rgba(12, 12, 12, 0.9); transition: .3s ease-in-out; } h1:hover { left:18px; text-shadow: -2px 2px 0px #c4dbe2, -3px 3px 0px #b4d1d9, -4px 4px 0px #a6c6cf, -5px 5px 0px #94b8c3, -6px 6px 0px #87aeb9, -7px 7px 0px #7aa3af, -8px 8px 0px #6d97a3, -8px 9px 0px #618b98, -9px 10px 0px #56818e, -10px 11px 0px #4c7683, -14px 14px 21px rgba(21, 20, 20, 0.94); } Последнее замечание на эффект зависания: Мы делаем это с переходами CSS3, где каждая текстовая тень перемещается по оси к ее отрицательной копии на: hover; например, если тень была 15px, тогда при наведении она становится -15px. Переход, который мы применили, будет оживляет это изменение, что конечном итоге делает его похожим на вашу перспективу меняется, и это довольно удивительный эффект Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |