CSS3로 Gmail 로고를 만드는 방법

몇 달 전에 CSS3로 RSS 피드 로고를 만드는 방법을 보여주었습니다. 조금 더 복잡한 것을 만드는 것이 재미있을 거라고 생각했습니다. 오늘의 글에서는 CSS3만을 사용하여 Gmail 로고를 변형하는 방법을 보여줄 것입니다..

단축키 :

• Gmail 로고 CSS 자습서 # 1 | 시사
• Gmail 로고 CSS 자습서 # 2 | 시사

Gmail 로고 # 1

이 첫 번째 로고는 간단하고 쉽게 만들 수 있습니다. 더 이상 신경 쓰지 않고 여기에 단계가 있습니다. 우선 가장 좋아하는 코드 편집기를 시작하고 다음 HTML 코드를 입력 한 다음 logo-gmail.html.

다음 CSS 스타일을 사이에 추가하십시오. 기본 CSS 값을 재설정하는 방법.

.gmail-logo, .gmail-logo *, .gmail-logo * : 이전, .gmail-logo * : 이후 margin : 0; 패딩 : 0; 배경 : 투명; border : 0; 윤곽선 : 0; 디스플레이 : 블록; 글꼴 : normal normal 0/0 serif; 

다음 CSS 코드는 Gmail 로고의 빨간색 배경과 둥근면을 제공합니다..

 .gmail-logo margin : 110px auto; 배경 : rgb (201, 44, 25); 너비 : 600px; 높이 : 400px; border-top : 4px 솔리드 rgb (201, 44, 25); border-bottom : 4px 솔리드 rgb (201, 44, 25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; 

그런 다음 빨간색 배경 내에 흰색 상자를 만듭니다..

 .gmail-logo .gmail-box overflow : hidden; 왼쪽으로 뜨다; 너비 : 440px; 높이 : 400px; 여백 : 0 0 0 80px; 배경 : 흰색; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; 

빨간색 "M"효과를 만들려면 먼저 빨간색 테두리가있는 상자를 만듭니다..

 .gmail-logo .gmail-box : before 위치 : 상대적; 크기 : 320px, 테두리 : 100px 솔리드 rgb (201, 44, 25), 여백 : -310px 0 0 -40px, border- 반지름 : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; -moz-transform : 회전 (45deg); -webkit-transform : 회전 (45deg); -o-transform : rotate (45deg );

그런 다음 과도한면을 숨기고 붉은 색의 완전한 "M"을줍니다..

 .gmail-logo .gmail-box overflow : hidden; 

자, 두 개의 얇은 빨간색 테두리를주고 봉투 모양을 보겠습니다..

 .gmail-logo .gmail-box : content : "; float : 왼쪽; 너비 : 360px; 높이 : 360px; 테두리 : 2px 솔리드 rgb (201, 44, 25); 여백 : 10px 0 0 40px; : 회전 (45deg), - 웹킷 변환 : 회전 (45deg), -moz-transform : 회전 (45deg);

우리는 거의 끝났습니다. 빨간 봉투에 그라디언트를 추가합시다..

 .gmail-logo : content : "; 위치 : 상대, Z- 색인 : 2, 내용 :"; 왼쪽으로 뜨다; margin-top : -404px; 너비 : 600px; 높이 : 408px; 디스플레이 : 블록; 배경 : -moz-linear-gradient (top, rgba (255, 255, 255, 0.3) 0 %, / * rgba (255, 255, 255, 0.3) 30 %, * / rgba (255, 255, 255, 0.1 ) 100 %); 배경 : -o 선형 그라디언트 (top, rgba (255, 255, 255, 0.3) 0 %, / * rgba (255, 255, 255, 0.2) 30 %, * / rgba (255, 255, 255, 0.1 ) 100 %); 배경 : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, rgba (255, 255, 255, 0.3)), / * 컬러 스톱 (30 %, rgba (255, 255, 255 , 0.2)), * / color-stop (100 %, rgba (255, 255, 255, 0.1)));  

마지막으로, 털어 놓을 때 다른 색상을 부여합시다. 다음 HTML DOCTYPE을 앞에 추가하십시오.

그리고 이전의 다음 CSS 스타일

 .gmail-logo : 마우스 오버 (배경 : # 313131; border-color : # 313131; / * 커서 : 포인터; * / .gmail-logo : 마우스를 가져 가면 .gmail-box : before border-color : # 313131;  .gmail-logo : hover .gmail-box : border-color : # 313131; border-bottom-color : #fff; border-right-color : #fff; 

미리보기 | 소스 파일 다운로드

Gmail 로고 # 2

다음으로 약간의 3D 효과를 사용하여 다른 관점에서 Gmail 로고를 만듭니다. 기본 HTML 마크 업부터 시작하겠습니다..

로고는 다른 시각을 가지고 있기 때문에 조금씩 회전하고 필요한 레이어를 만듭니다. 집단) 순차적으로.

 # gmail-logo2 여백 : 0 자동; 디스플레이 : 블록; 너비 : 380px; 높이 : 290px; -moz-transform : rotate (6deg); -webkit-transform : rotate (6deg); -o-transform : rotate (6deg); 변형 : 회전 (6deg);  # gmail-logo2 .element1 display : block; 너비 : 380px; 높이 : 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float : left; 디스플레이 : 블록; 너비 : 380px; 높이 : 290px; 여백 : -290px 0 0 0;  

