3D текстовая тень в адаптивном стиле CSS
 | |
| В статье представлен материал по созданию текстового эффекта в 3D, который выполнен при помощи HTML и CSS для оригинального логотипа и заголовка. Сейчас надписью, которая исполнена в 3D мало кого удивишь, но вот к данным знакам закрепить тень, и уже совершенно по другому все смотрится. Ведь не секрет, что текстовые эффекты CSS, способные дать тот обзор или виденье, которое будет красиво вписано, или просто незабываемо. Как раз наш вариант под все формулировки подходит, если у тебя светлый сайт, то вероятно нужно задуматься по смени логотипа или сделать стильные разделы. И вес здесь будет небольшой, да здесь присутствуют тени, но сами знаки не такие большими будут представляться. А так, если говорить кратко, то это специфический текстовый эффект, который по своим формам будет идеально входить на любую тематическую площадку сайта, а также для определенных тем. Так виден на небольшом экране:  Установка: HTML Код <h1 data-text="shadow">ZORNET.RU - адаптивная модель</h1> CSS Код h1 { font-family: 'Ставите свой шрифт в название, sans-serif; text-transform: uppercase; color: #ddd8d8; font-size: 10vw; background: linear-gradient(-90deg, rgb(189 189 189) 0%, rgb(215 215 215) 100%); line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: rgb(239 237 237 / 0%); position: relative; } h1:before { content: attr(data-text); -webkit-background-clip: none; -webkit-text-fill-color: black; position: absolute; z-index: -1; filter: blur(14px); transform: skew(67deg, 0) translate(-20%, 15%) scaleY(0.5); -webkit-mask-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); padding: 0 22px; } Также не нужно забывать, что стилистике заданные параметры на адаптивность, где на любом мобильном аппарате, данный текст будет смотреться просто великолепно. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |