Здравствуйте. В прошлой статье я рассказывала о тенях для блоков. Сегодня рассказ будет о тенях для текста. Текстом мы пользуемся везде и поэтому разговор о том куда добавить красивый текст, мне кажется бессмысленным, но всё же перечислю некоторые места:
- Для заголовков
- Объявлений
- Выделения главного в тексте
- Для поздравлений
- и так далее.
https://css3gen.com/text-shadow/ - простая тень
https://html-css-js.com/css/generator/text-shadow/ - много интересных вариантов тени
https://tamali.net/instrument/html-css/css-text-shadow/
https://sdelatlending.ru/css-ten-teksta-generator
https://cssgenerator.org/text-shadow-css-generator.html
https://makingcss.com/text-shadow.html - множественная тень
http://ilyakhasanov.ru/onlajn-servisy/css-generatory/sozdat-ten-u-teksta
https://angrytools.com/css-generator/text-shadow/ - много разных генераторов
https://cssportal.com/css3-text-shadow-generator/
https://protocoder.ru/css/strokeTextGen - обводка текста
http://doodlenerd.com/css3-generator/text-shadow-generator
http://new.s-sd.ru/ - генератор длинных теней
http://atmpl.ru/publ/css3/text_shadow/30-1-0-105 - тень радуга
https://www.html-code-generator.com/css/text-shadow-generator.php - есть готовые коды
Коды, предложенные ниже, можно добавить в текстовый гаджет или в статью в режиме ХТМЛ в редакторе блога. Можно оформить кодом название блога, для этого в шаблон блога, в стили (перед тегом ]]></b:skin>) добавляем код в виде:
h1 {
ваш код
}
Текст и тени
Примеры интересных теней у текста:
<style>
text.demonstration-text-in {
font-size:4em;
color:#666666;
}
text.demonstration-text-in:before {
content:attr(data-text-demonstration);
color:transparent;
text-shadow:1px 1px 2px #fff;
position:absolute;
}
</style>
<text class="demonstration-text-in" data-text-demonstration="Тень для текста">Тень для текста</text>
<style>Красным выделила цвета теней.
.txt_shadow {
font-size: 50px;
color: #e2e2e2;
font-family: Arial Black, Gadget, sans-serif;
text-shadow: 3px 3px 1px rgb(163, 163, 163),
4px 4px 1px rgb(100,192,148),
5px 5px 1px rgb(156,224,88),
6px 6px 1px rgb(209,176,7),
7px 7px 1px rgb(207, 174, 5),
8px 8px 1px rgb(224,140,145),
9px 9px 1px rgb(244,0,161),
10px 10px 1px rgb(206,38,54),
11px 11px 1px rgb(205,113,80),
12px 12px 16px rgb(127,255,0);
}
</style>
<div class="txt_shadow">
Радужная тень</div>
Код:
Код:
Код:
Код:
Код:
Код:
<style>
.txt_shadow-1 {
font-size: 50px;
color: #ff8500;
font-family: Arial Black, Gadget, sans-serif;
text-shadow: 3px 3px 1px rgb(255,183,0),
4px 4px 1px rgb(253,181,0),
5px 5px 1px rgb(251,179,0),
6px 6px 1px rgb(249,177,0),
7px 7px 1px rgb(247,175,0),
8px 8px 1px rgb(245,173,0),
9px 9px 1px rgb(243,171,0),
10px 10px 1px rgb(241,169,0),
11px 11px 1px rgb(239,167,0),
12px 12px 1px rgb(237,165,0);
}
</style>
<div class="txt_shadow-1">Длинная тень</div>
Код:
<style>
.my_tekst {
margin: 40px auto;
text-align: center;
padding: 20px 10px 24px;
color: #131313;
font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
background-color: #e7e5e4;
letter-spacing: .15em;
text-transform: uppercase;
text-shadow:
1px -1px 0 #767676,
-1px 1px 1px #737272,
-2px 2px 1px #767474,
-3px 3px 1px #787777,
-4px 4px 1px #7b7a7a,
-5px 5px 1px #7f7d7d,
-6px 6px 1px #828181,
-7px 7px 1px #868585,
-8px 8px 1px #8b8a89,
-9px 9px 1px #8f8e8d,
-10px 10px 1px #949392,
-11px 11px 1px #999897,
-12px 12px 1px #9e9c9c,
-13px 13px 1px #a3a1a1,
-14px 14px 1px #a8a6a6,
-15px 15px 1px #adabab,
-16px 16px 1px #b2b1b0,
-17px 17px 1px #b7b6b5,
-18px 18px 1px #bcbbba,
-19px 19px 1px #c1bfbf,
-20px 20px 1px #c6c4c4,
-21px 21px 1px #cbc9c8,
-22px 22px 1px #cfcdcd,
-23px 23px 1px #d4d2d1,
-24px 24px 1px #d8d6d5,
-25px 25px 1px #dbdad9,
-26px 26px 1px #dfdddc,
-27px 27px 1px #e2e0df,
-28px 28px 1px #e4e3e2;
}
</style>
<p class="my_tekst">Ещё длинная тень</p>
Код:
<style>
.my_tekst {
margin: 40px auto;
text-align: center;
padding: 20px 10px 20px;
color: #000;
font: 400 40px/40px 'Fredoka One', sans-serif;
letter-spacing: 4px;
background-color: #eee; /* цвет фона */
text-shadow: 0 -3px 0 #ddd,
0 3px 0 #111,
-3px 0 #666,
3px 0 #666,
-3px -3px 0 #999,
3px -3px 0 #999,
3px 3px 0 #333,
-3px 3px 0 #333;
text-transform: uppercase;
}
</style>
<p class="my_tekst">Металлический отлив тени</p>
Код:
<style>
.my_tekst {
margin: 40px auto;
text-align: center;
padding: 14px 10px 34px;
color: white;
font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
background-color: lavender; /* цвет фона */
text-shadow: 0px 3px 0px #b2a98f, /* цвет тени */
0px 24px 2px rgba(0,0,0,0.1),/* цвет тени */
0px 34px 30px rgba(0,0,0,0.1);/* цвет тени */
}
</style>
<p class="my_tekst">Парящий текст</p>
<style>
@import url('https://fonts.googleapis.com/css?family=Syncopate:700');
.my_tekst {
margin: 40px auto;
text-align: center;
padding: 20px 10px 20px;
color: white;
font: 700 40px/1.1 'Syncopate', sans-serif;
background-color: skyblue;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0, 0.10),
0 0px 5px rgba(0,0,0, 0.10),
0 1px 3px rgba(0,0,0, 0.30),
0 3px 5px rgba(0,0,0, 0.20),
0 5px 10px rgba(0,0,0, 0.25),
0 10px 10px rgba(0,0,0, 0.20),
0 20px 20px rgba(0,0,0, 0.15);
text-transform: uppercase;
}
</style>
<p class="my_tekst">Текст 3D</p>
<div class="txt_shadow0">
Тень с обводкой</div>
<style>
.txt_shadow0 {
font-size: 72px; /* размер шрифта */
font-weight: bold;
color: #999; /* цвет букв */
text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f; /* цвет тени */
}
</style>
<div class="ananglyph">
Анаглиф - стереоэффект</div>
<style>
.ananglyph {
font-size: 72px;
color: #333;
text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}
</style>
<div class="txt_shadow11">
Огненная тень</div>
<style>
.txt_shadow11 {
font-size: 72px;
color: #fff;
font-weight: bold;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}
</style>
<div class="txt_shadow10">Все эффекты тени в одной статье перечислить и показать не реально, к тому же если тени совместить с анимацией или другими эффектами, то этому можно посвятить цикл статей.
Винтажная тень</div>
<style>
.txt_shadow10 {
font-size: 72px;
color: #fff;
font-weight: bold;
text-shadow: 4px 4px 0px #ccc, 6px 6px 0px #707070;
}
</style>
Комментарии со спамом удаляются.