그래디언트 및 화살표가있는 CSS 동적 크기 버튼의 모범 사례

Zurb Foundation 프레임 워크를 사용하고 있으며 텍스트, 배경 그라디언트 및 오른쪽 크기의 동적 인 몇 가지 클릭 유도 문안 버튼을 만들려고합니다. 포인팅 화살표.그래디언트 및 화살표가있는 CSS 동적 크기 버튼의 모범 사례

나는이 작업을 수행하는 세 가지 방법을 생각 할 수 있습니다

는 a 요소가 하나가 기울기를 가지고 있으며, 다른 하나는 오른쪽에 위치한 화살표가 같은 다른 요소와 스타일을 모두 배경을 포장 되세요.
그라데이션 배경이있는 요소 만 HTML에 img로 표시하십시오.
모든 요소에 그라디언트와 화살표가 포함 된 배경 이미지가있는 요소 하나를 사용하십시오. 이러한 옵션의

각각은 어떤 식 으로든 잘못 느낌 -

나는 스타일의 목적을 위해 순수 비 의미 DIV 있습니다.
순전히 문체인데도 내 HTML에는 img가 있습니다.
특히 버튼이 확장 가능한 경우 더러운 솔루션처럼 느껴집니다.

이러한 옵션의 모범 사례는 무엇입니까? 아니면 고려하지 않은 방법이 있습니까? Zurb Columns Scale처럼 올바른 위치에있는 텍스트와 화살표로 버튼의 크기가 잘 조정되도록하려면 어떻게해야합니까?

Muchos gracias! :)

출처

2012-03-31 marc

Firefox 및 Webkit의 경우 CSS3 다중 배경 구문을 사용하여 CSS를 통해 그라데이션 및 배경 이미지를 모두 적용 할 수 있습니다.

.gradAndImg { 
    background-image: url(image.png), -moz-linear-gradient(top, #ffcc00, #ffffff); 
    background-image: url(image.png), -webkit-gradient(linear, left-top, left-bottom, from(#ffcc00), to(#ffffff)); 
}

출처

2012-03-31 18:11:47

답변을 주셔서 감사하지만 브라우저를 대상으로하는 것은 좋은 해결책이 아닙니까? 나는 최선의 관행을 찾고 있었다 ... – marc

제가 질문을 정확히 이해 모르겠지만 당신이 재단을 사용하는 경우 다음 시도가 :

<div class="side-buttons"> 
    <button id="someid" class="nice [red:green:blue:black] button" onclick="someEvent();"/> 
</div>

좋은 클래스는 당신이 얘기 믿는에 그라데이션 유사한 추가 . 사이드 바 클래스는 올바르게 기억하면 버튼 폭을 상속 한 상태로 유지합니다. 즉, 클래스가 "두 개의 열"인 중첩 된 div에서 가져 왔지만 높이는 텍스트에 따라 조정됩니다.

희망이 있습니다. 도움이되었으므로 보유하고있는 코드로 게시 할 수 있습니다.

출처

2012-05-18 04:21:20 Adam

그래디언트 및 화살표가있는 CSS 동적 크기 버튼의 모범 사례

답변

관련 문제