10 (더) CSS 간계 아마 간과 한

웹 개발자가 특정 결과를 얻기 위해 사용할 수있는 CSS 스 니펫이 많으며 콘텐츠를 세로로 정렬하는 것과 같은 작업에 사용할 수있는 CSS 트릭이 있습니다. CSS가 진화하는 엔티티로 변해가고 있으며, 시간과 시간을 다시 알기에 재미있는 CSS 트릭을 발견하게됩니다..

오늘의 글에서, 10 가지 이상의 CSS 속성과 트릭을 모를 수도 있습니다..

1. 수직 쓰기

CSS 속성이 있습니다. 쓰기 모드 이 세 가지 값 중 하나를 받아들입니다. 수평 -tb, 수직 -rl 과 세로 -1r.

수평 -tb 기본값이며 요소에서 일반적인 왼쪽에서 오른쪽으로 가로 텍스트 흐름이 발생합니다..

그만큼 수직선-* 값은 수직 블록 흐름을위한 것으로 브라우저가 텍스트를 위에서 아래로 작성합니다. 에서 수직 -rl, 새 줄이 이전 줄의 왼쪽에 추가되고 그 반대의 줄이 새 줄에 추가됩니다. 세로 -1r.

이것은 유용합니다. 중국어 및 일본어와 같은 언어 표시 일반적으로 위쪽에서 아래쪽으로 쓰여지며, 텍스트를 세로로 표시하여 표 머리글과 같이 가로 공간을 절약하려는 경우에도 사용됩니다..

노트 : 개별 문자의 방향을 제어하려는 경우 텍스트 방향을 사용하여 원하는대로 세로 또는 가로 방향으로 바꿀 수 있습니다.

 -webkit-writing-mode : vertical-rl; -ms-writing-mode : tb-rl; writing-mode : 수직 -rl; 

2. 색 값 재사용

키워드 currentColor ~의 가치를 지니고있다. 색깔 속성과 같은 색상 값을 허용하는 다른 속성에서 사용될 수 있습니다. 배경.

div background : linear-gradient (90deg, currentColor 50 %, black 50 %); ... color : # FFD700; / * currentColor는 # FFD700 * /입니다. 

3. 배경 혼합

요소는 둘 이상의 배경 (배경색 및 여러 배경 이미지)을 가질 수 있습니다. 그만큼 배경 혼합 모드 주어진 블렌딩 모드에 따라 모든 것을 함께 블렌딩합니다. 현재 총 16 개의 혼합 모드가 있습니다..

background-blend-mode : 차이점; 

4. 블렌드 요소

혼합 - 혼합 모드는 겹치는 요소의 내용과 배경을 혼합합니다. Firefox는 Firefox의 모든 모드를 지원하지 않습니다..

믹스 - 블렌드 모드 : 컬러; 

나는 두 가지 요소를 취했다. img 장미의 이미지와 스팬 그래픽 배경과 함께 쌓아서 몇 가지 믹스 - 블렌드 모드를 적용했습니다..

5. 포인터 이벤트 무시

하나의 애트리뷰트를 사용하여 어떤 포인터 이벤트도 무시할 수있는 요소를 만들 수있다. 포인터 이벤트. 줌으로써 포인터 이벤트 의 가치 없음 이는 요소에서 포인터 이벤트에 대한 대상이되는 것을 방지합니다. IE11 + 지원 포함.

다음 데모에서는 위에 쌓인 두 개의 이미지 아래에 체크 박스가 있습니다. 두 이미지 모두 포인터 이벤트 : 없음, 우리가 그 밑에 묻혀있는 체크 박스를 클릭 할 수있게 해줍니다. 체크 박스의 체크 된 상태에 기초하여, 원하는 이미지가 보여지며, 반면에 다른 숨겨진 상태.

6. 분할 상자 장식하기

일반적으로 상자가 분할 될 때 (인라인 요소가 줄 바꿈을 목격하는 경우와 같이), 분할 부분의 가장자리에는 상자 스타일이없고 모양이 얇게 보입니다. 이를 피하기 위해 다음을 사용할 수 있습니다. box-decoration-break : 복제품.

이제 예제와 초기 "크리스마스가 지평선에 있음"알림을 따라 가려면 여기에 산타의 순록이 모두 하나의 형식으로 입력되어 있습니다. 스팬! 호! 호! 호!

노트: 비록 현대 IE는 지원하지 상자 - 장식 - 휴식, 분할 부분 테두리의 가장자리에서 렌더링이 부드럽 지 않고 배경이 잘리는 것처럼 보입니다. 그러나 그것은 렌더링한다. 상자 그림자 멋지게, 그래서 나는 테두리와 배경 둘 다에 박스 그림자를 사용했다. IE의 가장자리에 가로로 채워져 있지 않아서 공백을 채울 수도 있습니다..

7. 테이블 요소 접기

가시성 : 축소 행 및 열과 같은 테이블 요소에 대해 만들어진 속성입니다. 다른 용도로 사용된다면 가시성 : 숨김. 크롬은 마치 그것을 취급합니다. 숨겨진 심지어 테이블 요소의 경우.

할당 할 때 가시성 : 축소 테이블 요소에서 숨겨지며 그 공간은 근처의 콘텐츠로 채워집니다 - 예를 들어 표시 : 없음 대신에.

그러나 달리 표시 : 없음 공간을 제거한 후 테이블 레이아웃을 수정하는 레이아웃은 레이아웃이 동일하게 유지됩니다. 가시성 : 축소. 어떻게 작동하는지 자세히 알 수 있습니다..

8. 열 만들기

당신은 당신의 내용을위한 열 레이아웃을 만들 수 있습니다. 기둥 속성. 그것은 얼마나 많은 컬럼을 지정할 수있게 해줍니다 (열 개수) 및 각 열 너비 (열 너비)은 요소.

내용이 텍스트가 아닌 다른 텍스트 (예 : 이미지) 인 경우 열의 폭을 염두에 두어야합니다. 다음 예제에서는 열 개수 내가 원하는 열의 수를 지정하려면.

-webkit-column-count : 2; -moz-column-count : 2; 열 개수 : 2; 

9. 요소 크기를 조정할 수있게 만들기

요소는 CSS3 속성을 사용하여 (세로, 가로 또는 양쪽 모두) 크기를 조정할 수 있습니다. 크기를 조정하다 . 크기 조정 가능성 텍스트 영역 같은 것을 사용하여 비활성화 할 수 있습니다..

크기 조정 : 세로; 크기 조정 : 가로; 크기 조정 : 둘 다; 크기 조정 : 없음; 

10. 패턴 만들기

단일 요소에 대해 여러 개의 CSS3 그라디언트 (선형 및 방사형 모두)가있을 수 있으며 서로 쌓여 패턴을 만들 수 있습니다. 이것은 우리가 외부 이미지를 사용하지 않고 요소에 멋진 배경 만들기. 작동 시키려면 약간의 연습이 필요할 수 있습니다..