덜한 CSS 자습서 디자인 슬릭 메뉴 탐색 표시 줄

이 기사는 "HTML5 / CSS3 자습서 시리즈" - 당신을 더 나은 디자이너 및 / 또는 개발자로 만드는 데 전념하는. 여기를 클릭하십시오. 같은 시리즈의 기사 더보기.

웹 디자인 및 개발 세계는 정말로 빠르게 진화하고 있습니다. 웹 디자이너 나 개발자로서 일상 업무를보다 효과적이고 효율적으로 수행 할 수있게 해주는 Apps 또는 새로운 프레임 워크가 커뮤니티에서 (거의) 매일 출시되는 수많은 새로운 기능에서 볼 수 있습니다..

오늘날 웹 디자인 발전에서 내 관심을 끌었던 것은 덜합니다. Variables, Mixins, Functions 및 Operations와 같은 프로그래밍 개념을 결합하여 CSS 구문을 작성하는 방식을 확장하는 프로그래밍 가능한 스타일 시트 언어입니다..

CSS 구문 작성에 새로운 기능을 제공합니다. 예를 들어, 프로그램에서와 같이 CSS에 Mixins을 적용하여 가능할 때마다 전체 파일에 적용 할 수있는 기본 스타일과 값을 저장할 수 있습니다. 이것으로 우리는 같은 스타일을 반복해서 쓸 필요가 없습니다..

자, LESS가 제공하는 것에 대한 더 나은 통찰력을 얻으려면 LESS로 연습 해 봅시다..

덜 디자인하기

이 튜토리얼에서는 Apple.com에서 영감을받은 매끄러운 메뉴 탐색 모음을 디자인하려고 시도합니다. 원래 제품에서만 '영감을받은'것이므로, 최종 자습서 제품은 원본과 정확하게 일치하지 않을 것입니다.

시작하려면 다음 유용한 자료를 먼저 읽어보십시오. LESS 언어의 기본 구현을 설명합니다.이 튜토리얼을 자세히 살펴보기 전에 도움이 될 것입니다..

• 덜 있습니다 : 더 적은 코드로 CSS 코딩하기
• 적은 비용으로 더 나은 CSS 작성
• 더 적은 소개, 그리고 Sass와 비교

예비

우선,이 작은 프로젝트에 필요한 필수적인 것들이 있습니다 :

1. 적은 텍스트 편집기

탐색 메뉴를 작성하려면 텍스트 편집기가 필요합니다. 그러나 현재 Dreamweaver, Notepad ++, InType, Sublime Text 2와 같은 시장에서 사용 가능한 대부분의 텍스트 편집기는 아직 지원하지 않았습니다. .적게 기본적으로 파일 확장명이므로 구문이 잘 강조 표시되지 않을 수 있습니다..

따라서이 튜토리얼에서는 ChrunchApp라는 특수 문자 편집기를 사용합니다. 열고 편집 할 수 있습니다. .적게 확장 파일을 만들고이 응용 프로그램을 사용하여 정적 CSS로 컴파일하십시오. Adobe Air 응용 프로그램이므로 모든 주요 데스크탑 OS (Win, OSX 및 Linux)에 설치할 수 있습니다..

HTML 편집기의 경우 지금 사용하고있는 편집기를 사용할 수 있습니다. 나는 개인적으로 숭고한 본문 2를 좋아한다..

2. Less.js

다음으로 공식 웹 사이트에서 LESS JavaScript Library를 다운로드하십시오. 현재 버전은 1.2.1입니다. 이것을 연습 폴더 안에 넣으십시오..

그런 다음 파일을 HTML 문서에 연결하십시오..

3. 프리픽스 프리

또한 탐색 메뉴에서 몇 가지 CSS3 기능을 사용하여 벤더 프리픽스 (-모즈-, -영형-, -웹킷-)를 사용하여 여러 브라우저에서 올바르게 렌더링 할 수 있습니다. 그러나 CSS 파일을 부 풀릴 때 개인적으로 접두어 사용을 선호하지 않습니다..

