HTML5 실습 - CSS를 사용하여 시간 ICON을 만드는 방법에 대한 자세한 설명(그림)-H5 튜토리얼-php.cn

HTML5 실습 - CSS를 사용하여 시간 ICON을 만드는 방법에 대한 자세한 설명(그림)

黄舟

풀어 주다： 2017-03-23 16:03:38

원래의

2416명이 탐색했습니다.

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

　포토샵 개념도

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

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

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

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

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

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

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

달력 아이콘 상단에 있는 시간 내용에 대한 글꼴 효과를 Photoshop의 글꼴 도구를 사용하여 설정합니다. 글꼴은 Helvetica이고 색상은 #9e9e9e입니다.

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

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

　HTML 구조

rree

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

CSS 스타일

<p class="date">
    <p>25 <span>May</span></p></p>

로그인 후 복사

CSS 스타일은 먼저 전체 컨테이너의 높이와 너비를 설정하는데, 쉽게 할 수 있습니다. CSS의 그라디언트를 통해 그라디언트 효과를 얻으려면.

.date {
    width: 130px; height: 160px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}

로그인 후 복사

Photoshop에서 border 속성을 사용하여 1px 테두리 효과를 얻은 다음 border-radius를 사용하여 둥근 모서리 효과를 얻습니다. 이전 브라우저와의 호환성을 위해 -moz- 및 -webkit- 접두사를 추가하는 것을 잊지 마십시오.

.date {
    width: 130px; height: 160px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    border: 1px solid #d2d2d2;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

로그인 후 복사

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

.date {
    width: 130px; height: 160px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    border: 1px solid #d2d2d2;
    border-radius: 10px;
    -moz-border-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);
}

로그인 후 복사

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

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}

로그인 후 복사

　　红色部分的实现是通过为span的背景设置linear-gradient属性实现的，红色的数值也是来自于photoshop。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
}

로그인 후 복사

　　修改文字样式，使它和设计匹配，大小设置为45px，设置为粗体字，颜色设置为白色，使用text-transform实现大写转换。将span标签设置为块元素，这样他就会匹配容器的大小了，设置红色背景。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
    border-top: 3px solid #a13838;
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    padding: 6px 0 6px 0;
}

로그인 후 복사