CSS를 사용하여 HTML 버튼의 스타일을 지정하려고합니다. 따라서 iOS 기기의 홈 페이지에있는 아이콘처럼 반사되는 빛을냅니다. Apple은 이것을 here과 같이 자동으로 아이콘으로 처리합니다. CSS에서 빛나는 것과 비슷한 것이 필요합니다.CSS : iOS 아이콘과 유사한 반사 빛으로 단추를 만드는 방법은 무엇입니까?
11
A
답변
13
this fiddle을 살펴보십시오.
여기에 코드입니다 :
HTML :
<div class="icon">
<div class="shine"></div>
</div>
그리고 CSS :
.icon {
width: 150px;
height: 150px;
border-radius: 30px;
background: red;
float: left;
margin: 50px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}
.shine {
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0); /* IE6-9 */
height: 90px;
width: 150px;
box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 100px 40px;
border-bottom-left-radius: 100px 40px;
}
5
내 예제에서는 이미지 대신 background-color : red를 사용하지만 #icon div에 배경으로 모든 이미지를 넣을 수 있으며 작동해야합니다.
HTML :
합니다 (그라디언트 http://www.colorzilla.com/gradient-editor/ BTW 나는이 멋진 사이트를 사용) :
<div class="icon">
<div class="shine">
</div>
</div>
CSS :
.icon {
width:50px;
height:50px;
background-color: red;
overflow: hidden;
position: relative;
}
.shine {
position: absolute;
top: -70px;
left: -25px;
width:100px;
height:100px;
border-radius: 50px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
이 당신을 위해 작동 희망!
관련 문제
- 1. 동적으로 단추를 만드는 방법은 무엇입니까?
- 2. 누름 단추를 만드는 방법은 무엇입니까?
- 3. iOS 용 facebook 앱과 유사한 사이드 바를 만드는 방법은 무엇입니까?
- 4. ImageMagick을 사용하여 반사 효과를 만드는 방법은 무엇입니까?
- 5. 그룹 문자 메시지에서 단추를 만드는 방법은 무엇입니까?
- 6. J2ME에서 캔버스에 단추를 만드는 방법은 무엇입니까?
- 7. 플래시없이 전체 화면 단추를 만드는 방법은 무엇입니까?
- 8. 동일한 너비의 단추를 만드는 방법은 무엇입니까?
- 9. Android에서 스크롤 배경 화면과 유사한 배경 이미지를 만드는 방법은 무엇입니까?
- 10. iOS 테이블보기를 만드는 방법은?
- 11. iOS에서 선반처럼보기를 만드는 방법은 무엇입니까?
- 12. CSS 새 행에 제출 단추를 배치하는 방법은 무엇입니까?
- 13. CSS 단추를 위로 축소 그림
- 14. CSS 기반 (큰) 따옴표를 만드는 방법은 무엇입니까?
- 15. CSS 컬럼 디자인을 빠르게 만드는 방법은 무엇입니까?
- 16. 스타일러스로 여러 CSS 파일을 만드는 방법은 무엇입니까?
- 17. 여러 단추를 추가하는 방법 iOS> 4?
- 18. iOS : 임시 디렉토리를 만드는 안전한 방법은 무엇입니까?
- 19. iOS 5에서 ARC로 RestKit을 만드는 방법은 무엇입니까?
- 20. iOS 앱용 위젯을 만드는 방법은 무엇입니까?
- 21. iOS : 사각형 내부에 버튼을 만드는 방법은 무엇입니까?
- 22. iOS : UIWebView를 50 % 투명하게 만드는 방법은 무엇입니까?
- 23. iOS 기기 용 JavaScriptCore를 만드는 방법은 무엇입니까?
- 24. 매끄러운 IOS 인터페이스를 만드는 방법은 무엇입니까?
- 25. iOS 개발에 필요한 인증서를 만드는 방법은 무엇입니까?
- 26. IOS 5.0에서 UIPageViewController를 만드는 방법은 무엇입니까?
- 27. 오픈 소스 iOS 프로젝트를 만드는 방법은 무엇입니까?
- 28. VSTO 추가 기능을 호출하는 단추를 만드는 방법은 무엇입니까?
- 29. 여러 해상도로 확장되는 이미지 단추를 만드는 방법은 무엇입니까?
- 30. Expression Blend의 블렌드에서 사용자 지정 단추를 만드는 방법은 무엇입니까?
내가 그라데이션 아니면 내부 그림자를 사용하는 것이 좋습니다 것입니다. –
최근에이 작업을 수행했지만 Google에 해당 기사가 있어야합니다. – Rob