ЦСС3 вам омогућава да будете креативни и експериментишете са својим дизајном како бисте направили прелепе и јединствене веб странице. Једна област дизајна са којом вам ЦСС омогућава да радите је типографија.

Можете користити породица фонтова и текст-сенка својства за стварање једноставних, али изузетних ефеката. Можда већ знате о основним применама сенке текста у ЦСС-у. Међутим, са овим својствима можете креирати широк спектар стилова.

У овом чланку ћете научити ефикасан начин да креирате различите ефекте сенке текста користећи ХТМЛ и ЦСС.

Почетак рада са ХТМЛ-ом и ЦСС-ом

Можете да копирате и налепите ове примере кода да бисте добили ефекат сенке текста који желите. Почните креирањем индек.хтмл фајл и а стиле.цсс фајл. Ово су једине датотеке које ће вам требати да испробате примере, али ћете морати да промените обе датотеке за сваки пример.

индек.хтмл

 сенка #01 


хреф=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
рел="стилесхеет"
/>
 сенка #02 


хреф=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
рел="стилесхеет"
/>
 сенка #03 


хреф=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
рел="стилесхеет"
/>
 сенка #04 


хреф=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
рел="стилесхеет"
/>
 сенка #05 


хреф=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
рел="стилесхеет"
/>
 сенка #06 


хреф=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
рел="стилесхеет"
/>
 сенка #07 


хреф=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
рел="стилесхеет"
/>

стиле.цсс

тело {
тект-трансформ: велика слова;
лине-хеигхт: 1;
тект-алигн: центар;
фонт-сизе: 5рем;
приказ: мрежа;
зазор: 4рем;
}

Сада, хајде да прођемо кроз 11 примера сенке текста да бисте их испробали.

Повезан: Како да промените текст своје веб локације помоћу својства породице ЦСС фонтова

Мистиц

Мистиц је стакласт стил који даје хладан прелазни ефекат без употребе преобразити својство. То је супер једноставан, али естетски пријатан ефекат за храбру веб локацију оријентисану на раст.

Излаз

ХТМЛ

 Схадов #01 
Мистиц

ЦСС

тело {
бацкгроунд-цолор: #5е5555;
}
.мистиц {
фонт-фамили: 'Бовлби Оне', курзив;
боја: ргба (255, 255, 255, 0.596);
тект-схадов: 20пк 0пк 10пк ргб (0, 0, 0);
}

Монотон

Ово је разиграни текстуални ефекат који користи фонт „Монотон“. Можете се поиграти са текстом и бојом сенке како бисте одговарали примарним бојама ваше веб странице.

Излаз

ХТМЛ

 Схадов #02 
Монотон

ЦСС

.монотон {
фонт-фамили: 'Монотон', курзив;
фонт-сизе: 15рем;
боја: ргб (255, 0, 0);
непрозирност: 0,5;
тект-схадов: 0пк -78пк ргб (255, 196, 0);
}

Бунгее

Ово је кул стил који користи фонт „Бунгее Схаде“. У комбинацији са тамном позадином, производи сирови ефекат са осећајем сумње.

Излаз

ХТМЛ

 сенка #03 
Бунгее

ЦСС

тело {
бацкгроунд-цолор: #222;
}
.бунгее {
фонт-фамили: 'Бунгее Схаде', курзив;
боја: ргб (160, 12, 12);
непрозирност: 0,9;
тект-схадов: -18пк 18пк 0 ргб (66, 45, 45);
}

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

Овај ефекат можете користити за знаке упозорења или опасности. Користи фонт „Рампарт Оне“.

Излаз

ХТМЛ

 сенка #04 
Радиоактивна

ЦСС

тело {
бацкгроунд-цолор: #27292д;
}
.радиоактивно {
фонт-фамили: 'Рампарт Оне', курзив;
боја: ргб (97, 214, 43);
непрозирност: 0,6;
тект-схадов: -18пк -18пк 20пк ргб (87, 255, 9);
}

Спринт

Овај текући текстуални ефекат користи фонт „Фастер Оне“. текст-сенка имовине, и ан ::послепсеудо-елемент истог садржаја као и текст. Ово ствара ефекат "удвостручавања".

Излаз

ХТМЛ

 сенка #05 
Спринт

ЦСС

тело {
бацкгроунд-цолор: #27292д;
}
.спринт {
фонт-фамили: 'Фастер Оне', курзив;
фонт-сизе: 10рем;
боја: ргба (255, 0, 242, 0,322);
тект-схадов: -20пк -108пк 0пк ргба (255, 255, 255, 0.445);
проред између слова: 1рем;
положај: релативан;
}
.спринт:: после {
садржај: 'спринт';
позиција: апсолутна;
врх: 215пк;
десно: 300пк;
}

