Эффекты длинной тени для текста на CSS
 | |
| Вероятно, что длинная тень не потеряет своей актуальности и также безусловно всегда будет популярна на плоском дизайне сайта. Так как ее можно применить как на заголовке, но больше всего делают в месте, где нужно обратить внимание, но и под стилистику всегда можно настроить, чтоб отлично вписалась, а точнее дополняла основной стиль. Также многие могли заметить этот созданный элемент на стилистике интерфейса, как кнопки или иконках, которые прописывают в тексте. Что с уверенностью можно сказать, что будет частью дизайна на сайте. В современном мире, а точнее сейчас нам не нужно подключать фотошоп и на нем выводить изображение, так как все можно выполнить на CSS3, что отлично справится и будет изначально идти адаптивным на различные мобильные носители. Не чего сложного в этом нет, здесь всего лишь достаточно одного лишь прописать простой свойство text-shadow, которое отвечает в CSS за этот функционал, хоть и визуально. Для того, чтоб показать или проиллюстрировать все это, что можно создать, для начало нужно подготовить несколько не очень сложных примеров, что как раз будут на свойствах text-shadow, которое выведет стильных эффект длинной тени, как для знаков или текста. Приступаем к установке: HTML Код <h2 class="evarious-mecnanic">ZORNET.Ru</h2> CSS Код .evarious-mecnanic { color: #f9f5f5; line-height: 1.5; letter-spacing: .1em; margin: 14px 0; font-size: 7vw; font-weight: lighter; text-transform: uppercase; text-shadow: 1px 1px 8px rgba(10, 10, 10, 0.08), 2px 2px 1px rgba(8, 8, 8, 0.075), 4px 4px 1px rgba(12, 12, 12, 0.07), 6px 6px 1px rgba(12, 12, 12, 0.065), 8px 8px 1px rgba(10, 10, 10, 0.06), 10px 10px 1px rgba(8, 8, 8, 0.055), 12px 12px 1px rgba(8, 8, 8, 0.05), 14px 14px 1px rgba(10, 10, 10, 0.045), 16px 16px 1px rgba(14, 14, 14, 0.04), 18px 18px 1px rgba(14, 14, 14, 0.035), 20px 20px 1px rgba(14, 14, 14, 0.03), 22px 22px 1px rgba(12, 12, 12, 0.025), 24px 24px 1px rgba(12, 12, 12, 0.02), 26px 26px 1px rgba(0, 0, 0, .015), 28px 28px 1px rgba(4, 4, 4, 0.01), 30px 30px 1px rgba(10, 10, 10, 0.005), 32px 32px 1px rgba(12, 12, 12, 0.0025), 34px 34px 1px rgba(10, 10, 10, 0.002), 36px 36px 1px rgba(12, 12, 12, 0.0015), 38px 38px 1px rgba(12, 12, 12, 0.001); } Здесь вы можете самостоятельно экспериментировать, так как будет представлен стиль, и из него вы уже сами можете выстроить ту тень, которая вам нужна. Это можете сделать ее как можно заметнее, это добавить цветовой палитры, где также увеличить или наоборот выставить не такую длинную, так как нужно учитывать, что можно много места занять. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |