http://codepen.io/tianzi77/pen/ZGPmgR
在codepen上面看到的一个效果,我承认我是一个偏向审美的页面仔。如此效果却被同事说她并不喜欢玩样式。。。
看看简介的html结构:
<h1 class="gradient1">知不知对你倾上万缕爱意</h1>
<p class="gradient2">Love is there in side,Make life warm and strong.</p>
在看这高大上的样式,简直惊醒梦中人:
body {
background: #04161f;
font-family: '微软雅黑',"Lato", sans-serif;
margin: 3em auto;
max-width: 70em;
}
.gradient1 {
display: inline-block;
font-size: 96px;
margin: 0;
opacity: 0.9;
background: white;
color: black;
position: relative;
text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
}
.gradient1::before,
.gradient1::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.gradient1::before {
background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670);
content: '';
display: block;
mix-blend-mode: screen;
}
.gradient1::after {
content: "知不知对你倾上万缕爱意";
background: #04161f;
color: white;
mix-blend-mode: multiply;
}
.gradient2 {
text-align: center;
margin: 1em auto;
width: 10em;
background: white;
color: black;
position: relative;
text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
}
.gradient2::before,
.gradient2::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.gradient2::before {
background: -webkit-radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
content: '';
display: block;
mix-blend-mode: screen;
}
.gradient2::after {
content: "Love is there in side,Make life warm and strong.";
background: #04161f;
color: white;
mix-blend-mode: multiply;
}
大概看了一下,里面的样式确实玩的很新颖。
text-shadow可以设置几个方向的文字阴影。
before和after 的使用。
渐变背景linear-gradient
mix-blend-mode: multiply; 文字和图片混合模式,multiply指的是渐变,screen的话混合,设置normal来解除混合。
大概就这些点吧~