스타일링 .element1 :: before

 # gmail-logo2 .element1 :: before content : "; 위치 : 상대적; 여백 : 2 픽셀 0 0 14 픽셀, 부동 : 왼쪽, 디스플레이 : 블록, 배경 : rgb (201, 44, 25), 너비 : 30 픽셀, 높이 : 276px; -moz-transform : 회전 (3deg); -webkit-transform : 회전 (3deg); -o-transform : 회전 (3deg); 변형 : 회전 (3deg); 테두리 반경 : 22px 0 0 20px; -border-radius : 22px 0 0 20px; -webkit-border-radius : 22px 0 0 20px; 상자 그림자 : -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10 0), -5px 5px 0 rgb (109, 10 0), -6px 6px 0 rgb , 0), -webkit-box-shadow : -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0) -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10 0), -6px 6px 0 rgb (109, 10, 0), -moz-box-shadow : -1px 1px 0 (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), 5px (109,10,0), 2px 2px 0 rgb 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); 

스타일링 .element1 :: after

 # gmail-logo2 .element1 :: after content : "; 위치 : 상대적; 여백 : 40px 5px 0 0; 표시 : 블록, 배경 : rgb (201, 44, 25), 너비 : 30px, 높이 : 238px; -moz-transform : 회전 (3deg); -webkit-transform : 회전 (3deg); -o-transform : 회전 (3deg); 변형 : 회전 (3deg); 테두리 반경 : 0 18px 26px 0; -webkit -border-radius : 0 18px 26px 0; -moz-border-radius : 0 18px 26px 0; 상자 그림자 : -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10 0), -5px 5px 0 rgb (109, 10 0), -6px 6px 0 rgb , 0), -6px 7px 0 rgb (109, 10, 0), -moz-box-shadow : -1px 1px 0 rgb (109, 10 0), -2px 2px 0 rgb (109, 10, -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10 0), -5px 5px 0 rgb (109, 10 0), -6px 6px 0 rgb (109, 10, 0) ), -6px 7px 0 rgb (109, 10, 0), -webkit-box-shadow : -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), 3px 0 rgb (109, 10, 0), 4px 4px 0 rgb -6px 7px 0 rg b (109, 10, 0);  

스타일링 .element2 :: before

 # gmail-logo2 .element2 :: before content : "; margin : 22px 0 0 48px; 왼쪽 : 디스플레이; 블록; 배경 : rgb (201, 44, 25); 너비 : 315px; 높이 : 14px; (6.8deg), 회전 (6.8deg), 회전 (6.8deg), 회전 (6.8deg), 회전 (6.8deg), 회전 : 회전 (6.8deg), 상자 그림자 : 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109,10,0), 0 3px 0 rgb (109,10,0), 0 4px 0 rgb (109, 10 0), 0 5px 0 rgb (109, 0, 0px 0 rgb (109, 10, 0), 0px 0 rgb (109, 10, 0), 0px 0 rgb (109,10,0), 0 3px 0 (109, 10, 0), 0px0 rgb (109, 10,0), 0px0 rgb (109,10,0), -6px 6px 0 rgb (109,10,0), -moz-box - 그림자 : 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10 0), 0 3px 0 rgb (109, 10 0), 0 4px 0 rgb (109, 10, 0) , 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

스타일링 .element2 :: after

 # gmail-logo2 .element2 :: after content : "; position : relative, margin : 230px 0 0 36px, float : 왼쪽, 디스플레이 : 블록, 배경 : rgb (201, 44, 25), 너비 : 310px, 높이 : 12px, 상자 그림자 : 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10 0), 0 3px 0 rgb (109,10,0), 0 4px 0 rgb (109, 10, 0) 0, 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -webkit-box-shadow : 0 1px 0 rgb (109, 10, 0), 0 2px (109,10,0), 0 3px 0 rgb (109,10,0), 0 4px 0 rgb (109,10,0), 0 5px 0 rgb (109, 10 0), -6px 6px 0 (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), -moz-box-shadow : 0 1px 0 rgb ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10 0), -6px 6px 0 rgb (109, 10, 0)

스타일링 .element3 :: before

 # gmail-logo2 .element3 :: before content : "; 위치 : 상대적, 여백 : 8px 0 0 42px, 부동 : 왼쪽, 디스플레이 : 블록, 배경 : rgb (201, 44, 25), 너비 : 42px, 높이 : 268px; -moz-transform : 회전 (3deg); -webkit-transform : 회전 (3deg); -o-transform : 회전 (3deg); 변형 : rotate (3deg);

