CSS3 позволяет проявлять творческий подход и экспериментировать с дизайном для создания красивых и уникальных веб-страниц. Одна из областей дизайна, с которой вам позволяет работать CSS, - это типографика.

Вы можете использовать семейство шрифтов а также текстовая тень свойства для создания простых, но замечательных эффектов. Возможно, вы уже знаете об основных приложениях тени текста в CSS. Однако с помощью этих свойств вы можете создавать широкий спектр стилей.

В этой статье вы узнаете, как эффективно создавать различные эффекты тени текста с помощью HTML и CSS.

Начало работы с HTML и CSS

Вы можете скопировать и вставить эти примеры кода, чтобы получить тот эффект тени текста, который вам больше нравится. Начните с создания index.html файл и style.css

index.html

 тень # 01 


href = " https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel = "таблица стилей"
/>
 тень # 02 


href = " https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel = "таблица стилей"
/>
 тень # 03 


href = " https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel = "таблица стилей"
/>
 тень # 04 


href = " https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel = "таблица стилей"
/>
 тень # 05 


href = " https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel = "таблица стилей"
/>
 тень # 06 


href = " https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel = "таблица стилей"
/>
 тень # 07 


href = " https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel = "таблица стилей"
/>

style.css

тело {
преобразование текста: прописные буквы;
высота строки: 1;
выравнивание текста: центр;
размер шрифта: 5rem;
дисплей: сетка;
разрыв: 4 бэр;
}

А теперь давайте рассмотрим 11 примеров теней для текста, которые вы можете попробовать.

Связанный: Как изменить текст вашего веб-сайта с помощью свойства CSS font-family

мистика

Mystic - это стеклянный стиль, создающий крутой переходный эффект без использования преобразовать имущество. Это супер простой, но эстетичный эффект для смелого и ориентированного на рост веб-сайта.

Выход

HTML

 Тень # 01 
мистика

CSS

тело {
цвет фона: # 5e5555;
}
.мистика {
семейство шрифтов: 'Bowlby One', курсив;
цвет: rgba (255, 255, 255, 0,596);
текстовая тень: 20px 0px 10px rgb (0, 0, 0);
}

Монотонный

Это игривый текстовый эффект с использованием шрифта «Monoton». Вы можете поиграть с цветом текста и теней, чтобы они соответствовали основным цветам вашего сайта.

Выход

HTML

 Тень # 02 
Монотонный

CSS

.monoton {
семейство шрифтов: Monoton, курсив;
размер шрифта: 15rem;
цвет: rgb (255, 0, 0);
непрозрачность: 0,5;
тень текста: 0px -78px rgb (255, 196, 0);
}

Банджи

Это крутой стиль с использованием шрифта «Bungee Shade». В сочетании с темным фоном он производит грубый эффект с подозрением.

Выход

HTML

 тень # 03 
Банджи

CSS

тело {
цвет фона: # 222;
}
.bungee {
семейство шрифтов: 'Bungee Shade', курсив;
цвет: rgb (160, 12, 12);
непрозрачность: 0,9;
тень текста: -18px 18px 0 rgb (66, 45, 45);
}

Радиоактивный

Вы можете использовать этот эффект для сигналов тревоги или опасности. В нем используется шрифт Rampart One.

Выход

HTML

 тень # 04 
Радиоактивный

CSS

тело {
цвет фона: # 27292d;
}
.radioactive {
семейство шрифтов: 'Rampart One', курсив;
цвет: rgb (97, 214, 43);
непрозрачность: 0,6;
тень текста: -18px -18px 20px rgb (87, 255, 9);
}

Спринт

В этом текстовом эффекте используется шрифт «Faster One», текстовая тень собственность, и ::послепсевдоэлемент с тем же содержанием, что и текст. Это создает эффект «удвоения».

Выход

HTML

 тень # 05 
Спринт

CSS

тело {
цвет фона: # 27292d;
}
.sprint {
семейство шрифтов: «Faster One», курсив;
размер шрифта: 10rem;
цвет: rgba (255, 0, 242, 0,322);
тень текста: -20px -108px 0px rgba (255, 255, 255, 0,445);
межбуквенный интервал: 1бэр;
положение: относительное;
}
.sprint:: after {
content: 'спринт';
позиция: абсолютная;
верх: 215 пикселей;
вправо: 300 пикселей;
}

