Как сделать градиент для текста посредством только css?

@stts · Регистрация: 24.04.2013

Студворк — интернет-сервис помощи студентам

Народ столкнулся с проблемой нужно для заголовка только посредством цсс зделать градиент, гугл мне ничем не помог, может есть у кого опыт, можете подсказать, градиент нужно сделать хотя бы под мозилу, оперу и хром ИЕ совершенно не интересует... буду очень благодарен за помощь

@conformist · 25.04.2013, 01:07

перепишу

Сообщение от stts

Народ! Столкнулся с проблемой, нужно для заголовка, только посредством css, сделать градиент, искать не хочу, может есть у кого опыт, можете подсказать, градиент нужно сделать хотя бы под FF, Opera и Chrome, IE совершенно не интересует... Буду очень благодарен за помощь

http://www.xiper.net/collect/h... -text.html

а если заголовки не динамические, то очень удобно делать это картинками. реализация посредством кода - несметное количество ссылок

@stts · 25.04.2013, 01:16 **[ТС]**

я говорил что меня интересует решение без использования картинки, в данном примере представлено решение с использованием бекграунда картинкой, да и в прочем решение уже найдено. если кому интересно будет могу выложить

@conformist · 25.04.2013, 01:21

можно и так

CSS
1
2
3
4
5
6
7
8
background:#979898;         background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk3OTg5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzA0MDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
         background:-moz-linear-gradient(top,  #979898 0%, #030404 100%);
         background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#979898), color-stop(100%,#030404));
         background:-webkit-linear-gradient(top,  #979898 0%,#030404 100%);
         background:-o-linear-gradient(top,  #979898 0%,#030404 100%);
         background:-ms-linear-gradient(top,  #979898 0%,#030404 100%);
         background:linear-gradient(to bottom,  #979898 0%,#030404 100%);
         filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#979898', endColorstr='#030404',GradientType=0 );

@stts · 25.04.2013, 11:59 **[ТС]**

я обошелся вот таким способом

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.white-gradient {
            position:relative;
            text-align: center ;
        }
        .white-gradient:after {
            content: '';
            position:absolute;
            display:block;
            top:0;
            left:0;
            height:100%;
            width:100%;
            background: -moz-linear-gradient(top,  #EEEEEE 0%, rgba(255,255,255,0) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EEEEEE), color-stop(100%,rgba(255,255,255,0)));
            background: -webkit-linear-gradient(top, rgb(238, 238, 238) 0%,rgba(255,255,255,0) 100%);
            background: -o-linear-gradient(top, rgb(238, 238, 238) 0%,rgba(255,255,255,0) 100%);
            background: -ms-linear-gradient(top, rgb(238, 238, 238) 0%,rgba(255,255,255,0) 100%);
            background: linear-gradient(top, rgb(238, 238, 238) 0%,rgba(255,255,255,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
        }

HTML5
1
 <H1 class="white-gradient">ЗАКАЗАТЬ ЗВОНОК</H1>

@Asmovr · 11.04.2015, 14:17

Помогите пожалуйста, есть следующая конструкция:

HTML5
1
2
3
4
5
<div id="header" class="outer">
<div class="header-part">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
</div>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.header-part {
    margin-left: 0;
    margin-top: 30px;
    width: 467px;
}
#header {
    height: 121px;
    margin-top: 0;
}
#header h1 {
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 32px;
    margin-bottom: 0 !important;
    margin-top: 0;
    padding: 0px 17px 3px 41px;
    text-transform: none;
    text-transform: uppercase;
}
#header h1 a, #header h1 a:visited {
    color: #0A0;
    text-decoration: none;
}

И есть следующий CSS градиент, с помощью которого предполагалось придать градиентную окраску тексту bloginfo('name'). Вопрос как? И так, и эдак пытался, получается либо окрашивается фон, либо градиент получается как тень от текста.

CSS
1
2
3
4
5
6
7
background: -moz-linear-gradient(-45deg, #ffffff 0%, #beddea 0%, #b0d8e8 0%, #ffffff 0%, #ffffff 16%, #89a3ff 50%, #ff7777 83%, #ff7777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(0%,#beddea), color-stop(0%,#b0d8e8), color-stop(0%,#ffffff), color-stop(16%,#ffffff), color-stop(50%,#89a3ff), color-stop(83%,#ff7777), color-stop(100%,#ff7777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#beddea 0%,#b0d8e8 0%,#ffffff 0%,#ffffff 16%,#89a3ff 50%,#ff7777 83%,#ff7777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffffff 0%,#beddea 0%,#b0d8e8 0%,#ffffff 0%,#ffffff 16%,#89a3ff 50%,#ff7777 83%,#ff7777 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffffff 0%,#beddea 0%,#b0d8e8 0%,#ffffff 0%,#ffffff 16%,#89a3ff 50%,#ff7777 83%,#ff7777 100%); /* IE10+ */
background: linear-gradient(135deg, #ffffff 0%,#beddea 0%,#b0d8e8 0%,#ffffff 0%,#ffffff 16%,#89a3ff 50%,#ff7777 83%,#ff7777 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff7777',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

И если не сложно, помогите еще выкинуть мусор из кода

@monochromer · 11.04.2015, 19:26

Для современных браузеров
Techniques for Creating Textured Text
How to Create (Animated) Text Fills

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@stts 0 / 0 / 0 Регистрация: 24.04.2013 Сообщений: 14

	Как сделать градиент для текста посредством только css? 24.04.2013, 23:43. Показов 10070. Ответов 6 Метки нет (Все метки) Народ столкнулся с проблемой нужно для заголовка только посредством цсс зделать градиент, гугл мне ничем не помог, может есть у кого опыт, можете подсказать, градиент нужно сделать хотя бы под мозилу, оперу и хром ИЕ совершенно не интересует... буду очень благодарен за помощь 0

@stts 0 / 0 / 0 Регистрация: 24.04.2013 Сообщений: 14
	25.04.2013, 01:16 [ТС]
	я говорил что меня интересует решение без использования картинки, в данном примере представлено решение с использованием бекграунда картинкой, да и в прочем решение уже найдено. если кому интересно будет могу выложить 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	11.04.2015, 19:26
	Для современных браузеров Techniques for Creating Textured Text How to Create (Animated) Text Fills 0