» »

Красивый 3D текст с эффектом с помощью CSS

Красивый 3D текст с эффектом с помощью CSS

Здесь вы можете создать не просто текстовой формат в 3D, то также к нему закрепляем эффект анимации, который появится при наведении клика. А точнее заключается в том, если вы вправо поведете клик, то все знаки аналогично будут повторять и делать наклон в аналогичную сторону. Также работает по правой стороне, так, что только был добавлен клик, что теперь можно самостоятельно поставить ссылку на переход. Но некоторые применяют такой обзор, который безусловно становится ярким, и все внимание идет на нее, то можно создать в рекламном характере. Это не все, где можно применить, так как возможности большие.

Это пример текста, созданного только с помощью CSS3, который используйте несколько свойств затемнение для создания текста на любом элементе HTML. Никаких дополнительных HTML, никаких дополнительных головных болей, просто потрясающий соус. Время от времени я делаю что-то глупое, что может фактически иметь непосредственное практическое применение. Мы собираемся создать 3D-эффект для редактируемого текста, используя только свойство text-shadow. В этом пособии показано, как создавать действительно интересные и вдохновляющие текстовые эффекты с использованием затемнение в CSS3.

Во-первых, важно понять свойство text-shadow. Это почти идентично box-shadow, за исключением того, что оно применяется к тексту. Это делает его очень удобным для затемнения с более сложными формами. Другой важный аспект теневой тени состоит в том, что вы можете иметь несколько теневых свойств для одного элемента, разделенных запятой.

Это при проверки на работоспособность, где Demo страница преложена

Красивый текст в 3D оформление

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.

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

Демонстрация
09.07.2018 Загрузок: 1 Просмотров: 137 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar