저자로부터:웹사이트 구축에 관한 블로그에 오신 것을 환영합니다. 모든 사이트에는 일반적으로 기억에 남고 다른 사이트보다 눈에 띄는 것이 있습니다. 일반적으로 이는 사이트 헤더입니다. CSS를 사용하면 원하는 대로 만들 수 있습니다.

웹사이트 헤더 - 어떤 모습인가요?

오늘날 웹 리소스의 디자인에만 얼마나 많은 것이 의존할 수 있는지는 놀랍습니다. 그러나 특히 웹 리소스를 다른 리소스와 구별하는 것은 무엇입니까? 일반적으로 회사 로고와 독특한 디자인이 포함된 사이트 헤더입니다. 일반적으로 사람들은 일종의 인터넷 프로젝트를 기억합니다. 이것은 사람들의 기억 속에 아주 잘 기억됩니다.

예를 들어 파란색 배경에 흰색 문자 "B"가 표시되면 이것이 VKontakte 소셜 네트워크의 아이콘이라고 즉시 결론을 내릴 수 있습니다. 그리고 모든 사람들은 즉시 운반비둘기의 이미지를 트위터와 연관시킵니다. 이 모든 것은 이 사이트의 헤더에 그러한 이미지가 있었고 사람들이 이를 매우 잘 기억했기 때문에 가능했습니다.

좋아요, 그건 약간의 생각이었습니다. 이제 바로 기술적인 부분으로 넘어가겠습니다.

CSS로 웹사이트 헤더를 어떻게 디자인할 수 있나요?

일반적으로 모자는 다릅니다. 너비에 따라 중앙에 정렬된 그룹과 웹 페이지의 전체 너비에 걸쳐 있는 그룹의 두 그룹으로 나눌 수 있습니다.

이전에는 헤더가 다른 블록과 동일한 방식으로 만들어졌습니다. 일반적인 div 태그에 필수 식별자가 부여된 후 필요한 모든 콘텐츠가 여기에 들어간 다음 이 모든 것이 형식화되었습니다. 오늘날에는 이미 다른 방식으로 서체를 사용하는 것이 관례입니다. 특히 HTML5에서 사이트 헤더를 생성할 때 한 쌍의 태그인 header가 나타났습니다. 이를 사용하면 브라우저가 템플릿의 이 부분이 무엇인지, 무엇을 하는지 이해할 수 있습니다. 그건 그렇고, HTML5의 기본 사항을 배우고 싶다면 이 기술에 대한 강의를 시청할 수 있는 직접 경로가 있습니다.

따라서 간단한 헤더를 생성하려면 html로 다음 코드를 작성하면 됩니다.

물론 페이지에는 아직 아무것도 나타나지 않습니다. 여전히 페이지에 콘텐츠를 추가하고 디자인해야 합니다. 하지만 예를 들어 화면 전체 너비에 걸쳐 있는 블록을 만들고 약간 장식해 봅시다.

