간과 한 유용한 CSS 트릭

프론트 엔드 웹 개발자로 잠시 동안 일 해왔다면 뭔가 코딩 방법을 알아 내려고 잠시 동안 인터넷 검색을 한 후 깨달을 가능성이 큽니다. “거기에 CSS가있다.”. 그렇지 않다면 잘 할 수 있습니다..

이 게시물은 요소를 끈적 거리게하거나 파선에 밑줄을 긋거나 특별한 모양으로 페이지의 텍스트를 흐르게하거나 시차 효과를 줄 수있는 기능을 제공하는 CSS 코드 모음입니다. 그 중 일부는 널리 지원되며 다른 브라우저는 모든 브라우저에서 완벽하게 지원됩니다..

1. 번호 매기기 및 부제목

   문서에 표제와 부제목 집합이 있고 수동으로 또는 스크립트를 통해 번호 매김을하고 있다고 가정 해보십시오. 대신 CSS 카운터를 사용하여이를 수행 할 수 있습니다. 이미 여기에 심층적 인 게시물이 있습니다. 그리고 그것은 CSS2 스펙에서 나온 것이므로 아마 IE 6를 제외한 모든 브라우저에서 지원할 수 있습니다..

2. 평범한 밑줄을 위로 향하게하십시오

   때때로 우리는 단단한 선 대신에 좋은 점선 또는 점선으로 밑줄을 그 으려고합니다. 옵션이 없으므로 경계선 아래. 그러나 경계선 아래 밑줄을 긋고있는 텍스트가 감싸는 경우 좋은 해결책이 아닙니다..

   CSS3는 텍스트 장식을위한 새로운 속성 하나를 지정하지 않았습니다. 텍스트 장식 색, 텍스트 장식 라인, 과 텍스트 장식 스타일 옛날에 숏 핸디 드 될 수있는 텍스트 장식.

   그 (것)들을 사용하여 밑줄을 그린다, 겹쳐서 쓰고, 심지어 텍스트를 깜빡이게 할 수도있다. 2015 년 4 월부터 Firefox에서만이 속성을 지원하지만, “실험적인 웹 플랫폼 기능” Chrome에서 사용하는 방법.

3. 견적 인용

   무엇보다도 짧은 인용문에 올바른 중괄호 따옴표를 입력해야 할 필요가 없습니다. HTML이 있기 때문입니다. 인라인 견적을 나타내는 태그.

   그만큼 태그는 작은 따옴표로 안쪽 따옴표를 인용 처리합니다. 그래서, “거기에 'CSS'가 있습니다.” 이 순간?

   기본 큰 따옴표를 원하지 않거나 중첩 된 따옴표가 둘 이상이면 CSS2를 사용하여 CSS로 인용 부호 요소에 대한 따옴표 기본 설정을 정의 할 수 있습니다. 인용 부호 재산.

4. 복잡한 테이블 관리

   당신은 당신이 무엇을 시도하든 당신이 지정한 폭 안에 머물기를 거절하는 셀당 다양한 내용 크기를 가진 큰 테이블을 보았을 것입니다. 그 테이블을 표 레이아웃 속성 (같은 높이의 경우이 링크를 따라 가십시오).

   구체적으로 수정 사항은 표 레이아웃 : 고정; 값. 표에 고정 레이아웃을 할당하면 표 및 셀 너비는 표의 너비 또는 내용이 아닌 셀의 첫 번째 행 (사용자가 정의 할 수 있음)에 의해 결정됩니다. 이것은 모든 브라우저에서 지원됩니다..

5. 끈적 거리게 만들자.

   끈적 끈적한 요소는보기에서 스크롤되지 않는 페이지의 요소입니다. 즉, 보이는 영역 (뷰포트 또는 스크롤 상자)에 달라 붙습니다. 당신은 이것을 사용하여 CSS로 이것을 만들 수 있습니다. 위치 : 끈적;.

   그것들은 스크롤하기 전에 상대적으로 위치 된 요소처럼 동작하고 스크롤 된 임계 값에 도달하면 고정 요소를 나중에 좋아합니다. 당분간, Firefox 만 그것을 지원하다.

