CSS의 움직이는 텍스트 - 초보자 가이드
Marquee는 Internet Explorer에서 처음 소개되었으며 W3C가 사용성 문제로 인해 HTML 표준 요소에서 제외하기로 결정하기 전에 90 년대에 매우 인기가있었습니다. 웹 디자이너는 태그를 사용하지 않는 것이 좋습니다..
놀랍게도, 천막은 현재 태그가 아닌 복귀를하고 있습니다. 형식과 비슷하지만 CSS 모듈에서. 이 모듈은 Webkit CSS 사양의 일부로 사용할 수 있으며 W3C는 현재 유사한 모듈에서도 작업하고 있습니다. 그러나 W3C 버전은 아직 후보 추천 단계에 있으므로 아직 적용 할 수 없습니다. 따라서 이번에는 Webkit 사양의 내용 만 다루겠습니다..
구문
우선, 선택 윤곽은 다음과 같은 약식 구문을 사용하여 정의 할 수 있습니다.
-webkit-marquee : [방향] [증가] [반복] [스타일] [속도]
위의 구문에서 필요한 각 값은 매우 자명하며 다른 경우에는이 설명서에서 충분히 설명 할 수 있습니다. 따라서이 구문이 어떻게 작동하는지 더 자세히 알고 싶다면 먼저 설명서를 참조하십시오..
그런 다음 몇 가지 실제 사례를 만들고 진행 상황을 확인하면서 우리와 함께하십시오..
예 1 : 텍스트 스크롤
좋습니다. 첫 번째 예에서는 오른쪽에서 왼쪽으로 텍스트를 이동시키는 선택 윤곽의 고전적인 동작을 만듭니다..
아래와 같이 텍스트 마크 업을 만들어 보겠습니다.
롤리팝 토핑 레몬 방울 대추 applake fruitcake tart liquorice 참깨 스냅.
그런 다음 다음 구문을 사용하여 선택 윤곽을 정의합니다..
-webkit-marquee : 자동 중간 무한 스크롤 정상; overflow-x : -webkit-marquee;
선택 윤곽 방향이로 설정된 경우 자동, 기본적으로 오른쪽에서 왼쪽으로 이동합니다. 또는이 값을로 변경할 수 있습니다. 왼쪽. 또한 overflow-x 속성을로 설정해야합니다. -webkit-marquee 그래서 내용은 항상 하나 같이 행동 할 것입니다. 이 속성을 생략하면 텍스트가 계속 이동하지 않습니다..
데모보기.
예 2 : 앞뒤로 튀어 오름
두 번째 예제에서 우리는 천막과 다른 스타일을 시도 할 것입니다. 이번에는 번갈아 하는 대신에 스크롤 방향 값을로 변경하십시오. 권리. 그렇게하면 선택 윤곽이 왼쪽에서 오른쪽으로 이동 한 다음 앞뒤로 튀어 오릅니다..
-webkit-marquee : 자동 매체 무한 대체 대체; overflow-x : -webkit-marquee;
데모보기
예 3 : 텍스트를 위쪽으로 이동
마지막 예제에서는 위쪽으로 움직이는 선택 윤곽 방향을 변경합니다. 두 가지가있다 방향 그렇게 할 가치; 값을로 바꿀 수 있습니다. 쪽으로 또는 앞으로.
개인적으로 나는 Webkit이 어떤 사람들에게는 혼란을 가져올 수 있다고 생각하기 때문에 Webkit이 본질적으로 같은 것을하는 두 가지 가치를 제공하는 이유를 알지 못합니다..
-webkit-marquee : 중간 무한 스크롤 정상; overflow-x : -webkit-marquee;
데모보기
게다가, 나는 좀 더 많은 예제들을 엮어 냈지만, 여기에 모두 설명되어 있다면 그들은 압도적이다..
하지만 아래 링크에서 모든 데모를보고 소스를 다운로드 할 수 있습니다..
- 데모
- 소스 다운로드
최종 생각 및 참고 문헌
나는 처음에는 그 한계를 만난 줄 알았는데, 난폭 한 것에 아직도 관심이 있다는 것에 놀랐다. 이것은 또한 CSS 모듈이 어떻게 유용 할 것인가에 대한 질문을 던지게했다. 사실 모든 브라우저는 여전히 꼬리표.
그래서 당신은 어떻게 생각하십니까? 이 선택 윤곽은 여전히 관련성이 있으며 현대 웹 디자인에서 유용할까요??
이 연회실 물건에 대해 아직도 궁금한 사항이 있으면 다음 참조를 참조하십시오.
- 사파리 CSS 레퍼런스
- Webkit 선택기 생성기
- 오래된 것에 대한 포괄적 인 문서화
Sitepoint의 태그. - 그리고이 Marquee Generator를 포함하여 거의 모든 것을위한 생성기가 항상 있습니다..
