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

최근에 나는 블로그 사이트를 다시 디자인하면서 달력 스타일 아이콘을 사용하여 시간을 표시하기로 결정했습니다. 이전 솔루션은 일반적으로 배경 이미지를 사용하는 것이었습니다. 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 {

배경: #d10000
배경: 선형-그라디언트(상단, #d10000 0%, #7a0909 100%)
배경: -moz-linear-gradient(상단, #d10000 0%, #7a0909 100%) ;
배경: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%)
}

구현 빨간색 부분은 범위의 배경에 대한 선형 그라데이션 속성을 설정하여 달성됩니다. 빨간색 값도 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 {

배경: #d10000
배경: 선형-그라디언트(상단, #d10000 0%, #7a0909 100%)
배경: -moz-linear-gradient(상단, #d10000 0%, #7a0909 100%) ;
배경: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%)
글꼴 크기: 45px; 색상: #fff; -변환: 대문자;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px; ;
-webkit-border-radius: 0 0 10px 10px
패딩: 6px 0 6px 0
}



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

CSS의 향상된 속성이 Photoshop에서 그라데이션 및 그림자 효과를 얻는 데 도움이 될 수 있지만 여전히 웹 디자이너의 이전 요구 사항에 직면해야 합니다. 브라우저 호환성 문제.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.