이러한 이유 때문에 필자는 백그라운드에서 자동으로 공급 업체 접두어를 처리 할 Lea Verou가 만든 JavaScript 라이브러리 인 prefix-free를 사용하기로 결정했습니다. 따라서 W3C의 공식 구문 만 작성하면됩니다..

파일을 다운로드하여 HTML 파일에 연결하십시오..

좋아, 우린 모두 준비가되어있다. 이제 HTML 마크 업을 구조화 해 봅시다..

HTML 마크 업

탐색은 아주 간단합니다. 정렬되지 않은 목록 태그 안에 5 개의 메뉴가 있습니다. 가장 좋아하는 HTML 편집기를 열고 다음 마크 업을 입력하십시오.

덜 스타일링하기

이 섹션에서는 LESS 언어로 탐색 스타일을 시작합니다. 프로그래밍에 익숙하지 않은 사람들에게는 LESS가있는 CSS 구문을 작성하는 것이 약간 이상하고 어색함을 느낄 것입니다. 하지만 걱정하지 마세요. 연습을 한 후에는 순수한 CSS를 작성하는 것보다 더 즐겁습니다. (제 경험은 약간 중독성이 있습니다).

우리의 영감의 원천에서 네비게이션 스타일을 살펴 봅시다.

위의 스크린 샷에서 볼 수 있듯이 Apple.com 탐색에는 다음과 같은 6 가지 기본 스타일이 있습니다.

• 그림자
• 경계
• 분할기
• 그라디언트
• 호버 효과
• 본문

우리는 이러한 스타일을 저장하고 내부에 저장합니다. config.less 기본 스타일로 구성; 일부 디자이너는 이름을 지정할 수도 있습니다. lib.css 그 약자 도서관. 이 파일을 문서에 링크하십시오.

LESS JavaScript 라이브러리 앞에 놓았는지 확인하십시오..

변수를 사용하여 색상 기반 정의

이 단계에서는 변수를 사용하여 탐색 색상베이스를 정의합니다. LESS의 변수는 다음을 사용하여 선언됩니다. @ 상징.

@ 주제 : # 555;

이 @테마 변수는 표준 색상입니다. 우리는 완벽하게 색 구성표를 꼬집고 색 구성이보다 일관성있게 될 것으로 기대할 수있는 모든 방법으로 사용할 것입니다..

Mixins로 기본 그림자 스타일 정의

내가 좋아하는 기능 중 하나는 Mixins입니다. 나중에 스타일 시트에서 클래스 또는 ID에서 상속 될 수있는 몇 가지 미리 정의 된 스타일을 저장하는 프로그래밍 개념입니다.

.shadow box-shadow : 0 1px 2px 0 @theme; 

위의 코드에서 접두사가 붙은 버전은 포함하지 않았습니다. 상자 그림자 프리픽스없는 라이브러리가 자동적으로 처리 할 것이기 때문이다. 또한 그림자 색상은 테마 변수 color에서 상속됩니다..

Parametric Mixins로 테두리 스타일 정의

네비게이션 막대에는 약간 둥근 모서리가있는 뚜렷한 테두리 색이 필요합니다. Parametric Mixins을 사용하여 테두리 스타일을 컴파일 할 수 있습니다. 실제로 Mixins과 동일한 기능을 가지고 있습니다. 차이점은 가변 매개 변수가있어서 값을보다 조정할 수 있다는 것입니다..

.border (@radius : 3px) border-radius : @radius; 테두리 : 1 픽셀 단색 @theme - # 050505; 

위의 코드에서 기본 테두리를 설정합니다. @반지름 ...에 대한 3px 이전에 언급했듯이 나중에이 값을 변경할 수 있습니다..

작동시 그라디언트, 디바이더 및 호버 스타일 정의

연산은 단순히 더하기, 나눗셈, 뺄셈 및 곱셈과 같은 수학 공식을 적용하여 원하는 결과를 얻을 수있는 프로그래밍 언어입니다. 다음 코드를 살펴 보겠습니다.

.divider border-style : solid; border-width : 0 1px 0 1px; border-color : transparent @theme - # 111 transparent @theme + # 333; 