헤더(너비: 100%; 배경: #D8E3AB; 높이: 70px; )

일반적으로 모든 것이 올바르게 수행되면 블록에 일종의 클래스나 식별자(웹 페이지의 중요한 요소이기 때문에)가 제공되어야 하지만 지금은 단순히 태그별로 요소를 참조하겠습니다.

width: 100% 속성을 사용하면 화면 크기에 관계없이 블록이 전체 너비로 늘어납니다. 그러나 크기를 어떻게든 제한해야 하는 경우 절대 크기가 픽셀 단위로 기록되는 추가 max-width 속성을 사용하세요. 픽셀 단위에 도달하면 컨테이너가 더 이상 확장되지 않습니다.

이제 우리 앞에는 선택한 색상으로 칠해진 스트립이 있습니다. 일반적으로 높이는 지정되지 않습니다. 헤더에 포함될 요소에 따라 자동으로 결정됩니다.

일

제목 텍스트의 색상과 그 아래 배경을 변경합니다.

해결책

텍스트 아래의 배경색을 변경하려면 h1 선택기에 추가되어야 하는 배경 범용 속성을 사용하세요. 제목 색상은 이 선택기에 추가된 색상 속성을 사용하여 변경됩니다(예 1).

예시 1: 헤더 아래 배경색

HTML5 CSS 2.1 IE Cr Op Sa Fx

외부 세계의 법칙

외부 세계의 법칙은 방법론적으로 이해 가능한 세계를 추론하지만 공식적으로는 그 반대가 허용됩니다.

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 텍스트 제목 아래 배경색

색상이 지정된 직사각형의 크기는 텍스트 크기뿐만 아니라 텍스트 주변의 패딩에도 영향을 받습니다. 따라서 padding 속성을 사용하여 배경의 크기를 조정하고 이를 다시 h1 선택기에 추가합니다.

당신은 항상 웹사이트나 블로그의 제목에 관심을 끌고 싶고, 제목을 아름답게 만들고 싶고 가급적 효과(예: 그림자, 광선 또는 3D)를 사용하여 만들고 싶습니다. Adobe Photoshop에서는 매우 아름다운 제목을 만들 수 있지만 결국에는 이미지이므로 검색 로봇이 해당 텍스트를 읽을 수 없습니다... 어떻게 해야 할까요? 출구가 있습니다!

실제로 웹페이지와 특정 검색어의 관련성을 판단하고 검색결과에 해당 위치를 지정할 때 제목은 마지막 위치에서 훨씬 더 멀리 재생됩니다. 나는 심지어 가장 중요한 것 중 하나를 말하고 싶습니다. 사진 형태로 남겨두는 것은 오히려 무모할 것입니다(비록 한 웹사이트를 다시 디자인한 적이 있지만 여러 페이지에 걸쳐 전체 텍스트가 그림이었습니다... 예, 예, 이런 일도 발생합니다...).

물론 아름다움을 잊고 다른 곳과 마찬가지로 헤드라인을 평범하게 만들 수도 있습니다. 하지만 제목을 텍스트 형식으로 유지하고 매우 아름답고 흥미로운 효과를 줄 수 있는 아주 간단한 방법이 있다면 왜 그럴까요? 오늘은 이러한 기술을 보여 드리겠습니다. 이러한 기술을 익히면 지속적으로 사용하게 될 것이라고 생각합니다. 한마디로, 일석이조입니다. 웹 디자인을 더욱 인상적으로 만들고 페이지의 관련성은 아무런 해를 끼치지 않을 것입니다.

시작하자!

3D 헤더 만들기

그래서 웹 페이지를 레이아웃할 때 효과를 직접 만들어보겠습니다.

1. 먼저 새로운 html 파일과 스타일시트(css) 파일을 생성해야 합니다.

이 모든 작업이 어떻게 수행되는지 보여주기 위해 html 파일을 만들고 이름을 "title.html"로 지정했습니다(이 강의의 모든 소스 파일은 필요한 경우 "소스 파일"에서 다운로드하여 볼 수 있습니다). 다음은 html 파일의 소스 코드입니다.

여기에 3D 텍스트가 표시됩니다.

여기에 그림자 제목

여기에 글로우 텍스트

애너글리프 텍스트

이것은 HTML5 문서이고 스타일 시트(css.css 파일)가 연결되어 있으며 body 태그 내부에는 구경이 다른 제목 4개만 있습니다.

우리는 이러한 제목으로 작업할 것입니다. html 파일에는 다른 것이 필요하지 않습니다.

2. 이미 말했듯이 스타일 시트 파일이 필요합니다. 이미 연결했지만 생성하지 않은 경우 생성하십시오.

css.css라는 파일을 만들어 html 파일과 같은 디렉터리에 배치했습니다.

3D 헤더 생성을 시작하기 전에 페이지에 몇 가지 기본 스타일을 추가하여 좀 더 매력적으로 보이도록 하겠습니다.

페이지의 높이, 너비, 색상을 지정하고 중앙에 배치한 후 본문 태그에 점선 프레임을 설정해 보겠습니다.

또한 즉시 모든 제목을 중앙에 정렬하겠습니다.

스타일 시트 파일에 작성해야 하는 코드는 다음과 같습니다.

Body(높이:700px; 너비:90%; 배경색:#069; 여백:0 자동; 테두리:1px 점선 #000066; ) h1, h2, h3, h4(text-align:center;)

브라우저에서 html 파일을 실행하세요. 페이지는 다음과 같습니다:

3. 이제 변환을 시작해 보겠습니다. h1 제목을 3D 텍스트로 변환하겠습니다.

이 모든 것은 동일한 스타일 시트 파일에서 모두 발생합니다.

css.css 파일에서 지금까지 작성한 모든 항목 아래에 다음 코드를 배치합니다.

H1(글꼴 크기:72px; 색상:#fff; 텍스트 그림자:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0;

이제 이 코드를 살펴보겠습니다. 처음 두 줄에서는 글꼴 크기와 기본 색상을 설정합니다. 그러나 재미가 시작됩니다. text-shadow 속성을 사용하여 글꼴에 대한 그림자를 생성하지만 완전히는 아닙니다.

사실 이 속성은 콜론 뒤에 색상, 수평 이동, 수직 이동 및 흐림과 같은 매개변수를 나열합니다.

우리는 무엇을하고 있습니까?

첫째, 기본 색상에 가깝지만 더 어두운 색상을 선택합니다. 이 예에서 전경색은 흰색이고 텍스트 그림자 색상은 회색입니다(매우 어둡지는 않음). 여기에서 원하는 결과를 얻을 때까지 실험을 해야 합니다.

둘째: 이 그림자를 오른쪽과 위쪽으로 점차적으로(매번 1픽셀씩) 이동합니다. 이는 다음 2개의 매개변수(1px -1px, 2px -2px 등)로 표시됩니다.

셋째: 3D 텍스트를 만드는 데는 필요하지 않기 때문에 모든 곳에서 흐림 효과를 0으로 둡니다.

결과적으로 우리는 다음과 같은 그림을 얻습니다.

이 예에서는 5px 오프셋에서 멈췄지만 더 많거나 적은 작업을 수행할 수 있습니다. 그것은 모두 당신이 달성하려는 결과에 달려 있습니다.

또한 좀 더 자연스러운 모습을 만들기 위해 색상을 실험해 보세요.

그림자가 있는 헤더 만들기

그림자가 있는 헤더를 만드는 것은 매우 간단합니다. 그리고 우리는 단 몇 줄의 코드만으로 이를 달성할 것입니다.

이제 우리는 h2 제목에 대해 작업할 것입니다.

먼저 크기와 기본 색상을 설정해야 합니다. 크기는 h1 헤더와 정확히 동일하게 설정했지만, 물론 필요에 따라 각 헤더를 디자인해야 합니다.

색상과 크기를 설정한 후 text-shadow 속성을 다시 사용합니다. 첫 번째 매개변수는 색상을 지정하는 것입니다. 더 어두워야 합니다(결국 그림자입니다). 두 번째와 세 번째 매개변수는 수평 및 수직 이동입니다. 텍스트가 크기 때문에 5픽셀로 만들겠습니다. 마지막 매개변수는 흐림 반경입니다. 그림자에는 이것이 필요하므로 4픽셀 값을 할당합니다. 결과적으로 코드는 다음과 같습니다.

H2(글꼴 크기:72px; 색상:#F90; 텍스트 그림자:#191919 5px 5px 4px; )

그러면 다음과 같이 보일 것입니다:

매개변수를 실험해봐도 여전히 다른 결과를 얻을 수 있습니다. 텍스트의 글꼴 크기, 색상 및 달성하려는 목표를 고려하십시오.

글로우가 포함된 헤더 만들기

이것도 간단합니다. 여기서는 h3 제목을 사용하여 작업하겠습니다.

원칙은 동일합니다. 먼저 글꼴 크기와 기본 색상을 설정한 다음 텍스트 그림자를 사용합니다.

광선의 색상을 선택합니다. 아시다시피 제목의 메인 색상보다 더 밝아집니다. 두 번째와 세 번째 매개변수는 0과 같습니다(여기에서는 아무 것도 이동하지 않습니다). 그러나 흐림 반경은 더 커야 합니다(그 크기는 얻고자 하는 빛의 종류에 따라 달라집니다).

결과적으로 코드는 다음과 같습니다.

H3(글꼴 크기:72px; 색상:#333; 텍스트 그림자:#fff 0 0 20px; )

글로우가 포함된 제목은 다음과 같습니다.

스테레오 효과가 있는 헤더

애너글리프 텍스트라고도 합니다. 3D 영화를 볼 때 쓰는 안경에 비유할 수 있습니다.

괴롭히지 않겠습니다... 긴 설명을 듣는 것보다 한 번 보는 것이 낫다고 합니다.

효과는 매우 흥미롭고 원칙적으로 생성하는 것은 어렵지 않습니다.

시작하자. 여기서는 h4 제목으로 작업하겠습니다.

1. 먼저 헤더의 크기를 설정해 보겠습니다. 우리 예제의 나머지 헤더와 동일하게 만들겠습니다.

이제 헤더 요소의 위치를 ​​지정해야 합니다. 위치 속성을 상대 속성으로 설정해 보겠습니다. 즉, 요소의 위치는 원래 위치를 기준으로 설정됩니다.

이제 색상을 지정해 보겠습니다. 우리는 이것을 rgba 형식으로 할 것입니다. 이 색상 정의를 아직 접하지 못했다면 놀라지 마십시오. 간단합니다. 괄호 안의 처음 세 매개변수는 색상(rgb 형식)을 결정하고 마지막 매개변수는 불투명도 정도를 결정합니다. 이 예에서 이 값은 0.5(즉, ​​50%)입니다.

위의 모든 코드는 다음과 같습니다.

H4(글꼴 크기:72px; 위치:상대; 색상:rgba(0,0,102,0.5); )

2. 이제 재미있는 부분이 나옵니다. h4 요소에 대한 의사 요소를 생성하겠습니다. 이렇게 하려면 스타일 시트에 다음과 같이 등록해야 합니다. h4:이후.

이 의사 요소에는 몇 가지 흥미로운 속성이 있습니다. 예를 들어, 재산 콘텐츠, h4 제목과 정확히 동일한 텍스트를 작성해야 합니다.

의사 요소는 절대적으로 위치 지정되어야 합니다(위치:절대).

색상은 h4 요소의 반대 색상으로 설정되어야 합니다. 즉, h4가 파란색이면 의사 요소는 빨간색이 됩니다. 불투명도는 여전히 50%입니다.

또한 left 및 top 속성을 사용하여 의사 요소의 위치를 ​​조정합니다. 콘텐츠의 h4 요소를 복제하는 의사 요소가 오른쪽과 아래에 약간 배치되어 있는지 확인해야 합니다(이제 모든 것을 직접 볼 수 있습니다). 여기서 설정은 개별적이며 글꼴 크기, 글꼴 유형 및 원하는 효과에 따라 달라집니다.

위의 모든 코드는 다음과 같습니다.

H4:after( 내용:"애너글리프 텍스트"; 위치:절대; 왼쪽:361px; 위쪽:2px; 색상:rgba(255,0,0,0.5); )

그리고 우리가 얻는 효과는 다음과 같습니다.

이것이 제가 이번 수업에서 여러분에게 가르치고 싶었던 전부입니다.

이 기술을 꼭 사용해 보세요! 첫째로:아름다운, 둘째:모든 헤드라인은 검색 로봇이 완벽하게 읽을 수 있습니다. 셋째:코드를 작성하고 나면 HTML 코드에서 헤더를 선언하기만 하면 사이트나 블로그의 모든 웹페이지에서 헤더를 사용할 수 있습니다.

이번 강의가 마음에 드셨다면, 귀하의 의견을 작성하세요(마음에 들지 않으셨다면 :)). 감사한 마음으로 받아들여질 것입니다.

소셜 네트워크 버튼을 사용하여 친구들과 수업을 공유할 수도 있습니다.

물론, 블로그 업데이트를 구독하세요(아직 구독하지 않은 경우). 유용하고 흥미로운 것들을 많이 약속드립니다!

기분 좋게 지내시고 또 만나요!

이 기사의 목적은 h1, h2 제목 스타일에 대한 다양한 옵션을 고려하는 것입니다. H1 태그는 페이지 본문에 있는 중요한 태그입니다. 일반적으로 페이지의 주제별 제목이 포함됩니다. H1 태그는 사용자가 사이트 페이지의 내용을 쉽게 이해할 수 있도록 눈에 띄어야 합니다. 따라서 이 태그가 페이지의 하이라이트가 되어야 합니다. H1 태그의 CSS 스타일은 간단할 수 있지만 가장 중요한 것은 글꼴 크기가 페이지의 다른 태그 중에서 가장 큰지 확인하는 것입니다. 이는 사용자의 시선을 사로잡을 뿐만 아니라 페이지의 관련성, 즉 최적화에도 중요한 역할을 합니다.

H2 태그는 보완적인 태그이며 H1의 의미론적 하위 구분일 수 있습니다. 스타일 지정 옵션도 고려할 것입니다.

다음은 h1, h2 제목에 대한 CSS 스타일링의 예와 방법입니다.

스타일링 방법h1,h2 헤더

예CSSH1,H2

스타일링 방법h1,h2 헤더

피드를 생성할 때 h1, h2 태그의 스타일을 지정하는 방법을 고려해 보겠습니다. 리본 형태로 헤더를 구현하는 두 가지 옵션인 Western 버전과 내 버전을 살펴보겠습니다. 제 방법이 우선이라고 미리 말씀드리지만, 혹시 머리글 스타일링에 대한 여러분만의 옵션(방법)이 있으시면 댓글로 공유해주시면 감사하겠습니다.

서양식

좋은 옵션이지만 피드를 구현하는 CSS 방식이 별로 마음에 들지 않습니다. 서양 사이트 중 하나에서 CSS h1 리본을 만드는 방법을 찾았습니다. 이 피드는 브라우저 간 호환성이 저하되었지만(IE에서는 단순한 블록처럼 보임) 순수한 CSS 코드를 사용하여 구현됩니다. 아래는 스타일 CSS 소스 코드입니다.

H1.ribbon( 글꼴 크기: 16px !important; 위치: 상대; 배경: #ba89b6; 색상: #fff; 텍스트 정렬: 중앙; 패딩: 1em 2em; 여백: 0 0 3em; ) h1.ribbon:before, h1.ribbon:after ( 내용: ""; 위치: 절대; 표시: 블록; 하단: -1em; 테두리: 1.5em 실선 #986794; z-index: -1; ) h1.ribbon:before ( 왼쪽: -2em ; 테두리 오른쪽 너비: 1.5em; 테두리 왼쪽 색상: 투명; ) h1.ribbon:after ( 오른쪽: -2em; 테두리 왼쪽 너비: 1.5em; 테두리 오른쪽 색상: 투명; ) h1. 리본 .ribbon-content:before, h1.ribbon .ribbon-content:after ( 내용: ""; 위치: 절대; 표시: 블록; 테두리 스타일: 단색; 테두리 색상: #804f7c 투명 투명 투명; 하단: - 1em; ) h1.ribbon .ribbon-content:before ( 왼쪽: 0; 테두리 너비: 1em 0 0 1em; ) h1.ribbon .ribbon-content:after ( 오른쪽: 0; 테두리 너비: 1em 1em 0 0; )

HTML 코드에서 h1 리본은 다음과 같습니다.

사이트에 대한 h1, h2 헤더의 CSS 스타일

내 방식

보시다시피 CSS 코드는 h1 태그에만 스타일을 지정하기가 번거롭습니다. 그러므로 나는 그러한 테이프를 만드는 나만의 방법을 제안합니다. 브라우저 간 호환성은 IE, FireFox, Opera, Chrome에서 테스트되었습니다. 아래는 CSS 코드와 모든 소스 파일입니다.

H1(높이:67px; 배경: url(ribbon_left.png) 왼쪽 상단 반복 없음; 색상:#FFF;) h1 강함(높이:67px; 디스플레이:블록; 최대 너비:450px; 여백-왼쪽:56px; 패딩 -right:56px; 배경: url(ribbon_right.png) 오른쪽 상단 no-repeat;)

HTML에서 사용하는 방법:

사이트의 CSS H1 헤더

이미지:

이미지의 총 크기는 750바이트입니다. CSS 코드는 두 줄을 넘지 않으며 크기는 236바이트입니다. 결과에 만족하며 CSS 코드의 무게가 980바이트인 서양식 방식과 달리 모든 것이 간단하고 명확합니다. 내 버전과 서양 버전의 무게는 동일하지만 Photoshop에서 이미지를 처리하는 것보다 코드를 이해하는 것이 훨씬 더 나쁩니다. CSS 파일 1개의 로딩 속도가 파일 3개보다 빠르다고 가정할 수 있지만(CSS 파일 1개의 무게와 완전히 동일), 배경을 스프라이트 형태로 구현할 수 있어 사이트의 로딩 속도가 빨라집니다. . CSS 스프라이트를 사용하여 속도를 높이는 방법에 대해 알아보세요.

CSS H1, H2의 예

모든 예시는 제 방식(예, 사이트)을 이용하여 제목을 스타일링하는 원리를 바탕으로 구현됩니다.

H1 헤더의 CSS 스타일

이 단락에서는 h1 헤더 스타일의 실제 예에 중점을 둘 것입니다. 각 사이트마다 독특한 디자인이 있기 때문에 큰 소리로 예를 들어 보겠습니다. H1 스타일링의 보편적인 예를 하나 들어보겠습니다. 제목 스타일 지정에 대한 내 아이디어를 이미 이해하셨을 것입니다. Photoshop에서 쉽게 수행할 수 있는 배경 이미지의 투명도를 사용하여 이를 보완하고 싶습니다. 아래 예를 참조하세요.

제목(너비:500px; 배경: #888;) h1(높이:70px; 배경: url(left.png) 왼쪽 상단 반복 없음; 색상:#FFF; 줄 높이: 50px;) h1 강함(높이:70px ; 디스플레이:블록; 여백-왼쪽:60px; 배경: url(right.png) 오른쪽 상단 반복 없음;)

원본 사진:

보시다시피 원본 이미지에는 반투명이 있으며 제목 클래스에서 배경 값을 변경하면 다음과 같은 결과를 얻을 수 있습니다.

CSS h1 + h2(협업 스타일링)

사이트에 h2 태그에 배치할 수 있는 에필로그나 기사에 대한 간단한 소개가 있는 경우 h1과 h2를 함께 스타일링하는 것이 적합합니다. 예를 들어:

H1– h1, h2 제목 스타일링;

H2– CSS를 사용하여 h1, h2 제목을 디자인하는 방법을 배웁니다.

이것은 나의 예입니다. 아마도 웹사이트 페이지를 디자인하는 방법에 대한 자신만의 아이디어가 있을 것입니다. CSS h1 + h2 예제는 이전 예제와 유사합니다. CSS 코드를 살펴보겠습니다.

왼쪽(높이:100px; 배경: url(left.png) 왼쪽 상단 반복 없음;) .right( 너비:500px; 높이:100px; 디스플레이:블록; 여백-왼쪽:45px; 패딩: 0px 45px 0px 0px; 배경 : url(right.png) 오른쪽 상단 반복 없음;) h1 (색상:#FFF; 글꼴 크기:18px; 패딩:15px;) h2 (색상:#CCC; 글꼴 크기:16px; 패딩:5px;)

원본 사진:

표시하다:

제목 연결(h1 + h2) 스타일의 본질은 이전 예와 유사하며 이 경우에만 div 블록이 사용됩니다.

H2 헤더의 CSS 스타일

h2 헤더의 스타일을 지정하는 것은 까다롭지 않습니다. 그러나 우리 기사는 h1 및 h2 제목의 스타일에 관한 것이므로 끝까지 모든 것을 고려할 것입니다.

일반적으로 h2 태그는 기사의 하위 단락이나 사이트의 기타 자료를 강조하는 데 사용되며 겸손하고 신중하지만 편리한 h2 제목을 만드는 것이 좋습니다. 저는 Wikipedia가 어떻게 구성되어 있는지에 대한 아이디어를 정말 좋아합니다. 비슷한 것을 만드는 것이 좋습니다. 간단하고 편리합니다. 예를 들어:

H2 헤더 스타일링 예

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. leo vel ipsum elementum sodales의 정수입니다. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. 서스펜디스 egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridericulus mus.

기사의 다른 하위 섹션

Nulla venenatis, turpis eu 현관tincidunt, felis diam luctus velit, facilis cursus mi ligula vitae nunc. 큐라비투르 리베로. 퓨즈 펠리스. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur solicitudin nonummy est. Nullam Molestie lectus quis nibh.

표시하다:

간단하고 편리하며 크로스 브라우저입니다.

어떤 종류의 웹사이트나 웹 애플리케이션을 개발하든 항상 h1이나 h2와 같은 제목에 대한 스타일을 만들어야 합니다. 이 튜토리얼에서는 의사 요소를 사용하여 제목에 적용되는 여러 효과를 살펴보겠습니다.

의사 요소가 사용되는 이유는 무엇입니까? 대답은 간단합니다. 추가 마크업이 필요하지 않습니다.

HTML

겸손하게 교훈을 받아들이십시오

특별한 표시는 없습니다. 클래스를 나타내는 일반 제목입니다.

CSS

본문( 너비: 60%; 여백: 50px 자동; 패딩: 15px; 위치: 상대; /*헤더 4에 필요*/ z-index: 0; /*헤더 4에 필요*/ 테두리: 7px 솔리드 #cecece; 테두리 : 7px 솔리드 rgba(0,0,0,.05); 배경: #fff; 배경 클립: 패딩 상자; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .5); Sans", sans-serif; 글꼴- 크기: 22px;

background-clip: padding-box 선언에 유의하세요. 컨테이너를 위한 투명한 프레임이라는 흥미로운 효과를 얻는 데 도움이 됩니다. CSS background-clip 속성은 요소의 배경(색상 또는 이미지)이 기본 레이어와 상호 작용할지 여부를 결정합니다.

이 간단하고 멋진 효과는 테두리 속성을 사용하여 얻을 수 있습니다.

헤드라인1( border-bottom: 1px dashed #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; padding: 5px 15px)

제목 2

이 스타일은 삼각형 방법을 사용하여 얻을 수 있습니다.

Headline2( border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position:relative; ) .headline2:before, .headline2:after( content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; 위치: 절대 왼쪽: 25px; .headline2:after( border-top-color: #fff; border-right-color: transparent; 하단: 왼쪽: 26px )

제목 3

하지만 이 리본 효과를 사용하여 제목을 디자인할 수도 있습니다.

Headline3( 위치: 상대; margin-left: -22px; /* 15px 패딩 + 7px 테두리 리본 그림자*/ margin-right: -22px; 패딩: 15px; 배경: #e5e5e5; 배경: -moz-linear-gradient(# f5f5f5, #e5e5e5); 배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#f5f5f5), to(#e5e5e5)) 배경: -webkit-linear-gradient(#f5f5f5, #e5e5e5); 배경: -o-linear-gradient(#f5f5f5, #e5e5e5); 배경: -ms-linear-gradient(#f5f5f5, #e5e5e5) 배경: 선형-그라디언트(#f5f5f5, #e5e5e5); 0 rgba(255,255,255,.8) 삽입; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) 삽입; 상자-그림자: 0 -1px 0 rgba(255,255,255,.8) 텍스트-그림자 : 0 1px 0 #fff; ) .headline3:before, .headline3:after( 위치: 절대; 왼쪽: 0; 하단: -6px; 내용:""; 테두리 상단: 6px 솔리드 #555; 테두리 왼쪽: 6px solid transparent; .headline3:before( border-top: 6px solid #555; border-right: 6px solid transparent; border-left: 없음; 왼쪽: 자동; 오른쪽: 0; 하단: -6px; )

box-shadow 속성을 사용하여 멋진 제목을 만들 수도 있습니다.

Headline4( 위치: 상대; 테두리 색상: #eee; 테두리 스타일: 단색; 테두리 너비: 5px 5px 5px 0; 배경: #fff; 여백: 0 0 15px -15px; 패딩: 5px 15px; -moz-box -그림자: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); 상자 그림자: 1px 1px 1px rgba(0 ,0,0,.3); .headline4:after ( 내용: ""; 위치: 절대; z-색인: -1; 하단: 15px; 오른쪽: 15px; 너비: 70%; 높이: 10px; 배경: rgba (0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0 , .7); 상자 그림자: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: 회전(2deg); -moz-transform: 회전(2deg); ms-변환: 회전(2deg); 변환: 회전(2deg)