스타일링 .element3 :: after

 # gmail-logo2 .element3 :: after content : "; position : relative, margin : 40px 32px 0 0, float : right, 디스플레이 : 블록, 배경 : rgb (201, 44, 25), 너비 : 22px, 높이 : 236px; -moz-transform : 회전 (3.0deg); -webkit-transform : 회전 (3.0deg); -o-transform : 회전 (3.0deg); 변환 : rotate (3.0deg); 상자 그림자 : 0 1px 0 (109, 10, 0), 0 5px 0 rgb (109,10,0), 0 4px 0 rgb (109,10,0), 0 2px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0) - 웹 상자 그림자 : 0 1px 0 rgb , 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10 0), 0 5px 0 rgb (109, 10 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow : 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10 0), 0 3px 0 rgb (109, 10 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0)

스타일링 .element4 :: before

 # gmail-logo2 .element4 :: before content : "; 위치 : 상대적, 여백 : -2px 0 0 130px, 왼쪽 : 표시, 블록, 배경 : rgb (201, 44, 25), 너비 : 54px, 높이 : -moz-transform : 회전 (-49deg), -webkit-transform : 회전 (-49deg), -o-transform : 회전 (-49deg), 변형 : 회전 (-49deg), 상자 그림자 : -1px (109, 10, 0), -3px 0 rgb (109, 10, 0), -4px 0 rgb (109, 10, 0) (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0), -6px 0 0 rgb ), -moz-box-shadow : -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px (109, 10, 0), -6px 0 rgb (109, 10, 0), -7px 0 rgb (109, 10, 0) -webkit-box-shadow : -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 0 rgb (109, 10, 0) (109, 10, 0), -4px 0 rgb (109, 10, 0), -5px 0 rgb (109, 10 0), -6px 0 rgb (109, 10 0), -7px (109, 10, 0), -8px 0 rgb (109, 10, 0);

스타일링 .element4 :: after

 # gmail-logo2 .element4 :: after content : "; 위치 : 상대적; 여백 : 12px 88px 0 0; 표시 : 블록, 배경 : rgb (201, 44, 25), 너비 : 54px, 높이 : -webkit-border-radius : 30px 0 0 0 -moz-border-radius : 30px 0 0 0 -moz-transform : rotate (53deg); -webkit-transform : 회전 (53도), 회전 (53도), 변형 : 회전 (53도);

스타일링 .element5 :: before

# gmail-logo2 .element5 :: before content : "; 위치 : 상대적; 여백 : 115px 0 0 125px, 부동 : 왼쪽, 표시 : 블록, 배경 : rgb (201, 44, 25), 너비 : 2px, 높이 : 150px, -moz-transform : 회전 (55deg), -o-transform : 회전 (55deg), -webkit-transform : 회전 (55deg), 변형 : rotate (55deg)

스타일링 .element5 :: after

 # gmail-logo2 .element5 :: after 위치 : 상대적; 내용 : 마진 : 115px 0 0 150px, 왼쪽 : 표시, 블록, 배경 : rgb (201, 44, 25), 너비 : 2px, 높이 : 150px, -moz-transform : rotate (-50deg) Webkit-transform : 회전 (-50deg), -o-transform : 회전 (-50deg), 변형 : 회전 (-50deg);

우선 순위 조정 Z- 색인.

 # gmail-logo2 .element1 :: before z-index : 3 # gmail-logo2 .element1 :: z-index : 1; / * # gmail-logo2 .element2 :: before  * / # gmail-logo2 .element2 :: after z-index : 2; # gmail-logo2 .element3 :: before z-index : 5; # gmail-logo2 .element3 :: after z-index : 1; # gmail-logo2 .element5 :: before  # gmail-logo2 .element4 :: before z-index : 4; # logo2 .element5 :: after  * /

우리는 거의 끝났습니다. Gmail 로고는 다음과 같습니다.

마지막으로, 마우스를 올렸을 때 다른 색상을 지정하겠습니다..

 # gmail-logo2 : hover * :: after, # gmail-logo2 : hover * :: before background : rgba (20, 196, 7, 1);  # gmail-logo2 : hover .element1 :: before box-shadow : -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow : -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow : -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2 : hover .element1 :: after box-shadow : 1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -moz-box-shadow : -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 (10,90,4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -webkit-box-shadow : -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 (10,90,4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4);  # gmail-logo2 : hover .element2 :: before box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2 : hover .element2 :: after box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2 : hover .element3 :: after box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow : 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2 : hover .element4 :: before box-shadow : -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 (10,90,4), -4px 0 rgb (10, 90, 4), -5px 0 rgb (10,90,4), -6px 0 rgb (10, 90, 4), -7px 0 rgb (10, 90, 4), -8px 0 rgb (10, 90, 4); -moz-box-shadow : -1px 0 0 rgb (10, 90, 4), -2px 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 (10,90,4), -5px 0 0 rgb (10,90,4), -6px 0 0 rgb (10,90,4), -7px 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-box-shadow : -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 (10,90,4), -5px 0 0 rgb (10,90,4), -6px 0 0 rgb (10,90,4), -7px 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); 

미리보기 | 소스 파일 다운로드

편집자 주 : 이 게시물은에 의해 작성됩니다 이맘 켄 데니 Hongkiat.com. Indham으로도 알려진 Irham은 인도네시아의 웹 디자이너이자 개발자입니다. 그는 또한 CSS와 WordPress 테마 개발을 좋아합니다..