6. 모양에 텍스트 가져 오기

   페이지의 텍스트가 그 옆에 표시된 이미지 위에 멋지게 곡선을 나타내 길 원합니 까? 당신은 시도 할 수 있습니다 CSS 모양. CSS 모양을 구현하기 위해 세 가지 속성을 사용할 수 있습니다. 외형, 모양 마진 과 형상 이미지 임계 값. 2015 년 4 월 CSS Shapes는 웹킷 브라우저.

7. 필수 필드

   양식이있는 경우 일부 입력란이 필요하고 다른 입력란은 필요하지 않을 가능성이 큽니다. 사용자에게 어느 것을 알릴 필요가 있습니다. 이 CSS는 : 필수 :선택 과목 의사 클래스. 최신의 모든 브라우저가이를 지원합니다..

8. 색상이 까다로운

   파란색과 같은 특정 색상이 마음에 들지 않으면 선택한 영역을 다른 색상으로 채울 수 있습니다. ::선택 의사 요소는이를위한 CSS입니다. 이 기능은 모든 최신 브라우저에서 지원됩니다..

9. 내가 그것을 확인 했는가??

   체크 박스가 체크 된 상황에서, 아이템이 체크 된 것을 나타 내기 위해 기본 체크 박스 안에 작은 체크 표시와 다른 표시를하는 것이 좋을 것입니다.

   즉각적인 형제 사이의 유대를 두 가지 요소, 즉 나란히 두 가지 요소를 이용하는 CSS가 있습니다. CSS에는 인접한 형제 선택자가 플러스 기호로 표시됩니다. + 기호 옆에있는 레이블을 타겟팅하는 데 사용할 수 있습니다. 그러나 먼저 체크 된 체크 박스를 목표로 삼는 것은 어떻습니까? 거기에 : 확인 됨 그 의사 클래스.

10. 이야기 책처럼

    그렇다면 처음에는 “영형” ~ 안에 “옛날 옛적에” 예쁜데? 우리는 CSS를 사용하여 꽤보기 좋게 만들 수 있습니다. 여기에 ::첫 편지 의사 요소가 구출에옵니다. 대상 요소의 첫 번째 줄의 첫 글자를 대상으로합니다. 그것에 대해 더 자세히 읽어보십시오..

11. 더 많은 것을 알고 싶습니까??

    요소는 클래스 X 또는 데이터 Y 또는 속성에 대한 다른 값을 가질 수 있습니다. 그와 같은 요소의 속성 값을 근처에 표시해야하는 경우에는 내용 : attr (X). 요소의 X 속성 값을 가져온 다음 요소 옆에 표시 할 수 있습니다..

12. 좀 더 왼쪽으로

    CSS 초보자를위한 중심 요소는 대단한 성과입니다. 다른 요소들은 CSS 속성을 중심에두기 위해 서로 다른 CSS 속성 집합이 필요합니다. 우리는 월드 와이드 웹에서 사용할 수있는 많은 예제 중 하나를 살펴볼 것입니다. 따라서 CSS를 중심으로하는 것들이 있다는 것을 다시 기억할 수 있습니다.

13. 링크의 파일 형식 공개

    링크 근처에서 작은 이미지를 본 적이 있습니까? PDF? 또는 DOC? 그렇습니다, 그것을 달성하기위한 CSS가 있습니다. 그만큼 content : url () 우리가 링크 뒤에 이미지를 표시하는 데 사용할 것입니다..

14. 트리거 시차 효과

    시차 효과는 전경에 비해 배경이 느리게 움직이는 것처럼 보이는 효과를 나타냅니다. 이 효과는 시차 스크롤을 구현하는 웹 사이트에서 널리 사용됩니다. 여러 가지 방법으로 구현할 수 있습니다. 아래 예제는 Firefox에서 작동합니다. 배경 부착 : 고정;.

15. CSS 애니메이션의 힘

    아마도 거대한 것은 아닙니다. “거기에 CSS가있다.” 왜냐하면 여러분 모두는 지금까지 CSS 애니메이션을 대부분 알고 있기 때문입니다. 하지만 약간의 알림은 아무런 해가 없습니다. CSS 애니메이션에는 많은 용도가 있지만 여기에는 간단한 색칠 연습을위한 것이 있습니다..

지금 읽기 : 모든 유용한 디자이너가 가져야 할 50 개의 유용한 CSS 스 니펫