CSS3 ви позволява да бъдете креативни и да експериментирате с дизайна си, за да създадете красиви и уникални уеб страници. Една област на дизайна, с която CSS ви позволява да работите, е типографията.

Можете да използвате шрифтово семейство и текстова сянка свойства за създаване на прости, но забележителни ефекти. Може би вече знаете за основните приложения на текстова сянка в CSS. Въпреки това, можете да създадете широка гама от стилове с тези свойства.

В тази статия ще научите ефективен начин за създаване на различни текстови ефекти на сянка с помощта на HTML и CSS.

Първи стъпки с HTML и CSS

Можете да копирате и поставите тези примери за код, за да получите какъвто и ефект на текстова сянка, който предпочитате. Започнете със създаване на index.html

index.html

 сянка №01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>
 сянка #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stylesheet"
/>
 сянка №03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/>
 сянка #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/>
 сянка №05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/>
 сянка №06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/>
 сянка №07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="stylesheet"
/>

style.css

тяло {
преобразуване на текст: главни букви;
линия-височина: 1;
подравняване на текста: център;
размер на шрифта: 5rem;
дисплей: решетка;
междина: 4rem;
}

Сега нека да преминем през 11 примера за сянка на текст, които да изпробвате.

Свързано: Как да промените текста на вашия уебсайт със свойството на семейство шрифтове CSS

Мистик

Mystic е стъклен стил, който дава хладен преходен ефект, без да се използва трансформирайте Имот. Това е супер прост, но естетически приятен ефект за смел и ориентиран към растеж уебсайт.

Изход

HTML

 Сянка №01 
Мистик

CSS

тяло {
цвят на фона: #5e5555;
}
.mystic {
семейство шрифтове: '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);
буквен интервал: 1rem;
позиция: относителна;
}
.sprint:: след {
съдържание: 'спринт';
позиция: абсолютна;
отгоре: 215px;
вдясно: 300px;
}

Бодлив

Този ужасяващ бодлив текстов ефект използва шрифта „Eater“. Можете да опитате да преместите текстова сянка вместо това в долния десен ъгъл.

Изход

HTML

 сянка №06 
Бодлив

CSS

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

Codystar

Текстовата сянка може да действа като замъглено, но видимо очертание на текста. Този ярък ефект прави чудеса с шрифта „Codystar“.

Изход

HTML

 сянка №06 
Codystar

CSS

.codystar {
семейство шрифтове: 'Codystar', курсив;
тегло на шрифта: получер;
цвят: 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', sans-serif;
размер на шрифта: 10rem;
линия-височина: 1;
подравняване на текста: център;
}
.kingdom--shadow:: преди {
цвят: #000;
съдържание: attr(данни-текст);
margin-top: 0.7rem;
позиция: абсолютна;
transform: перспектива (205px) rotateX(38deg) мащаб (0,84);
z-индекс: -1;
}

Кодер

Това светло и позитивно текстова сянка ефектът предава самоосъзнаваща се и мотивирана личност на уебсайта. Можете да го добавите към вашия уебсайт, за да създадете прост опушен вид.

Изход

HTML

 сянка №09 


Яжте 

Спи 

код 

Повторете

CSS

тяло {
цвят на фона: #5e5555;
}
div {
семейство шрифтове: Verdana, Geneva, Tahoma, sans-serif;
допълване: 40px;
поле: 0px автоматично;
тегло на шрифта: получер;
линия-височина: 5.8rem;
подравняване на текста: ляво;
цвят: rgb (94, 94, 94);
} 
.coder-life {
текстова сянка: 5px 5px #ffff00;
филтър: падаща сянка(-10px 10px 20px #fff000);
}

Елегантен

Ако обичате минимализма, тогава този ефект на текстова сянка е идеален. Тъй като използва голям размер на шрифта, ние намалихме буквен интервал и приложи текстова сянка свойство за създаване на този ефект.

Изход

HTML

 сянка №10 


с
з
r
а
д
д
з
а

CSS

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

Игрив

Тънките и смели контури правят този текст привлекателен и жив. Можете да си играете с текстова сянка свойство без радиус на размазване на различни позиции. Текстовите сенки се прилагат за всички знаци, включително HTML обекти като ♥. Можете да използвате a Референтна диаграма на обекта на символа да проучи допълнително.

Изход

HTML

 сянка №11 
Кодирането е ♥

CSS

.игрив {
семейство шрифтове: 'Baloo Tamma', курсив;
цвят: #fff;
буквен интервал: 0.2rem;
текстова сянка: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Продължавайте да експериментирате с разширени ефекти на сянка

Текстовите сенки са лесен и ефективен начин да подобрите своя уеб дизайн и да направите уебсайта си визуално привлекателен. Можете също така да експериментирате с различни ефекти на сянка. Можете да научите повече за ефектите на падаща сянка, за да продължите своето CSS пътуване.

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

Naincy е специализирана в изграждането на високо отзивчиви уебсайтове и ефективна стратегия за съдържание заедно с уеб копия. Тя е технически писател на свободна практика, който следи остро актуалните технологии.

Още от Naincy Mourya