css_html5 튜토리얼 스킬을 활용한 ICON 메소드 연습 시간 만들기-H5 튜토리얼-php.cn

css_html5 튜토리얼 스킬을 활용한 ICON 메소드 연습 시간 만들기

WBOY

풀어 주다： 2016-05-16 15:50:56

원래의

1473명이 탐색했습니다.

최근에 나는 블로그 사이트를 다시 디자인하면서 달력 스타일 아이콘을 사용하여 시간을 표시하기로 결정했습니다. 이전 솔루션은 일반적으로 배경 이미지를 사용하는 것이었습니다. CSS3 덕분에 이제 CSS3를 사용하여 이 기능을 구현할 수 있습니다. 이전 Photoshop 디자인을 대체하기 위해 일부 선형 그라데이션, 테두리 반경 및 상자 그림자 속성을 사용할 것입니다.

포토샵 컨셉맵

많은 디자이너들이 브라우저에서 직접 디자인하는 방법을 사용하지만, 저는 여전히 포토샵 컨셉맵을 먼저 만드는 것을 선호합니다. 이제 CSS를 사용하여 많은 효과를 직접 얻을 수 있지만 Photoshop을 사용하여 효과를 디자인하는 방법은 최종적으로 원하는 효과를 얻기 위해 지속적으로 CSS를 수정하는 것보다 훨씬 간단합니다.

먼저 둥근 직사각형을 만들고 둥근 모서리 반경을 10px로 설정합니다. 나중에 CSS의 border-radius 속성을 사용하여 구현하겠습니다.

직사각형에 수직 그라데이션을 추가합니다. 그라데이션 색상은 #dad8d8부터 #fcfcfc까지입니다.

색상 #e3e3e3으로 1픽셀 획을 설정합니다.

마지막으로 불투명도 20%, 거리 0픽셀, 거리 0픽셀로 아래쪽 그림자 효과를 추가합니다. 15px 크기. 이러한 효과는 box-shadow 속성을 사용하여 CSS에서 구현됩니다.

방금 직사각형을 복사하여 윗부분을 제거하세요. #790909에서 #d40000까지 그라데이션을 수정하고 월 정보가 배치될 새로 생성된 사각형을 채웁니다.

상단 테두리를 나타내는 내부 그림자, 색상 #a13838, 100% 투명도, 3px 거리 및 0px 크기를 설정합니다.

캘린더 아이콘 상단의 시간 내용에 대한 글꼴 효과를 포토샵의 글꼴 도구를 사용하여 설정합니다. 글꼴은 Helvetica이고 색상은 #9e9e9e입니다.

아래 빨간색 부분에 월 정보를 입력하고, 글꼴은 넓게, 색상은 흰색으로 설정하세요.

포토샵 모델이 완성되었습니다. 과거에는 배경으로 이미지를 추출하고 그 위에 html 숫자를 썼지만 이제는 css를 사용하여 이 모든 작업을 수행할 수 있습니다.
HTML 구조

5월 25일

;/div>
이번 ICON 데모의 html은 매우 간단합니다. 컨테이너로 'date' 클래스가 있는 div를 사용한 다음 p 태그를 사용하여 날짜 번호를 나타냅니다. 일과 월은 디자인에서 다양한 크기의 문자로 표시되므로 태그를 사용하여 다양한 요소를 다르게 처리합니다.

css 스타일

코드 복사코드는 다음과 같습니다.

.date {
너비: 130px; 높이: 160px
배경: #fcfcfc;
linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); 🎜>배경: -moz-linear-gradient(상단, #fcfcfc 0%, #dad8d8 100%)
배경: -webkit-linear-gradient(상단, #fcfcfc 0%, #dad8d8 100%)
}

CSS 스타일은 먼저 전체 컨테이너의 높이와 너비를 설정하는데, CSS Gradient를 통해 그라데이션 효과를 쉽게 얻을 수 있습니다.

코드 복사코드는 다음과 같습니다.

.date {

너비: 130px; 높이: 160px;
배경: #fcfcfc;
배경: 선형-그라디언트(top, #fcfcfc 0%,#dad8d8 100%)
배경: -moz-linear-gradient( 상단, # fcfcfc 0%, #dad8d8 100%); 배경: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%)
테두리: 1px 솔리드
경계-반경: 10px;
-moz-경계-반경: 10px
-webkit-border-radius: 10px;

포토샵에서 1px 테두리 효과를 얻으려면 border 속성을 사용하고, 둥근 모서리 효과를 얻으려면 border-radius를 사용하세요. 이전 브라우저와의 호환성을 위해 -moz- 및 -webkit- 접두사를 추가하는 것을 잊지 마십시오.

코드 복사

코드는 다음과 같습니다.

.date {
너비: 130px; 높이: 160px;
배경: #fcfcfc;
배경: 선형-그라디언트(top, #fcfcfc 0%,#dad8d8 100%)
배경: -moz-linear-gradient( 상단, # fcfcfc 0%, #dad8d8 100%); 배경: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%)
테두리: 1px 솔리드
경계-경계: 10px;
-moz-경계-경계: 10px;
-webkit-border-radius: 10px;
상자 그림자: 0px 0px 15px rgba(0,0,0,0.1 );
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

코드의 마지막 부분에서는 포토샵 디자인에서 낮은 그림자 효과를 얻기 위해 box-shadow를 사용합니다. 0px의 수평 및 수직 오프셋과 15px의 흐림 효과를 추가합니다. RGBA를 사용하여 투명도를 제어합니다. 여기서는 Photoshop 디자인의 105가 0.1로 대체됩니다.

코드 복사코드는 다음과 같습니다.

.date p {
글꼴 계열: Helvetica, sans-serif;
글꼴 크기: 100px; 텍스트 정렬: 센터; 색상:
}

우리는 p 태그를 사용하여 스타일을 정의하고 날짜에 대한 텍스트 스타일 정의를 구현합니다. 글꼴, 텍스트 크기, 텍스트 색상은 모두 포토샵에서 복사되었으며, 텍스트 정렬은 가운데로 설정되어 있습니다. 그러나 스타일은 월 텍스트에도 영향을 미칩니다. 다음으로 이에 대한 범위 태그 스타일을 별도로 정의하겠습니다.

코드 복사코드는 다음과 같습니다.

.date pspan {

구현 빨간색 부분은 범위의 배경에 대한 선형 그라데이션 속성을 설정하여 달성됩니다. 빨간색 값도 Photoshop에서 가져온 것입니다.

코드 복사코드는 다음과 같습니다.

.date pspan {

배경: #d10000
배경: 선형-그라디언트(상단, #d10000 0%, #7a0909 100%)
배경: -moz-linear-gradient(상단, #d10000 0%, #7a0909 100%) ;
배경: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%)
글꼴 크기: 45px; 색상: #fff; -transform: uppercase;
display: block;
}

디자인에 맞게 텍스트 스타일을 수정하고, 크기를 45px로 설정하고, 굵게 설정하세요. , color 흰색으로 설정하고 텍스트 변환을 사용하여 대문자로 변환합니다. 스팬 태그를 컨테이너의 크기에 맞게 블록 요소로 설정하고 빨간색 배경을 설정합니다.

코드 복사코드는 다음과 같습니다.

.date pspan {

나머지는 border-top 스타일을 사용하고 border-radius 속성을 사용하여 아래쪽 둥근 모서리 2개를 구현하여 헤더 테두리를 추가하는 것입니다. 약간의 패딩 속성은 월 텍스트와 기타 요소의 상단과 하단 사이에 약간의 공간을 제공할 수 있습니다.
브라우저 호환성