최근에 나는 내 자신의 블로그 사이트를 재 설계했으며 캘린더 스타일 아이콘을 사용하여 시간을 표시하기로 결정했습니다. 이전 솔루션은 일반적으로 배경 이미지를 사용하는 것이 었습니다. CSS3 덕분에 이제 CSS3를 사용하여 이러한 기능을 구현할 수 있습니다. 이전 Photoshop 디자인을 대체하기 위해 선형 그레이드, 테두리 반경 및 박스 그림자와 같은 일부 속성을 사용합니다.
Photoshop 개념 다이어그램많은 디자이너가 브라우저에서 직접 설계하는 방법을 사용하지만 여전히 Photoshop 컨셉 다이어그램을 먼저 만드는 방법을 선호합니다. 현재 CSS로 많은 효과를 직접 구현할 수 있지만 Photoshop을 사용하여 효과를 설계하는 방법은 CSS를 지속적으로 수정하여 원하는 효과를 달성하는 방법보다 훨씬 간단합니다.
먼저 둥근 사각형을 생성하고 둥근 모서리 반경을 10px로 설정하십시오. 그 후, 우리는 CSS의 Border-Radius 속성을 사용합니다.
사각형에 세로 그라디언트를 추가하면 그라디언트 색상은 #DAD8D8에서 #FCFCFC로입니다.
1 픽셀 스트로크를 설정하면 색상은 #e3e3e3입니다
마지막으로 20% 투명도, 0 픽셀 거리 및 15 픽셀의 크기로 아래쪽 그림자 효과를 추가하십시오. 이러한 효과는 Box-Shadow 속성을 사용하여 CSS에서 구현됩니다.
지금 직사각형을 복사하고 상단 부분을 제거하십시오. #790909에서 #d40000까지의 그라디언트를 수정하고 새로 생성 된 사각형을 채우면 월 정보가 배치됩니다.
상단 테두리를 나타내는 내부 그림자를 설정하면 색상은 #A13838, 100% 투명성, 3px 거리 및 0px 크기입니다.
Photoshop의 글꼴 도구를 사용하여 캘린더 아이콘의 전반부의 글꼴 효과를 설정하십시오. 글꼴은 helvetica이고 색상은 #9e9e9e입니다.
아래의 빨간색 섹션에 월 정보를 입력하고 글꼴과 색상을 흰색으로 설정하십시오.
Photoshop 모델이 완료되었습니다. 과거에는 그림을 배경으로 꺼내어 HTML 번호를 작성했지만 이제는 CSS 로이 모든 것을 달성 할 수 있습니다.
HTML 구조<div class = date>
<p> 25 <Span> May </span> </p>
</div>
이번에는 아이콘 데모의 HTML이 매우 간단합니다. '날짜'클래스가있는 div를 컨테이너로 사용한 다음 P 태그를 사용하여 날짜 번호를 나타냅니다. 일과 달은 디자인에서 다른 크기로 표시되므로 <Span> 태그를 사용하여 다른 요소를 다르게 처리합니다.
CSS 스타일.날짜 {
너비 : 130px; 높이 : 160px;
배경 : #FCFCFC;
배경 : 선형 등급 (상단, #FCFCFC 0%, #DAD8D8 100%);
배경 : -moz-linear-gradient (상단, #fcfcfc 0%, #dad8d8 100%);
배경 : -webkit-linear-gradient (상단, #fcfcfc 0%, #dad8d8 100%);
}
CSS 스타일은 먼저 전체 컨테이너의 높이와 너비를 설정하고 CSS 구배를 통해 그라디언트 효과를 쉽게 달성 할 수 있습니다.
.날짜 {
너비 : 130px; 높이 : 160px;
배경 : #FCFCFC;
배경 : 선형 등급 (상단, #FCFCFC 0%, #DAD8D8 100%);
배경 : -moz-linear-gradient (상단, #fcfcfc 0%, #dad8d8 100%);
배경 : -webkit-linear-gradient (상단, #fcfcfc 0%, #dad8d8 100%);
국경 : 1px 고체 #d2d2d2;
Border-Radius : 10px;
-Moz 국경 Radius : 10px;
-webkit-border-radius : 10px;
}
테두리 속성을 사용하여 Photoshop에서 1px 테두리 효과를 달성 한 다음 Border-Radius를 사용하여 둥근 코너 효과를 달성하십시오. 구형 브라우저와의 호환성을 가능하게하기 위해 -moz- 및 -webkit- 접두사를 추가하는 것을 잊지 마십시오.
.날짜 {
너비 : 130px; 높이 : 160px;
배경 : #FCFCFC;
배경 : 선형 등급 (상단, #FCFCFC 0%, #DAD8D8 100%);
배경 : -moz-linear-gradient (상단, #fcfcfc 0%, #dad8d8 100%);
배경 : -webkit-linear-gradient (상단, #fcfcfc 0%, #dad8d8 100%);
국경 : 1px 고체 #d2d2d2;
Border-Radius : 10px;
-Moz 국경 Radius : 10px;
-webkit-border-radius : 10px;
Box-Shadow : 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를 통해 Photoshop Design에서 더 낮은 그림자 효과를 달성하는 것입니다. 0px 수평 및 수직 오프셋을 추가하여 15px의 모호성을 증가시킵니다. RGBA를 사용하여 투명성을 제어하십시오. Photoshop Design에서 105는 0.1로 대체됩니다.
.Date P {
Font-Family : Helvetica, Sans-Serif;
글꼴 크기 : 100px; 텍스트 정렬 : 센터; 색상 : #9e9e9e;
}
P 태그를 사용하여 스타일을 정의하여 날짜에 대한 텍스트 스타일을 정의합니다. 글꼴, 텍스트 크기 및 텍스트 색상은 모두 Photoshop에서 복사되며 텍스트 정상은 중앙으로 설정됩니다. 그러나 스타일은 또한 달 텍스트에 영향을 미치며 스팬 레이블 스타일을 별도로 정의합니다.
.Date P span {
배경 : #D10000;
배경 : 선형 등급 (상단, #D10000 0%, #7A0909 100%);
배경 : -moz-linear-gradient (상단, #d10000 0%, #7a0909 100%);
배경 : -webkit-linear-gradient (상단, #d10000 0%, #7a0909 100%);
}
빨간색 부분의 구현은 스팬 배경에 대한 선형 그레이드 속성을 설정하여 달성되며 빨간색 값도 Photoshop에서 제공됩니다.
.Date P span {
배경 : #D10000;
배경 : 선형 등급 (상단, #D10000 0%, #7A0909 100%);
배경 : -moz-linear-gradient (상단, #d10000 0%, #7a0909 100%);
배경 : -webkit-linear-gradient (상단, #d10000 0%, #7a0909 100%);
글꼴 크기 : 45px; 글꼴 중량 : 대담한; 색상 : #ffff; 텍스트 변환 : 대문자;
디스플레이 : 블록;
}
디자인과 일치하도록 텍스트 스타일을 수정하고, 크기를 45px로 설정하고, 대담한 글꼴로 설정하고, 색상을 흰색으로 설정하고, 텍스트 변환을 사용하여 자본 변환을 구현하십시오. 컨테이너의 크기와 일치하고 빨간색 배경을 설정하도록 스팬 태그를 블록 요소로 설정하십시오.
.Date P span {
배경 : #D10000;
배경 : 선형 등급 (상단, #D10000 0%, #7A0909 100%);
배경 : -moz-linear-gradient (상단, #d10000 0%, #7a0909 100%);
배경 : -webkit-linear-gradient (상단, #d10000 0%, #7a0909 100%);
글꼴 크기 : 45px; 글꼴 중량 : 대담한; 색상 : #ffff; 텍스트 변환 : 대문자;
디스플레이 : 블록;
테두리 : 3px 고체 #A13838;
Border-Radius : 0 0 10px 10px;
-Moz-Border-Radius : 0 0 10px 10px;
-webkit-border-radius : 0 0 10px 10px;
패딩 : 6px 0 6px 0;
}
나머지는 헤드 테두리를 추가하고, 테두리 탑 스타일을 사용하여 구현하고, Border-Radius 속성을 사용하여 하부에서 두 개의 둥근 모서리를 구현하는 것입니다. 약간의 패딩 속성은 월 텍스트가 위아래와 다른 요소 사이에 약간의 간격을 가질 수 있습니다.
브라우저 호환성CSS의 개선 된 속성은 Photoshop에서 그라디언트와 그림자의 영향을 달성하는 데 도움이 될 수 있지만, 우리는 여전히 웹 디자이너가 과거에 브라우저 호환성에 직면 해야하는 문제에 직면해야합니다.