위의 코드에서 빼기 @테마 변수에 의한 # 111, 이 방법으로 왼쪽 테두리 색 출력이 약간 어둡습니다. 오른쪽 테두리 색상은 @테마 16 진수 색상의 변수 # 333, 출력은 더 가볍다..

색 구성표 수준

글쎄, 수식과 혼동을 줄 수있는 사람들 중 일부는 더 나은 이해를 위해 아래의 색 구성표 다이어그램을 살펴 보겠습니다.

최대 다크 톤은 # 000 (검은 색), 최대 밝기 톤은 #fff (흰색) 현재 우리의 색 기본은 # 555. 그래서, 만약 우리가 컬러베이스를 원한다면 삼 레벨이 현재보다 어두우면 간단히 빼기 만하면됩니다. # 333. 같은 방법으로 색상을 밝게 할 수도 있습니다..

다음으로 그라디언트 색상을 조작합니다..

.그래디언트 배경 : 선형 그래디언트 (맨 위, @ 시간 + # 252525 0 %, @ 시간 + # 171717 50 %, @ 시간 - # 010101 51 %, @ 주제 + # 151515 100 %);  .hovereffect background : 선형 그라디언트 (맨 위, @theme - # 010101 0 %, @ - 121212 50 %, @ 225022 51 %, @theme - # 050505 100 %) 

Guard 믹스로 텍스트 스타일 정의

네비게이션 바에 어두운 색과 밝은 색이 2 가지 색상으로 계획되어 있습니다. Guard Mixins를 사용하여 텍스트에 대해 두 가지 조건문을 적용합니다..

먼저 텍스트에 밝기가 50 % 이상인 색상이 지정되면 텍스트 그림자 이 경우 색이 어두워 야합니다. # 000000.

.textcolor (@txtcolor) (lightness (@txtcolor)> = 50 %) color : @txtcolor; 텍스트 그림자 : 1px 1px 0px # 000000; 

그런 다음 텍스트에 밝기가 50 % 미만인 색상이 지정되면 텍스트 그림자 흰색으로 바뀔 것이다..

.textcolor (@txtcolor) when (밝기 (@txtcolor) 
덜 가져 오기
 
이제 다른 것을 만들자. .적게 이름이 지정된 파일 styles.less 가져 오기 config.less 그것에 :
 
@import "config.less";
 
글꼴 패밀리 추가
 
탐색 바가 더 매력적으로 보일 수 있도록 다음을 사용하여 새 글꼴 패밀리를 포함합니다. @ font-face 규칙. 놀랍게도, @ font-face 규칙은 IE6 이후 실제로 지원됩니다.!
 
이번에는 Asap 글꼴을 사용합니다. 폰트 다람쥐의 폰트 콜렉션에서 다운로드하십시오. 그런 다음 최근에 만든 스타일에 다음 스타일을 삽입하십시오. styles.less 파일.
 
@ font-face 글꼴 패밀리 : 'AsapRegular'; src : url ( 'fonts / Asap-Regular-webfont.eot'); src : url ( 'fonts / Asap-Regular-webfont.eot? #iefix') 형식 ( 'embedded-opentype'), url ( 'fonts / Asap-Regular-webfont.woff') 형식 ( 'woff'), url url ( 'fonts / Asap-Regular-webfont.svg # AsapRegular') 형식 ( 'svg'); font-weight : normal; 글꼴 스타일 : 일반;  
 
색상 함수로 바디 스타일 지정하기
 
이제 배경 색상을 신체 (색상 기반보다 가벼워 야 함)뿐만 아니라 글꼴 군 및 글꼴 크기를 지정해야합니다. 색상 함수를 사용하여 효과에 접근 할 수 있습니다.
 
다음 코드는 배경을 30 %.
 
몸 배경 : 밝게 (@ 테마, 30 %); font-family : AsapRegular, sans-serif; 글꼴 크기 : 11pt; 
 
 
 
중첩 규칙을 사용하여 탐색 스타일 지정
 
LESS에서는 스타일을 부모 바로 아래에 중첩 할 수 있습니다. 아래의 코드를 살펴 보겠습니다..
 
그만큼 항해하다 태그에는 네비게이션에 필요한 모든 요소가 포함되어 있으며 다음 스타일이 제공됩니다.
 
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .경계; .그림자; 
 
CSS 규칙을 다시 한 번주는 대신, .경계 국경 스타일과 .그림자 그림자를 추가합니다. 실제 사례에서 이러한 클래스 세트는 필요할 때마다 다른 요소에서도 재사용 할 수 있습니다..
 
 
 
다음으로, 우리는 ul 내부 항해하다 패딩과 마진이 제로가되도록 그리 오래 전에 우리는 다음과 같이 작성하여 스타일에 접근합니다.
 
nav ... nav ul ...
 
이 접근법에는 아무런 문제가 없습니다. 사실 저는 매번이 방법을 사용 했었습니다. 그러나이 방법은 많은 CSS 디자이너가 말했으며, 어떤 경우에는 쉽게 관리 할 수 ​​없다고 말했습니다.
 
이제 다음과 같이 할 수 있습니다.
 
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .경계; .그림자; ul 패딩 : 0; margin : 0; 
 
 
 
메뉴가 다음 행을 사용하여 표시됩니다. 표시 : 인라인 재산.
 
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .경계; .그림자; ul 패딩 : 0; margin : 0; li 표시 : 인라인; 
 
 
 
아래 구문에서 메뉴 앵커 태그 스타일을 지정하고 미리 정의 된 스타일을 추가합니다. .텍스트 색상, .분할기, .구배.
 
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .경계; .그림자; ul 패딩 : 0; margin : 0; li 표시 : 인라인; a 텍스트 장식 : 없음; 디스플레이 : 인라인 블록; 왼쪽으로 뜨다; 너비 : 156px; 높이 : 45px; 텍스트 정렬 : 가운데; 라인 높이 : 300 %; . 텍스트 색 (# f2f2f2); //이 행을 변경할 수 있습니다 .divider; .구배; 
 
위 코드에서 16 진수 색상을 적용합니다. # f2f2f2 밝기가 50 % 이상으로 간주되므로 그림자가 어두워지는 것을 볼 수 있습니다 (자동). 나머지 코드는 분명히 자명하다..
 
 
 
그러나 위의 현재 결과를 보면 각 메뉴에 분할자가 있으므로 마지막 섹션이 맨 아래로 넘치게됩니다. 따라서 탐색 막대의 첫 번째 및 마지막 자식에 대한 테두리 스타일을 생략해야합니다..
 
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .경계; .그림자; ul 패딩 : 0; margin : 0; li 표시 : 인라인; a 텍스트 장식 : 없음; 디스플레이 : 인라인 블록; 왼쪽으로 뜨다; 너비 : 156px; 높이 : 45px; 텍스트 정렬 : 가운데; 라인 높이 : 300 %; . 텍스트 색 (# f2f2f2); //이 행을 변경할 수 있습니다 .divider; .구배;  li : first-child a border-left : none;  li : 마지막 자식 a border-right : none; 
 
 
 
마우스 오버 상태
 
마지막 단계에서는 호버 효과를 추가합니다. 덜 추가 할 수 있습니다. 의사 요소 와 같은 : 마우스 오버 ~을 사용하여 & 상징.
 
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .경계; .그림자; ul 패딩 : 0; margin : 0; li 표시 : 인라인; a 텍스트 장식 : 없음; 디스플레이 : 인라인 블록; 왼쪽으로 뜨다; 너비 : 156px; 높이 : 45px; 텍스트 정렬 : 가운데; 라인 높이 : 300 %; . 텍스트 색 (# f2f2f2); //이 행을 변경할 수 있습니다 .divider; .구배; & : hover .hovereffect;  li : first-child a border-left : none;  li : 마지막 자식 a border-right : none; 
 
 
 
색상 테마 변경
 
여기 LESS의 멋진 부분이 있습니다. 전반적인 색상 테마를 변경하려면 순수 CSS에서 필요한 것보다 적은 줄 변경으로 처리 할 수 ​​있습니다.
 
이 경우 탐색 색상을 약간 더 밝게 변경합니다. 다음 두 줄만 바꾸기 만하면됩니다..
 
@ 주제 : #ccc; // 이것을 바꾼다.
 
.텍스트 컬러 (# 555); //이
 
결과는 다음과 같습니다..
 
 
 
CSS로 LESS 컴파일하기
 
우리가 아직 LESS JavaScript를 사용하고 있다면, .적게 표준 브라우저에서 해석 할 수 있도록 정적 CSS로 변환하십시오. 이것은 클라이언트 측에서 이중 작업이며, 중복 및 대역폭 낭비는 물론입니다. LESS의 요점은 정적 CSS를 컴파일하는 과정을 단순화하여 워크 플로우를보다 동적으로 프로그래밍 할 수있게하는 것입니다.
 
따라서 탐색 바를 웹 사이트에 게시 할 때 LESS 파일을 정적 CSS로 컴파일하는 것이 중요합니다..
 
클릭 위기 상황! 큰 버튼.
 
 
 
우리 운동 파일에 .less를 저장하고, HTML 문서에 링크하고, .적게 & less.js 문서의 파일.
 
 .shadow box-shadow : 0 1px 2px 0 # 555555;  .divider border-style : solid; border-width : 0 1px 0 1px; 테두리 색상 : 투명 # 444444 투명 # 888888; . 그라데이션 배경 : 선형 그라디언트 (맨 위, # 7a7a7a 0 %, # 6c6c6c 50 %, # 545454 51 %, # 6a6a6a 100 %);  .hovereffect 배경 : 선형 그래디언트 (맨 위, # 545454 0 %, # 434343 50 %, # 333333 51 %, # 505050 100 %);  @ font-face 글꼴 패밀리 : 'AsapRegular'; src : url ( 'fonts / Asap-Regular-webfont.eot'); src : url ( 'fonts / Asap-Regular-webfont.eot? #iefix') 형식 ( 'embedded-opentype'), url ( 'fonts / Asap-Regular-webfont.woff') 형식 ( 'woff'), url url ( 'fonts / Asap-Regular-webfont.svg # AsapRegular') 형식 ( 'svg'); font-weight : normal; 글꼴 스타일 : 일반;  body background : # a2a2a2; font-family : AsapRegular, sans-serif; 글꼴 크기 : 11pt;  nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; border-radius : 3px; 국경 : 1 픽셀 고체 # 505050; 상자 그림자 : 0 1px 2px 0 # 555555;  nav ul 패딩 : 0; margin : 0;  nav ul li 디스플레이 : 인라인;  nav ul li a 텍스트 장식 : 없음; 디스플레이 : 인라인 블록; 왼쪽으로 뜨다; 너비 : 156px; 높이 : 45px; 텍스트 정렬 : 가운데; 라인 높이 : 300 %; color : # f2f2f2; 텍스트 그림자 : 1px 1px 0px # 000000; border-style : 솔리드; border-width : 0 1px 0 1px; 테두리 색상 : 투명 # 444444 투명 # 888888; 배경 : 선형 그래디언트 (상단, # 7a7a7a 0 %, # 6c6c6c 50 %, # 545454 51 %, # 6a6a6a 100 %)  nav ul li a : 마우스 오버 배경 : 선형 그래디언트 (위쪽, # 545454 0 %, # 434343 50 %, # 333333 51 %, # 505050 100 %);  nav ul li : 첫 번째 자식 a border-left : none;  nav ul li : 마지막 자식 a border-right : none;  
 
다시 한 번 결과를 살펴 봅시다..
 
 
 
그리고 우리는 끝났습니다, 그것으로 실험 해보십시오..
 
결론
 
오늘날 우리는 다음과 같이 덜 언어에 관한 많은 것을 배웠습니다.
 

• 변수.
• 믹스 인
• 파라 메트릭 믹스
• 운영
• 보호 된 믹스 인
• 중첩 된 규칙

더 많이 다루어지고 설명 될 많은 가능성이 있지만,이 기본적인 튜토리얼을 즐겁게 사용하시기 바랍니다..

• 데모
• 소스 다운로드