X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

무료 프리미엄 액세스

프리미엄 허브 기사, 프로젝트 파일 및 각 튜토리얼 비디오의 첫 번째 10 %의 우리의 전체 라이브러리를 액세스 온라인 자습서 도서관 .

지금 무료 계정을 만드십시오!

CSS3 전환하고 좀 재미를보고있다
Google 번역에 의해 번역

이 브라우저 벤더가 정말 CSS2.1 겨우되어 있음에도 불구하고 꽤 빠른 속도로 통해 새로운 CSS3 기능을 추진하고있는 것

CSS3은 가장 현대적인 브라우저가 잠시 동안 그것을 구현되었습니다 완료되는 년 거리에도 불구하고. 이 빠른 도움말에 불길한 당신에게 스트레이트로 작은 롤 오버 CSS3을 사용하여 전환 효과를 보여줍니다.


1 단계

여기 아주 간단한 마크업 있습니다. 그냥 안으로 몇 가지 링크 목록을 순서대로 정렬되지 않은 :


필자는 하위 호환성을 위해 순전히 일부 span 태그 내부의 링크 태그를 넣어. 나는 그것의 엄격하게 의미되지 않습니다 알지만 이것이 (주먹을 흔들!) IE6에서 일하고 싶으면이 이해하지 못할 youll는 IE6 (주먹을 흔들!)로 그것을 표시해야하는 방법입니다 : 링크 이외에 가져가 태그. 비 - 링크 요소에 작업 가져가 : IE7 youll를 위해 DOCTYPE을 선언해야해야하십시오. 한심, 나도 알아!

필자는 가로 탐색 모음을 만드는 간단한 스타일을 적용.


이것은 결과는 다음과 같다 :


필자가 표시 적용 : 인라인, 목록 태그에 IE6의 일부 레이아웃 문제 (주먹을 흔들!) 방지.


2 단계

지금 임 내 링크 태그에 배경 이미지를 적용하는 것 :


이것은 결과는 다음과 같다 :


이건 좀 이상 보이지만 참아 줘요 알아요. 이미지가 배경 속기 규칙을 사용하여 배치됩니다.

배경 : ;


3 단계

지금은 스타일에 span 태그를하실 수 있습니다.


이것은 결과입니다.


링크 태그 '배경 이미지가 지금의 꼭대기에 앉아있는 span 태그의 배경 색상에 의해 숨겨져 있는지 Youll는 예고. span 태그도 링크 태그보다 높이 20px 작습니다. 이것은 중요합니다!


4 단계

내 링크 태그에 가져가 규칙 : 지금 불길한을 적용합니다. 이것은 링크 태그 배경 이미지가 때 마우스를 기본적으로 링크를 통해 그것을 드러내는, 10px 아래쪽으로 이동하게됩니다.


이것은 결과입니다.


이 시점에서 당신은 대체 모드에서 본질적으로있어. 현재 마크업 알려진 모든 브라우저에서 작동합니다. 지금부터 추가하는 모든 코드는 CSS3되며 지원 브라우저에서 브라우저에 따라 달라집니다.


5 단계

이제 아프지 링크 태그에 내 CSS3 전환 규칙을 추가합니다.


그것이 어떻게 작동하는지 Heres.

전환 :

모든 (이 요소의 모든 CSS 속성에 적용)

0.3 S (전환 시간)

선형 (전환의 타이밍 곡선)


이제 링크 태그의 속성에 변경 사항 (가져가)에 새로운 값으로 부드럽게 전환됩니다. 즉 배경 위치 및 텍스트 색상.

Youll는 또한 CSS 전환을위한 몇몇 업체 접두사가있다는 것을 알 수 있습니다. 우리가 할 수있는 최대한 많은 사람을 표적으로 삼아야하므로 각 브라우저는 현재 다른 ​​방법이 효과를 구현합니다.


- moz - = 모질라 파이어 폭스

- 웹킷 - = 사파리, 크롬

- O - = 오페라


일단 이것은 그것이 단순히 변화 될 것입니다 완료됩니다.


6 단계

마지막으로 불길한 몇 가지 빠른 둥근 모서리를 추가합니다.


이것은 결과는 다음과 같다 :


호환성

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


결론

이 개념은 롤 오버 효과의 부하에 적용할 수 있습니다. youll 아래의 다운로드에 당신은 앨범 위에 마우스를 가져가면 그것이 당신을 멋진 전환과 형식의 CD, 비닐 보여주는이 효과를 포함하여 몇 가지 더 많은 예제를 찾으십시오.


여기 특수 CSS3 예제를 다운로드합니다.

에 대한 재생과 재미를



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link