Бодљикав

Овај застрашујући ефекат бодљикавог текста користи фонт „Еатер“. Можете покушати да померите текст-сенка уместо тога према доњем десном углу.

Излаз

ХТМЛ

 сенка #06 
Бодљикав

ЦСС

.бодљикаво {
фонт-фамили: 'Еатер', курзив;
тект-схадов: -18пк -18пк 2пк #777;
}

Цодистар

Сенка текста може деловати као замућена, али видљива контура текста. Овај светао ефекат чини чуда са фонтом „Цодистар“.

Излаз

ХТМЛ

 сенка #06 
Цодистар

ЦСС

.цодистар {
фонт-фамили: 'Цодистар', курзив;
фонт-веигхт: болд;
боја: ргб (55, 58, 255);
тект-схадов: 1пк 1пк 10пк ргб (16, 72, 255), 1пк 1пк 10пк ргб (0, 195, 255);
}

Краљевство

Можете постићи ауторитативну типографију са овим ефектом сенке. Користи се ::пре него што псеудо-елемент и преобразити својство да коси сенку.

Излаз

ХТМЛ

 сенка #08 
Краљевство

ЦСС

тело {
бацкгроунд-цолор: #5е5555;
}
.Краљевство {
бела боја;
породица фонтова: Импацт, Хаеттенсцхвеилер, 'Ариал Нарров Болд', санс-сериф;
фонт-сизе: 10рем;
лине-хеигхт: 1;
тект-алигн: центар;
}
.кингдом--схадов:: бефоре {
боја: #000;
садржај: аттр(подаци-текст);
маргин-топ: 0.7рем;
позиција: апсолутна;
трансформација: перспектива (205пк) ротатеКс(38дег) скала (0,84);
з-индекс: -1;
}

Цодер

Ово светло и позитивно текст-сенка ефекат преноси самосвесну и мотивисану личност веб странице. Можете га додати на своју веб локацију да бисте произвели једноставан задимљени изглед.

Излаз

ХТМЛ

 сенка #09 


Једи 

Спавај 

Код 

Понављање

ЦСС

тело {
бацкгроунд-цолор: #5е5555;
}
див {
фонт-фамили: Вердана, Генева, Тахома, санс-сериф;
паддинг: 40пк;
маргина: 0пк ауто;
фонт-веигхт: болд;
лине-хеигхт: 5.8рем;
тект-алигн: лево;
боја: ргб (94, 94, 94);
} 
.цодер-лифе {
тект-схадов: 5пк 5пк #фффф00;
филтер: дроп-схадов(-10пк 10пк 20пк #ффф000);
}

Елегантан

Ако волите минимализам, онда се овај ефекат сенке текста савршено уклапа. Пошто користи велику величину фонта, смањили смо словни размак и применио је текст-сенка својство за стварање овог ефекта.

Излаз

ХТМЛ

 сенка #10 


с
х
р
а
д
д
х
а

ЦСС

.елегант {
породица фонтова: Импацт, Хаеттенсцхвеилер, 'Ариал Нарров Болд', санс-сериф;
фонт-сизе: 10рем;
проред између слова: -1рем;
бела боја;
тект-схадов: -18пк 8пк 18пк #б4бббб;
}

Разиграни

Танак и подебљан обрис чини овај текст привлачним и живахним. Можете се играти са текст-сенка својство без радијуса замућења на различитим позицијама. Сенке текста се примењују на све знакове, укључујући ХТМЛ ентитете као што су ♥. Можете користити а Референтни графикон карактерног ентитета да истражујем даље.

Излаз

ХТМЛ

 сенка #11 
Кодирање је ♥

ЦСС

.разигран {
породица фонтова: 'Балоо Тамма', курзив;
боја: #ффф;
размак између слова: 0.2рем;
тект-схадов: -2пк -2пк 0пк #888,
4пк 4пк 0пк #888,
7пк 7пк 0пк #888;
}

Наставите да експериментишете са напредним ефектима сенки

Сенке текста су једноставан и ефикасан начин да побољшате свој веб дизајн и учините своју веб локацију визуелно привлачном. Такође можете експериментисати са различитим ефектима сенки. Можете сазнати више о ефектима падајуће сенке да бисте наставили своје ЦСС путовање.

Наинци Моуриа (Објављено 15 чланака)

Наинци се специјализовао за изградњу веб локација са високим одзивом и ефикасне стратегије садржаја заједно са веб копијама. Она је слободни технолошки писац који пажљиво прати трендовске технологије.

Више од Наинци Моуриа