당신이 알아야 할 5가지 새로운 CSS3 기술

CSS는 잘 알려져 있고 널리 사용되는 웹사이트 스타일링 언어입니다. 버전 3(CSS3) 계획에는 시간을 절약할 수 있는 몇 가지 새로운 기능이 추가되었습니다. 이러한 효과는 최신 브라우저 버전에서만 지원되지만 이에 대해 아는 것은 여전히 ​​필요하고 흥미롭습니다. Bao Fengbinbin은 이 기사에서 둥근 모서리, 개별 둥근 모서리, 불투명도, 그림자 및 크기 조정 요소 등 CSS의 5가지 흥미로운 신기술을 보여줍니다.

1: 기본 마크

이 튜토리얼을 시작하기 전에 튜토리얼 전체에서 사용될 기본 마크업을 만들어 보겠습니다.

xHTML에는 다음 div 요소가 필요합니다.

#round, CSS3 코드를 사용하여 둥근 모서리를 만듭니다.

#indie, 몇 가지 개별 필렛을 적용합니다.

#opacity는 불투명도를 구현하는 새로운 CSS3 방식을 보여줍니다.

#shadow는 Photoshop을 사용하지 않고 CSS3를 사용하여 그림자 효과를 얻는 방법을 보여줍니다.

#resize, 일부 CSS를 사용하여 크기 조정 효과를 얻는 방법을 보여줍니다.

요약하면 xHTML은 다음과 같아야 합니다.

인용된 내용은 다음과 같습니다. <머리> <본문> ​​​​

기본 CSS 파일을 만들어 보겠습니다.

위에서 볼 수 있듯이 각 div 요소에 300px의 너비와 높이를 지정하고 왼쪽으로 부동하도록 하여 나중에 스타일을 지정할 수 있도록 전체 페이지 div를 남겨 두었습니다.

2: 둥근 모서리

현재 필렛을 생성하는 방법에는 여러 가지가 있지만 모두 번거롭습니다. 가장 일반적인 방법: 먼저 둥근 모서리가 있는 그림을 만들어야 합니다. 그런 다음 많은 html 요소를 만들고 둥근 모서리를 표시하기 위해 배경 이미지를 사용해야 합니다. 당신과 나는 구체적인 과정을 아주 잘 알고 있습니다.

이 문제는 CSS3에서 "border-radius"라는 속성을 사용하여 쉽게 해결됩니다. 먼저 검은색 div 요소를 만들고 여기에 검은색 테두리를 설정합니다. 테두리는 "border-radius" 속성의 효과를 얻기 위한 전제 조건입니다.

이와 같이:

이제 div 요소를 만들었으므로 예상한 대로 높이가 300px이고 각도가 있으며 검은색입니다. 이제 둥근 모서리를 구현하는 코드를 추가해 보겠습니다. 이는 매우 간단하며 코드 두 줄만 필요합니다.

여기에는 Firefox 브라우저의 경우 -moz-, Safari/Chrome 브라우저의 경우 -webkit-이라는 두 개의 유사한 코드 줄을 추가했습니다.

참고: 지금까지 IE 브라우저는 border-radius 속성을 지원하지 않으므로 IE에서 둥근 모서리 효과를 적용하려면 둥근 모서리를 별도로 추가해야 합니다.

border-radius 속성을 문자 그대로 번역하면 Photoshop과 마찬가지로 해당 값이 클수록 둥근 모서리가 커집니다.

3: 개별적으로 둥근 모서리

과거의 습관을 그대로 따르면 시간이 많이 낭비될 것입니다. 이제 CSS3로 빠르게 해결할 수 있습니다!

이제 div의 오른쪽 상단과 오른쪽 하단 모서리를 둥글게 만들고 싶으므로 약간만 수정하면 됩니다.

이 접근 방식이 웹 페이지의 어떤 요소에 사용될지 상상해 보세요. 바로 탭 탐색 버튼입니다!

4: CSS3를 사용하여 불투명도 수정

이제 불투명 효과(해킹)를 구현하기 위해 일반적으로 몇 줄의 코드를 작성할 수 있습니다. 그러나 CSS3는 이 과정을 단순화합니다.

이 코드 줄은 기억하기 쉽습니다. "opacity: value;"만 입력하면 됩니다.

5:그림자 효과

그림자를 얻는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 Photoshop을 사용하여 그림자 이미지를 만든 다음 이를 배경 속성에 적용하는 것입니다. 그러나 CSS3는 작업을 더욱 효율적으로 만들어줍니다. 불행하게도 현재 Safari와 Chrome만이 이 새로운 기능을 지원합니다.

한 줄의 코드만 필요하지만 4가지 다른 값이 있습니다.

이 4개의 값이 무엇을 나타내는지 설명하겠습니다. 처음 3px는 지정된 그림자와 div 요소 사이의 수평(수평) 거리를 나타내고, 두 번째 5px는 그림자와 div 사이의 수직(수직) 거리를 나타냅니다. 세 번째 10px은 그림자의 흐림(포토샵의 페더링과 유사)을 나타내며, 값이 클수록 더 섬세합니다. 최종 값은 그림자의 색상이라는 것을 누구나 알고 있습니다.

최종 그림자 효과 코드;

보시다시피 div에는 흰색 배경, 검은색 테두리, 밝은 회색 그림자가 있습니다.

6:크기 조정

CSS 최신 버전에서는 요소 크기 조정이 가능합니다. (단, 현재는 Safari에서만 지원됩니다.)

이 코드를 사용한 후에는 요소의 오른쪽 하단에 작은 삼각형이 나타나 이 요소의 크기를 조정할 수 있음을 사용자에게 상기시킵니다. 코드는 여전히 매우 간단합니다. 코드 한 줄만 필요하다고 할 수 있습니다. 물론 "max-width", "max-height", "와 같이 이전에 사용했던 일부 속성을 사용할 수도 있습니다. 최소 너비" 및 "최소 높이".

여기서는 resize 및overflow 속성에 대해 주로 설명합니다. resize: 양쪽 모두 크기를 조정할 수 있음을 의미합니다. 이름에서 알 수 있듯이 해당 값에는 가로 및 세로도 포함됩니다. Overflow는 크기 조정 작업이므로 여기서는 auto를 사용합니다.

요약

그렇다면 이 기사에서 무엇을 얻었습니까? 현재 CSS3를 지원하는 브라우저는 소수에 불과하지만 CSS3가 실제로 작업 시간을 더 많이 절약할 것이라는 점은 부인할 수 없습니다. 점진적인 향상에 대한 지식과 이해가 있다면 이 강력한 새 버전의 CSS3를 쉽게 받아들일 것이라고 생각합니다. IE6에 모든 시간을 쏟지 마십시오. 그렇지 않으면 당신은 시대에 뒤떨어진 프론트 엔드 개발 엔지니어가 될 것입니다.