반투명 배경으로 슬라이딩 도어 기술?

광택있는 버튼으로 작업하고 있습니다. 버튼은 다양한 색상과 크기를 가질 수 있습니다. 이것은 지금까지 내가 한 것입니다 :반투명 배경으로 슬라이딩 도어 기술?

.btn-zen-inverse, .btn-zen-inverse:hover{ 
    color: white; 
    background: 
    url("../img/btn_right.png") no-repeat right 0, 
    url("../img/btn_left.png") no-repeat left 0, 
    url("../img/btn_center.png") repeat-x 42px 0; 
    background-color: #273032; 
    background-size: contain; 
    line-height: 50px; 
    margin: 12px 18px 3px 0; 
    padding: 0; 
    border: 2px solid white !important; 
}

참조 된 이미지는 알파 투명합니다. 아이디어는 배경색 속성을 기반으로 색상을 설정하는 것입니다. 이미지에는 몇 가지 다른 속성도 있습니다. 그러나 이는 단지 에스테틱 (estetic)입니다.

이 같은 이미지는 다음과 같은 이미지를 렌더링합니다! 센터 이미지가 이미지의 중앙 부분에서만 보이기를 바랍니다. 당신은 내 CSS에서 볼 수 있듯이. 이것은 big 4 브라우저의 최신 버전에서 perectly 작동해야합니다.

enter image description here

이것은 내가 그것을 같이하고 싶은 것입니다 :

enter image description here

한 suggesion 배경 - 그라데이션이 작업을 수행하는 것입니다. 그럴 수 있다면 패딩/여백 작동 방식과 배경 위치를 똑같이 정의해야합니다. 그게 가능하니?

디자인은 포함 2 국경 : gradiented 하나, 배경의 그라데이션 한 흰색. 및 상단 상단에 1px 두께의 수직 그래디언트가 있습니다.

출처

2012-10-09 Himmators

어쨌든, 디자인을 볼 때 코드 – RomanTheGreat

을 포맷하십시오. 이것은 하나의 선형 그라디언트, 상자 그림자 등 CSS3 속성을 사용하여 수행 할 수 있습니다 – RomanTheGreat

내 나쁜 ... 디자인에 deatils와 업데이트 된 질문 ... – Himmators

이것은 내가 CSS로만 얻을 수있는 것만큼이나 가깝습니다.

IE8에서는 여러 배경을 지원하지 않습니다. 다음 코드도 아니지만 적어도 이미지는 필요하지 않습니다.

button preview

Live demo

HTML :

<a class="button dark" href="#"><span>Prova Zenconomy Gratis</span></a>

CSS :

.button { 
    display:inline-block; 
    border:2px solid; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    line-height:40px; 
    text-decoration:none; 
    font-family:Helvetica,Arial,sans-serif; 
    -webkit-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7); 
    -moz-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7); 
    box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7); 
} 
.button > span { 
    padding:0 40px; 
    display:block; 
    border:3px solid; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
} 
.button.dark { 
    border-color:#FFF; 
    color:#FFF; 
    background:#030303; 
} 
.button.dark > span { 
    border-color:#000; 
    -webkit-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3); 
    -moz-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3); 
    box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3); 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); 
}

2 개 클래스 있도록 (색상과 그라데이션의 레이아웃에 대한 .button 및 .dark)이있다 와이 ou는 귀하의 페이지에 다른 유형의 버튼을 가질 수 있습니다.

출처

2012-10-09 09:42:25 Giona

이것은 훌륭합니다! svg를 살펴보고 싶습니다. 벡터 기반 프로그램에서 여는 방법이 있습니까? – Himmators

예 @KristofferNolgren, [Microsoft SVG Gradient Background Maker] (http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html)로 이동 한 다음 "기존 CSS base64-URL 배경을 붙여 넣으려면 클릭하십시오. 이미지 마크 업 ":-) – Giona

은 성공적으로 파싱되었지만 아무런 반응이 없다고 말합니다. – Himmators

check this code을 검색어로 사용하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
    .btn-zen-inverse, .btn-zen-inverse:hover{ 
    color:#fff; 
    background: 
    url("https://lh4.googleusercontent.com/-V_jjGSjquMg/UHPqq7_FfvI/AAAAAAAAA6s/fK5QEHGzC9I/s128/left.png") no-repeat right 0, 
    url("https://lh4.googleusercontent.com/-V_jjGSjquMg/UHPqq7_FfvI/AAAAAAAAA6s/fK5QEHGzC9I/s128/left.png") no-repeat left 0, 
    url("https://lh3.googleusercontent.com/-JgxTtVru7R8/UHPqq1RgAII/AAAAAAAAA6o/gmfFayABGfQ/s128/center.png") repeat-x 42px 0; 
    background-color: #ff09f9; 
    background-size: contain; 
    line-height: 50px; 
    margin: 12px 18px 3px 0; 
    padding: 0; 
    border: 2px solid white !important; 
    text-align:center 
} 

</style> 

</head> 

<body> 
<div class="btn-zen-inverse">Content</div> 
</body> 
</html>

출처

2012-10-09 09:21:17 AppMobiGurmeet

이 문제는 동일한 부분이 있는데, 가운데 부분이 왼쪽과 오른쪽 부분을 겹쳐서 더 어두워집니다 (알파 레이어 합성물) – Himmators

반투명 배경으로 슬라이딩 도어 기술?

답변

관련 문제