CSS 3 + HTML 5는 웹의 미래입니다. 비록 많은 브라우저가 이에 대한 부분적인 지원을 제공하기 시작했지만 아직 공식적으로 출시되지는 않았습니다. 이 기사에서는 웹의 미래를 달성하는 데 도움이 될 수 있는 5가지 CSS3 기술을 소개합니다. 현재 이러한 기술은 공식 클라이언트 프로젝트에 사용되어서는 안 됩니다. 개인 블로그 사이트, 웹 디자인 커뮤니티 또는 클라이언트가 불평하지 않는 상황에 더 적합합니다.
1. 둥근 모서리 효과
CSS3의 가장 일반적으로 사용되는 새로운 기능 중 하나는 둥근 모서리 효과입니다. 표준 HTML 정사각형 개체에는 90도 정사각형 모서리가 있습니다.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
단일 모서리도 둥글게 만들 수 있지만 Mozilla와 Webkit의 구문은 약간 다릅니다.
-moz-border-radius-topleft: 20px;
-moz
-border-radius-bottomleft
: 10px;
-webkit-border-top -rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit
-border-bottom-rightright-radius: 10px
; Firefox, Safari, Chrome
2. 그래픽 테두리
이름에서 알 수 있듯이 그래픽 테두리는 이미지를 객체로 사용할 수 있게 해주는 테두리입니다.
border: 5px solid #cccccc:
-webkit-border-image: url(/images/border-image.png) ) 5peat;
-moz-border-image: url(/images/border-image.png) 5repeat;
border-image: url(/images/border-image.png
) 5repeat;
테두리 이미지 정의는 테두리로 사용할 이미지의 양을 브라우저에 알려줍니다. 테두리 이미지는 각 가장자리에 대해 개별적으로 설정할 수도 있습니다.
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border- top -rightright-image
border-right-image
지원 브라우저: Firefox 3.1, Safari, Chrome
3. 블록 섀도우 및 텍스트 섀도우.
좋아
하면서도 싫어했던 것이었습니다. 이제 CSS3를 사용하면 24 Ways 웹사이트와 같이 이 기능을 사용하는 웹사이트가 이미 있습니다.
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
처음 두 속성은 그림자의 X / Y 변위를 설정하며 여기서는 10px이고 세 번째 속성은 흐림을 정의합니다. 그림자 정도, 마지막 것은 그림자의 색상을 설정합니다. 텍스트 그림자는 다음과 같이 설정할 수도 있습니다:
text-shadow: 2px 2px 5px #ccc;
지원되는 브라우저: Firefox 3.1, Safari, Chrome(Box Shadow만 지원), Opera(텍스트 그림자만 지원). 녹색 세 가지 파란색 색상의 마지막 값은 투명도를 나타냅니다. 또한 불투명도를 사용하여 투명도를 얻을 수도 있습니다. (현재 이 기술은 주로 라이트 박스 효과에 사용됩니다 - 번역기)
4. RGBA를 사용하여 투명도 효과를 얻습니다.
현재 웹 디자인의 투명도 효과는 주로 PNG 이미지에 의해 달성됩니다(그러나 IE 브라우저-번역기에서는 잘 지원되지 않습니다). CSS3에서는 투명도 효과를 직접 얻을 수 있습니다.
rgba(200, 54, 54, 0.5)
; 배경:
rgba(200, 54, 54, 0.5);
색상: #000
;
지원되는 브라우저: Firefox , Safari, Chrome, Opera(불투명도) 및 IE7(불투명도, 수정 포함)
5. @Font-Face를 사용하여 사용자 정의 글꼴을 구현합니다
.웹 디자인에는 Arial, Helvetica, Verdana, Georgia 및 Comic Sans와 같은 비교적 안전한 여러 글꼴이 있습니다(중국어, 일반적으로 말하면 Song 왕조가 유일하게 안전한 글꼴입니다. 이제 CSS3의 @font-face를 사용합니다). 폰트를 직접 지정할 수는 있는데 저작권 문제로 인해 실제로 사용할 수 있는 폰트가 제한되어 있습니다. (게다가 거대한 중국어 폰트도 해결하기 어려운 문제 - 번역기입니다.)
구문은 다음과 같습니다:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype')
}
지원되는 브라우저: Firefox 3.1, Safari, Opera 10 및 IE7(수고가 좀 걸립니다. 문제가 두렵지 않다면 이 기능을 IE에서 구현할 수 있습니다. IE에서 글꼴 작업 만들기를 참조하세요.)
CSS3은 아직 개발 중이지만 위에서 언급한 기능은 이미 사용 가능합니다. 일부 브라우저, 특히 Safari에서 사용됩니다. 불행하게도 Safari는 주류 브라우저가 아닙니다.
Firefox는 현재 대규모 사용자 기반을 보유하고 있으며, 앞으로 출시될 Firefox 3.1에서는 많은 CSS3 효과를 지원합니다. Firefox 사용자는 업그레이드에 대한 의욕이 높기 때문에 많은 사용자가 CSS3의 새로운 기능을 미리 경험할 수 있습니다.
구글 크롬은 올해 막 출시됐다. 웹킷 엔진을 기반으로 하기 때문에 사파리와 매우 유사하다. 사파리는 주로 맥 시장에서 사용되기 때문에 크롬이 윈도우 시장의 공백을 메울 수 있을 뿐이다.
통계에 따르면 2008년 11월 현재 사용자의 44.2%가 Firefox를 사용하고 있으며, 3.1%는 Chrome을, 2.7%는 Safari를 사용하고 있습니다. 이는 CSS3의 일부 기능이 이미 웹 디자인계에서 거의 절반의 인터넷 사용자를 지원할 수 있음을 의미합니다. 비율은 약 73.6%로 더 높을 수 있습니다(Blog.SpoonGraphics에서 제공한 데이터)
6. 부정적인 요소
위에 설명된 CSS3 기능은 귀하의 웹사이트에 탁월한 결과를 가져오지만 여전히 고려해야 할 몇 가지 부정적인 요소가 있습니다.
Internet Explorer: 46% 인터넷에서는 이러한 효과를 볼 수 없으므로 중요한 디자인에는 이러한 것들을 사용하지 마십시오. 또한 이러한 효과가 작동하지 않는 경우 대체 디자인을 사용할 수 있는지 확인하십시오.
CSS 유효성 검사 문제: 이러한 CSS3 기능은 현재 최종 버전이 아닙니다. 다양한 브라우저가 이러한 기능을 구현하기 위해 서로 다른 태그를 사용하므로 스타일 시트에 대한 유효성 검사 문제가 발생할 수 있습니다.
비대해진 코드: 브라우저마다 서로 다른 정의 구문을 사용하기 때문에 CSS 코드는 결국 매우 비대해집니다.
부적절한 사용: 이러한 효과를 부적절하게 사용하면 특히 그림자 효과의 경우 부정적인 결과를 초래할 수 있습니다.
이 글의 해외 출처: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
중국어 번역 출처: COMSHARP CMS 공식 홈페이지(35km) 번역)