Я застрял и понятия не имею, как выполнить следующую задачу. Искал в сети, но ничего похожего не нашел.
Это текстовый эффект, которого я хочу добиться:
Как вы можете видеть, он имеет несколько цветов (коричневый посередине и белый по краям). Можно ли добиться чего-то подобного полностью в css и html (если это так, пожалуйста, укажите мне правильное направление) или это достижимо только с помощью с помощью графики?
похоже, что в настоящее время поддерживается только webkit (у FF/IE нет свойства text-fill-color)
h1{
font-size:40px;
font-weight:bold;
font-family:Helvetica,Arial,sans-serif;
margin:0;
padding:0;
float:left;
background:-webkit-linear-gradient(-60deg, #ffffff 0%,#ffffff 25%,#000000 25%,#000000 75%,#ffffff 75%,#ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
это основано на ответе @Blowsie из аналогичного поста
Я никогда не проверял это сам, но я почти на 100% уверен, что это сработает.
h1{
content:'Hello';//this isn't needed but it's your content I'm guessing
mask-image:linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 20%, #000000 20%, #000000 80%, #FFFFFF 80%, #FFFFFF 100%);//WW3
}
Используя расширения webkit соответственно.
Вы можете использовать изображение и свойство CSS background-clip: text для достижения чего-то подобного
http://trentwalton.com/2010/03/24/css3-background-clip-text/
Он все еще находится в разработке и работает только на webkit.
Вы можете комбинировать его с градиентами CSS
http://gradients.glrzad.com/
