最近,设计出了带浮雕效果的按钮,然后需要用到制作条纹背景。
原来做的背景一般是渐变的,没有这种psd里面的浮雕效果。
要做的是中间的这个绿色的带浮雕的按钮
页面是响应式的,所以要求浮雕效果根据页面的尺寸的变化还是一样的。
源代码:
.home_turnslia.a_pop{
display
:
block
;
font-size
:
2.2
rem;
color
:
rgba
(
255
,
255
,
255
,
.8
)
;
padding
:
1.2
rem 1rem;
background
: -moz-linear-gradient
(
top
,
#95dc3c
50
%
,
#5cb225
50
%
)
;
background
: -webkit-linear-gradient
(
top
,
#95dc3c
50
%
,
#5cb225
50
%
)
;
background
: -o-linear-gradient
(
top
,
#95dc3c
50
%
,
#5cb225
50
%
)
;
background-size
:
100
%
5
0
%
;
text-shadow
:
-1
px
0
px
0
#95c97a
,
1
px
1
px
0
transparent
,
1
px
1
px
0
#95c97a
;
border
:
1
px
solid
#c7dfa5
;
border-radius
:
.4rem
;
box-shadow
:
-2
px
0
5
px
#c7dfa5
,
0
-2
px
5
px
#c7dfa5
,
0
2
px
5
px
#c7dfa5
,
2
px
0
5
px
#c7dfa5
;
letter-spacing
:
2
px
;
}
这是我原来做写的,由于页面的拉伸,条纹效果就变成了不是从中间开始隔断了。
然后改良成立这样的:
.home_turns
li
a
.a_pop
{
display
:
block
;
font-size
:
2.2
rem;
color
:
rgba
(
255
,
255
,
255
,
.8
)
;
padding
:
1.2
rem 1rem;
background
: -moz-linear-gradient
(
top
,
#95dc3c
50
%
,
#5cb225
50
%
)
;
background
: -webkit-linear-gradient
(
top
,
#95dc3c
50
%
,
#5cb225
50
%
)
;
background
: -o-linear-gradient
(
top
,
#95dc3c
50
%
,
#5cb225
50
%
)
;
background-size:100%100%;
text-shadow
:
-1
px
0
px
0
#95c97a
,
1
px
1
px
0
transparent
,
1
px
1
px
0
#95c97a
;
border
:
1
px
solid
#c7dfa5
;
border-radius
:
.4rem
;
box-shadow
:
-2
px
0
5
px
#c7dfa5
,
0
-2
px
5
px
#c7dfa5
,
0
2
px
5
px
#c7dfa5
,
2
px
0
5
px
#c7dfa5
;
letter-spacing
:
2
px
;
}
将background-size中的第二个值改为100%。再测试就无误了。
本来做渐变的时候我一般参考的是这个网址
虽然我很想可以直接写 出来但是每次都忘了,要不就是直接从原来网页的样式扣过来,要不就是直接在打开这个网页拿代码改色值。
虽然这样很不好,暂时我也觉得,记不住。
可能原来没有遇到过这种需求吧,我也以为背景里面没有制作这种条纹的功能。
这个网页的下部有制作这种条纹的样式
既然有这种,那么中间断开的也应该有吧。
然后直接查找了css 条纹背景
在这个地址发现了需要的样式。。。。
好吧,没看完我就直接拿了下来,后面的还用不到。
参考
background: linear-gradient(#fb3 50%, #58a 50%);
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
代码是在这段的基础上改的,以后有类似的可以直接用。