3D Текст CSS с Использованием Text-Shadow

3D Текст CSS с Использованием Text-Shadow

3D Текст CSS с Использованием Text-Shadow

Игры с тенями для текста, для некоторых — что-то глупое, но, на самом деле, иногда, результат имеет непосредственное практическое применение, как в случае с этим маленьким Тутором. Мы собираемся создать 3D Текст CSS для редактируемого текста, используя только свойство text-shadow. А потом мы добавим что-то веселое, немного :hover эффекта. Читайте дальше, бесстрашные кодеры …

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

Другим важным аспектом text-shadow (и box-shadow тоже, если на то пошло) то, что вы можете использовать несколько теней для одного элемента, разделенных запятой. Количество теней, для любых целей, безграничны. Именно этот аспект делает наш мини-учебник возможным.

Во-первых, мы стилизуем очень простой HTML-элемент: в тег h2. Вы можете поместить любой текст в нем.

<h2>Создание 3D Текста</h2>

Теперь перейдем к более сложной задаче — CSS.

Здесь, важно понять свойство text-shadow. Как вы можете видеть, мы используем 10 текстовых теней, и расположили их в шахматном порядке, отдаляя каждую тень в 1px, относительно смещений от х к у. Методику можно объяснить так, один слой — один раз. Цвета тоже немного изменим, начиная с более темных цветов у основания и делаем немного светлее ближе к самому тексту.

h2 {
  margin:100px auto;
  text-align:center;
  font-size:100px;
  color:white;
  position:relative;
  left:0;
  text-shadow:
    1px 1px 0px #c4dbe2,
    2px 2px 0px #b4d1d9,
    3px 3px 0px #a6c6cf,
    4px 4px 0px #94b8c3,
    5px 5px 0px #87aeb9,
    6px 6px 0px #7aa3af,
    7px 7px 0px #6d97a3,
    8px 8px 0px #618b98,
    9px 9px 0px #56818e,
    10px 10px 0px #4c7683,
    15px 15px 25px rgba(0,0,0,.9);
    transition: .5s ease-in-out;
}
 
h2:hover {
    left:20px;
  text-shadow:
    -1px 1px 0px #c4dbe2,
    -2px 2px 0px #b4d1d9,
    -3px 3px 0px #a6c6cf,
    -4px 4px 0px #94b8c3,
    -5px 5px 0px #87aeb9,
    -6px 6px 0px #7aa3af,
    -7px 7px 0px #6d97a3,
    -8px 8px 0px #618b98,
    -9px 9px 0px #56818e,
    -10px 10px 0px #4c7683,
    -15px 15px 25px rgba(0,0,0,.9);
}

Последняя вещь, это наш :hover эффект. Мы делаем его с помощью переходов CSS3. Каждая созданная тень text-shadow получает противоположное перемещение по своей оси х к y; например, если х тени был 15px, то при наведении курсора мыши становится -15px. Hover переход, который мы применили одушевляет и оживляет 3D текст CSS, на самом деле это несложный, но довольно симпатичный эффект.

3D Текст CSS с Использованием Text-Shadow

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *