[도움요청] 블로그 글에 요즘 보이는 하단 이미지 요건 뭔가용?
익명
조회 : 1,013
/* pc화면보기버튼 */
.button {
/* Fallback style */
border: 1px solid rgba(0, 0, 0, 0.3);
color: white;
display: inline-block;
font: bold 1.5em 'Trebuchet MS', Arial, Helvetica, NanumGothic, '나눔고딕', 'Nanum Gothic', Dotum, '돋음';
margin-top: 25px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 0px 0.05em rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 0.05em rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 0.05em rgba(0, 0, 0, 0.4);
}
.button:active {
/* When pressed, move it down 1px */
position: relative;
top: 1px;
}
.button span {
padding: 0.5em 1.5em;
display: block;
border-top: 1px solid rgba(255, 255, 255, 0.5);
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* Pattern settings */
-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(0, 0, 0, 0.05)), color-stop(0.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(0, 0, 0, 0.05)), color-stop(0.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.75, transparent), color-stop(0.75, rgba(0, 0, 0, 0.05))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.75, transparent), color-stop(0.75, rgba(0, 0, 0, 0.05)));
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
background-size: 3px 3px;
}
.button.button-silver {
background: #c5c5c5;
background-image: -moz-linear-gradient(top, #eaeaea, #c5c5c5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eaeaea), to(#c5c5c5));
background-image: -webkit-linear-gradient(top, #eaeaea, #c5c5c5);
background-image: -o-linear-gradient(top, #eaeaea, #c5c5c5);
background-image: linear-gradient(to bottom, #eaeaea, #c5c5c5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c5c5c5');
}
.button.button-silver:active {
background: #c5c5c5;
}
