text-shadow - rus-shrift - генератор теней CSS / Генераторы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Генераторы

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS, PHP

Язык: Английский

Вес файла: 2.7 Kb

Уникальный ID: 5506

Количество символов:

Посмотрели: 580 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/55/5506.html

Прикреплён файл №2: /stuff/0-0-0-5506-20

Скачали бесплатно: 15 раз

Прокомментировали: 0 раз

Рейтинг: 4.3 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: генератор, text-shadow, Snippet, сниппет, Generator, Bootstrap

Поделился: BootstrapТема

Добавлено: 2022-09-13 в 15:10

Метка: 1663071167

⇄ ⇅

.ts_shadow {
 color: #FFFFFF;
 background-color: #996D6D;
 text-shadow: 3px 5px 2px #474747;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_inset1 {
 color: #616161;
 background-color: #BABABA;
 text-shadow: 1px 1px 0px #E0E0E0;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_inset2 {
 background-color: #888888;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;
 color: transparent;
 text-shadow: rgba(255,255,255,0.6) 0px 3px 3px;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_retro {
 color: #FFFFFF;
 background-color: #F7C1C1;
 text-shadow: 4px 3px 0px #7A7A7A;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_glow {
 color: #FFFFFF;
 background-color: #03592D;
 text-shadow: 0px 0px 10px #FFFFFF;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_neon {
 color: #FFFFFF;
 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
 background-color: #333333;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_fire {
 color: #FFFFFF;
 text-shadow: 0px -1px 4px #FFFFFF, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px #FF0000;
 background-color: #333333;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_blur {
 color: rgba(255, 255, 255, 0.3);
 text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(255, 255, 255, 0.5);
 background-color: #1A1A1A;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}

.ts_hsla {
 color: #F70F3D;
 text-shadow: 0px 0px hsla(0, 50%, 90%, .5), 1px -1px hsla(0, 60%, 50%, .6), 2px -2px hsla(0, 70%, 90%, .7), 3px -3px hsla(0, 80%, 50%, .8), 4px -4px hsla(0, 90%, 90%, .9), 5px -5px hsla(0, 100%, 50%, 1.0);
 background-color: #1A1A1A;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}

.ts_emboss1 {
 color: rgba(0,0,0,0.6);
 text-shadow: 3px 2px 3px rgba(255,255,255,0.2);
 background-color: #6E6E6E;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_emboss2 {
 color: rgba(0,0,0,0.6);
 background-color: #5593C2;
 text-shadow: 2px 6px 5px rgba(0,0,0,0.2), 0px -4px 30px rgba(255,255,255,0.4);
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_emboss3 {
 color: #277A4F;
 background-color: #277A4F;
 text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_sharp {
 color: #D9D9D9;
 background-color: #BABABA;
 text-shadow: 0px 4px 5px #2E2E2E;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_classic {
 color: #005900;
 background-color: #FFFCA8;
 text-shadow: 2px 2px 0px #FFFCA8, 4px 4px 0px #9C9C9C;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_3d1 {
 color: #FFFFFF;
 background-color: #DCE0B3;
 text-shadow: 1px 3px 0px #969696, 1px 13px 5px #ABA8A8;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
.ts_3d2 {
 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,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.15), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.1);
 color: #FFFFFF;
 background-color: #5593C2;
 border: 6px solid #FFFFFF;
 box-shadow: 0px 0px 6px 2px #7A7A7A;
 -webkit-box-shadow: 0px 0px 6px 2px #7A7A7A;
 -moz-box-shadow: 0px 0px 6px 2px #7A7A7A;
 padding: 10px;
 width: 100%;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 min-height: 100px;
}
</style>

</div>

<div id="div_menu_text_shadow" class="col-md-12">
<div class="col-md-6">
<h4>Эффекты теней text-shadow</h4>
<button id="custom">Эффект text-shadow</button>
<button id="shadow">Эффект text-shadow min</button>
<h4>Готовые эффекты</h4>
<button id="inset1">Inset</button>
<button id="retro">Retro</button>
<button id="glow">Glow</button>
<button id="neon">Neon</button>
<button id="fire">Fire</button>
<button id="blur">Blur</button>
<button id="hsla">Hsla</button>
<br><br>
<button id="emboss1">Simple Emboss</button>
<button id="emboss2">Realistic Emboss</button>
<button id="emboss3">Artistic Emboss</button>
<br><br>
<button id="sharp">Bold &amp; Sharp</button>
<button id="classic">Classic Movie</button>
<br><br>
<button id="3d1">Simple 3D</button>
<button id="3d2">Realistic 3D</button>
</div>

<div class="col-md-6">
<table class="tab-text-shaodw-setting">
<tr>
<td>
Размер шрифта:
</td>
<td style="width: 200px;">
<div id="slider_font_size_72" class="slider">
</div>
</td>
<td>
<span id="lbl_font_size" class="slider_result">36</span>px
</td>
</tr>
<tr>
<td>
Цвет шрифта:
</td>
<td>
<input name="font_color" type="text" value="#FF9191" id="font_color" class="color-picker" style="width: 80px;" />
</td>
</tr>
<tr>
<td>
Цвет фона:
</td>
<td>
<input name="background_color" type="text" value="#787878" id="background_color" class="color-picker" style="width: 80px;" />
</td>
</tr>
<tr class="custom">
<td>
Цвет тени:
</td>
<td>
<input name="text_shadow_color" type="text" value="#030303" id="text_shadow_color" class="color-picker" style="width: 80px;" />
</td>
</tr>
<tr class="custom">
<td>
Горизонтальное смещение:
</td>
<td>
<div id="slider_bs_horizontal_length_25" class="slider">
</div>
</td>
<td>
<span id="lbl_slider_bs_horizontal_length" class="slider_result">4</span>px
</td>
</tr>
<tr class="custom">
<td>
Вертикальное смещение:
</td>
<td>
<div id="slider_bs_vertical_length_25" class="slider">
</div>
</td>
<td>
<span id="lbl_slider_bs_vertical_length" class="slider_result">4</span>px
</td>
</tr>
<tr class="custom">
<td>
Размытость:
</td>
<td>
<div id="slider_bs_blur_radius_25" class="slider">
</div>
</td>
<td>
<span id="lbl_slider_bs_blur_radius" class="slider_result">4</span>px
</td>
</tr>
</table>
<div id="div_result_display">Готовый код для применения</div>
</div>

</div>

</div>

BootstrapTema

text-shadow - rus-shrift - генератор теней CSS

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0