아름다운 그림자(jquery 홈페이지 분석)

제이쿼리

• 다운로드
• API 문서
• 블로그
• 플러그인
• 브라우저 지원

jquery 홈페이지에서 가장 먼저 보이는 것은 이 유리 슬래그 효과입니다. 디자이너는 이 효과를 만들기 위해 하이라이트와 그림자를 사용합니다.

이런 느낌을 어떻게 만들까요?

1단계: 탐색 영역을 반투명으로, 색상을 rgba(0,0,0，.1)

으로 설정합니다.

2단계: 왼쪽 상단과 오른쪽 상단 모서리를 둥근 모서리로 자릅니다(중요하지 않음)

3단계: 탐색 영역 상단 강조border-top: 1px solid rgba(255,255,255,.3)

3단계: 탐색 영역의 네 면에 그림자를 드리웁니다box-shadow:0 0 5px rgba(0,0,0,.7)

4부: 왼쪽 탐색 영역에 그림자 효과 추가border-left: 1px solid rgba(0,0,0,.3)

제이쿼리 홈페이지에도 비슷한 기술이 많이 있으니, 아래 내용을 읽어보세요.

오코코코코코

보이지 않습니다. . . . 글쎄요, 저는 그것을 보기 위해 돋보기를 샀고 그 효과는 다음과 비슷했습니다: 저는 칼을 사용하여 회색 바위에 선을 그렸습니다. 마치... 고대 기념물에 새겨진 단어처럼 말이죠. 설정은 매우 간단합니다. 배경 색상에 따라 하이라이트와 그림자의 색상을 선택합니다. 색상이 결정되면 그림자 설정을 시작합니다. box-shadow: 0 -1px #000 하이라이트 설정: border-top: 1px solid #333

그게 제가 쓴 전부입니다. 앞으로도 계속 추가하겠습니다---------------세계 햇빛과 무지개만 있는 건 아니야