Колючий

Этот ужасающий колючий текстовый эффект использует шрифт Eater. Вы можете попробовать переместить текстовая тень вместо этого в правом нижнем углу.

Выход

HTML

 тень # 06 
Колючий

CSS

.prickly {
семейство шрифтов: 'Eater', курсив;
тень текста: -18px -18px 2px # 777;
}

Codystar

Тень текста может действовать как размытый, но видимый контур текста. Этот яркий эффект творит чудеса со шрифтом Codystar.

Выход

HTML

 тень # 06 
Codystar

CSS

.codystar {
семейство шрифтов: 'Codystar', курсив;
font-weight: жирный;
цвет: rgb (55, 58, 255);
тень текста: 1px 1px 10px RGB (16, 72, 255), 1px 1px 10px RGB (0, 195, 255);
}

Королевство

Вы можете добиться авторитетной типографики с этим эффектом тени. Он использует ::до псевдоэлемент и преобразовать свойство отклонять тень.

Выход

HTML

 тень # 08 
Королевство

CSS

тело {
цвет фона: # 5e5555;
}
.Королевство {
цвет белый;
семейство шрифтов: Impact, Haettenschweiler, Arial Narrow Bold, без засечек;
размер шрифта: 10rem;
высота строки: 1;
выравнивание текста: центр;
}
.kingdom - shadow:: before {
цвет: # 000;
содержание: attr (текст данных);
верхняя маржа: 0,7 бэр;
позиция: абсолютная;
трансформация: перспектива (205 пикселей), поворот по оси X (38 градусов), масштаб (0,84);
z-индекс: -1;
}

Кодер

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

Выход

HTML

 тень # 09 


Есть 

Спать 

Код 

Повторить

CSS

тело {
цвет фона: # 5e5555;
}
div {
семейство шрифтов: Verdana, Geneva, Tahoma, sans-serif;
отступ: 40 пикселей;
маржа: 0px авто;
font-weight: жирный;
высота строки: 5,8 бэр;
выравнивание текста: слева;
цвет: rgb (94, 94, 94);
} 
.coder-life {
тень текста: 5px 5px # ffff00;
фильтр: падающая тень (-10px 10px 20px # fff000);
}

Элегантный

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

Выход

HTML

 тень # 10 


s
час
р
а
d
d
час
а

CSS

.elegant {
семейство шрифтов: Impact, Haettenschweiler, Arial Narrow Bold, без засечек;
размер шрифта: 10rem;
межбуквенный интервал: -1 бэр;
цвет белый;
тень текста: -18px 8px 18px # b4bbbb;
}

Игривый

Тонкий и жирный контур делает этот текст привлекательным и живым. Вы можете поиграть с текстовая тень свойство без радиуса размытия в разных положениях. Текстовые тени применяются ко всем символам, включая объекты HTML, такие как ♥. Вы можете использовать Справочная таблица по персонажам для дальнейшего изучения.

Выход

HTML

 тень # 11 
Кодирование ♥

CSS

.playful {
семейство шрифтов: 'Baloo Tamma', курсив;
цвет: #fff;
межбуквенный интервал: 0,2 бэр;
text-shadow: -2px -2px 0px # 888,
4px 4px 0px # 888,
7px 7px 0px # 888;
}

Продолжайте экспериментировать с расширенными эффектами теней

Текстовые тени - это простой и эффективный способ улучшить ваш веб-дизайн и сделать его визуально привлекательным. Вы также можете поэкспериментировать с различными теневыми эффектами. Вы можете узнать больше об эффектах падающей тени, чтобы продолжить свой путь к CSS.

Наинси Мурья (Опубликовано 15 статей)

Naincy специализируется на создании высокочувствительных веб-сайтов и эффективной контентной стратегии наряду с веб-копиями. Она - внештатный технический писатель, внимательно следящий за тенденциями в технологиях.

Ещё от Naincy Mourya