
Привет, друзья. Используя свойство градиент gradient можно не только сделать красивый фон или стили рамок, но и применить его к тексту. Нам не нужно использовать изображения для отображения текста с цветовой градацией. Просто поиграемся со стилями CSS, и такой текст не будет увеличивать загрузку блога.
Градацию CSS можно применить к заголовку блога, заголовку сообщения или другому тексту, чтобы он отличался от другого . Мы можем использовать в заголовке блога, заголовке сообщения, h1, h2, h3, h4, h5 или h6 или в другом тексте,чтобы он стал более ярким.
Посмотрите ниже, гда показываю просто пример с градацией текста из трёх цветов.
Вот такой красивый текст получаем используя свойство градиент
<style>.gradient-text{
background:#00626b;
background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}</style>
Вы можете заменить фон, отмеченный в коде розовым цветом на желаемый. Потом, когда будете писать сообщение добавьте класс gradient-text.
Так примерно
<h3 class="gradient-text">Вот такой красивый текст получаем используя свойство градиент</h3>
А сейчас возьмём градиент рамки (ссылка выше) и текста
Градиентные границы и текст
Код
<div class="gradient-all">Градиентные границы и текст</div>
<style>
.gradient-all {
font-size: 2em;
background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
padding: 0.3em 0.6em ;
border: 3px solid transparent;
border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
border-image-slice: 1;
}
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
padding: 0.3em 0.6em ;
border: 3px solid transparent;
border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
border-image-slice: 1;
}</style>
Играемся дальше и сделаем наш текст полосатым
Полосатый текст
Код
<p class="striped-text">Полосатый текст</p>
<style>.striped-text {
font-family: 'Rubik One', sans-serif;
font-size: 40px;
text-transform: uppercase;
background: repeating-linear-gradient(white, white 2px, #006633 2px, #006633 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #006633;
display: table;
margin: 20px auto;
}</style>
Можно и тень в полосочку сделать
Полосатая тень
Код
<p class="striped-shadow">Полосатая тень </p>
<style>.striped-shadow {
font-family: 'Rubik One', sans-serif;
font-size: 50px;
text-transform: uppercase;
text-shadow: -4px -4px 0px #D2EAD7;
background: repeating-linear-gradient(45deg, #006633, #006633 1px, white 2px, white 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: table;
margin: 20px auto;
}</style>
Мудрим дальше и делаем изображение в тексте
Изображение внутри текста
.izo {
background: url(https://3.bp.blogspot.com/-8HBpQvcFyP0/U3pG2rNbRaI/AAAAAAAAEcM/-2EB2ldKnUY/s200/25042014657.jpg%0A%0A) 100% 50%;
background-size: cover;
}
.izo h2 {
color: #CC0000;
background: #fff;
mix-blend-mode: lighten;
}
</style>
<div class="izo">
<h2>Изображение внутри текста</h2>
Меняйте на своё усмотрение шестизначные значения цветов #12BCB0 текста, тени, рамки. Воспользуйтесь этим редактором.Тут бы только фантазии хватило.
Коды, как обычно вставляем в редакторе сообщения в режиме HTML. Я выше говорила, что можно применить к тегам заголовков. Но это уже через вкладку Тема. Если кто не знает пока то статья для вас. Или спрашивайте в комментариях.
Всем добра и до встречи.
👇
Получайте новые сообщения с блога прямо на почту
Полезные советы, спасибо, Виктория!
ОтветитьУдалитьБуду рада если пригодится.
ОтветитьУдалитьВ Простом шаблоне не работает (((
ОтветитьУдалитьВот примеры тестовый простой родной шаблон Блоггер http://test-tri.blogspot.ru/2018/04/blog-post_26.html
УдалитьКак красиво у Вас все получается! Спасибо, что делитесь своими знаниями с нами! А на каком шаблоне легче реализовать все Ваши фишки и красивости?
ОтветитьУдалитьСпасибо за комментарий. В принципе всё что я пишу и делюсь тестирую на родных блогеровских шаблонах. Вообще они на столько гибкие и пластичные что можно создать полноценный сайт. Вот с последними темами Contempo, Emporio,Soho не экспериментировала. Пробовала кое -что на Notable всё нормально. А так элементарно на всех можно.
Удалить