Благодаря последним достижениям в CSS, у нас теперь есть доступ к мощным методам стилевого оформления, включая тени от ящиков, закругленные углы, градиенты фона и т. Д. Однако в настоящее время у нас нет возможности применять градиенты к самому тексту. К счастью, с небольшим количеством хитрости, мы можем усилить этот эффект — по крайней мере в браузерах webkit! Я покажу вам, как в сегодняшнем видео быстрый совет.
4 минуты: видеоурок
Подпишитесь на нашу страницу YouTube, чтобы посмотреть все видеоуроки!
Предпочитаете смотреть это видео на Screenr ?
Окончательный код
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<title>Text Gradients</title>
<link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>
<style>
body {
background: #292929;
padding: 1em;
}
h1 {
position: relative;
font-size: 70px;
margin-top: 0;
font-family: ‘Lobster’, helvetica, arial;
}
h1 a {
text-decoration: none;
color: #666;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h1:after {
content : ‘Hello World’;
color: #d6d6d6;
text-shadow: 0 1px 0 white;
}
</style>
</head>
<body>
<h1> <a href=»#»> Hello World </a> </h1>
</body>
</html>
|
Первоначально я изучил эту технику у ребят из NiceWebType.com . Обязательно посетите их сайт, чтобы узнать больше! Так что ты думаешь?