Cách tạo logo Gmail bằng CSS3

Vài tháng trước tôi đã chỉ cho bạn cách tạo logo RSS feed bằng CSS3. Tôi hình dung sẽ rất vui khi tạo ra thứ gì đó phức tạp hơn một chút. Trong bài đăng hôm nay, tôi sẽ chỉ cho bạn cách tạo không chỉ một, mà là hai biến thể của logo Gmail chỉ bằng CSS3.

Các phím tắt để:

• Hướng dẫn sử dụng CSS logo CSS # 1 | Xem trước
• Hướng dẫn sử dụng CSS logo CSS # 2 | Xem trước

Logo Gmail # 1

Logo đầu tiên này là đơn giản, và khá dễ dàng để tạo ra. Nếu không có thêm rắc rối, đây là các bước. Hãy bắt đầu với việc kích hoạt trình soạn thảo mã yêu thích của bạn và nhập các mã HTML sau và lưu nó dưới dạng logo-gmail.html.

Thêm các kiểu CSS sau vào giữa để đặt lại giá trị CSS mặc định.

.gmail-logo, .gmail-logo *, .gmail-logo *: trước, .gmail-logo *: sau lề: 0; đệm: 0; nền: trong suốt; viền: 0; phác thảo: 0; hiển thị: khối; phông chữ: bình thường bình thường 0/0 serif; 

Các mã CSS sau cung cấp cho chúng tôi nền đỏ của logo Gmail và các cạnh được làm tròn.

 .gmail-logo lề: 110px tự động; nền: rgb (201, 44, 25); chiều rộng: 600px; chiều cao: 400px; viền trên cùng: rpx solid 4px (201, 44, 25); viền dưới: rpx solid 4px (201, 44, 25); bán kính đường viền: 10px; -moz-viền-bán kính: 10px; -webkit-Border-radius: 10px; 

Sau đó, chúng tôi tiến hành tạo hộp trắng trong nền đỏ.

 .gmail-logo .gmail-box tràn: ẩn; phao: trái; chiều rộng: 440px; chiều cao: 400px; lề: 0 0 0 80px; nền: trắng; bán kính đường viền: 5px; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; 

Để tạo hiệu ứng "M" màu đỏ, trước tiên chúng ta sẽ tạo một hộp có viền màu đỏ.

 .gmail-logo .gmail-box: trước vị trí: tương đối; nội dung: "; z-index: 1; nền: trắng; float: left; width: 320px; height: 320px; Border: 100px solid rgb (201, 44, 25); lề:-310px 0 0 -40px; Border- radius: 10px; -moz-Border-radius: 10px; -webkit-Border-radius: 10px; -moz-Transform: rotation (45deg); -webkit-Transform: rotation (45deg); -o-Transform: rotation (45deg );

Sau đó, chúng tôi tiến hành che giấu các mặt quá mức, cho chúng tôi một chữ "M" hoàn chỉnh màu đỏ.

 .gmail-logo .gmail-box tràn: ẩn; 

Bây giờ, hãy cho hai đường viền màu đỏ mỏng, cho nó nhìn phong bì.

 .gmail-logo .gmail-box: after content: "; float: left; width: 360px; height: 360px; Border: 2px solid rgb (201, 44, 25); lề: 10px 0 0 40px; -o-Transform : rotation (45deg); -webkit-Transform: rotation (45deg); -moz-Transform: rotation (45deg);

Chúng ta đang gần hoàn tất. Hãy thêm một số gradient vào phong bì màu đỏ.

 .gmail-logo: after content: "; vị trí: tương đối; z-index: 2; content:"; phao: trái; lề trên: -404px; chiều rộng: 600px; chiều cao: 408px; hiển thị: khối; nền: -moz-linear-gradient (trên cùng, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); nền: -o-linear-gradient (trên cùng, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, rgba (255, 255, 255, 0.3)), / * color-stop (30%, rgba (255, 255, 255 , 0,2)), * / dừng màu (100%, rgba (255, 255, 255, 0.1)));  

Cuối cùng nhưng không kém phần quan trọng, hãy cho nó một màu khác khi di chuột. Thêm DOCTYPE HTML sau đây trước

Và các kiểu CSS sau đây trước

 .gmail-logo: hover nền: # 313131; viền màu: # 313131; / * con trỏ: con trỏ; * / .gmail-logo: hover .gmail-box: trước Border-color: # 313131;  .gmail-logo: hover .gmail-box: after Border-color: # 313131; viền dưới cùng màu: #fff; viền phải-màu: #fff; 

Xem trước | Tải tập tin nguồn

Logo Gmail # 2

Tiếp theo, chúng tôi sẽ tạo logo Gmail từ một góc nhìn khác với hiệu ứng 3D nhỏ. Chúng ta sẽ bắt đầu với đánh dấu HTML cơ bản.

Vì logo có một góc nhìn khác, chúng tôi sẽ bắt đầu bằng cách xoay một chút và tạo các lớp cần thiết (chúng tôi sẽ gọi chúng là yếu tố) theo thứ tự.

 # gmail-logo2 lề: 0 tự động; hiển thị: khối; chiều rộng: 380px; chiều cao: 290px; -moz-Transform: xoay (6deg); -webkit-Transform: xoay (6deg); -o-Transform: xoay (6deg); biến đổi: xoay (6deg);  # gmail-logo2 .element1 display: block; chiều rộng: 380px; chiều cao: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; hiển thị: khối; chiều rộng: 380px; chiều cao: 290px; lề: -290px 0 0 0;  

Tạo kiểu .phần tử1 :: trước

 # gmail-logo2 .element1 :: before content: "; vị trí: tương đối; lề: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; height: 276px; -moz-Transform: rotation (3deg); -webkit-Transform: rotation (3deg); -o-Transform: rotation (3deg); Transform: rotation (3deg); Border-radius: 22px 0 0 20px; -moz -border-radius: 22px 0 0 20px; -webkit-Border-radius: 22px 0 0 20px; 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); -webkit-box-bóng: -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-bóng: -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); 

Tạo kiểu .phần tử1 :: sau

 # gmail-logo2 .element1 :: after content: "; vị trí: tương đối; lề: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: 238px; -moz-Transform: rotation (3deg); -webkit-Transform: rotation (3deg); -o-Transform: rotation (3deg); Transform: rotation (3deg); Border-radius: 0 18px 26px 0; -webkit -border-radius: 0 18px 26px 0; -moz-Border-radius: 0 18px 26px 0; 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), -6px 7px 0 rgb (109, 10, 0); -moz-box-bóng: -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 ), -6px 7px 0 rgb (109, 10, 0); -webkit-box-bóng: -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), -6px 7px 0 rg b (109, 10, 0);  

Tạo kiểu .phần tử2 :: trước

 # gmail-logo2 .element2 :: trước content: "; lề: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transform: rotation (6.8deg); -webkit-Transform: rotation (6.8deg); -o-Transform: rotation (6.8deg); Transform: rotation (6.8deg); 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); -webkit-box-bóng: 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); -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);

Tạo kiểu .phần tử2 :: sau

 # gmail-logo2 .element2 :: after content: "; vị trí: tương đối; lề: 230px 0 0 36px; float: left; display: block; background: rgb (201, 44, 25); width: 310px; height: 12px; hộp bóng: 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); -webkit-box-bóng: 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); -moz-box-bóng: 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);

Tạo kiểu .phần tử3 :: trước

 # gmail-logo2 .element3 :: before content: "; vị trí: tương đối; lề: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: 42px; height: 268px; -moz-Transform: rotation (3deg); -webkit-Transform: rotation (3deg); -o-Transform: rotation (3deg); Transform: rotation (3deg);

Tạo kiểu .phần tử3 :: sau

 # gmail-logo2 .element3 :: after content: "; vị trí: tương đối; lề: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 22px; height: 236px; -moz-Transform: rotation (3.0deg); -webkit-Transform: rotation (3.0deg); -o-Transform: rotation (3.0deg); Transform: rotation (3.0deg); 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); -webkit-box-bóng: 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); -moz-box-bóng: 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);

Tạo kiểu .phần tử4 :: trước

 # gmail-logo2 .element4 :: before content: "; vị trí: tương đối; lề: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; height : 192px; -moz-Transform: rotation (-49deg); -webkit-Transform: rotation (-49deg); -o-Transform: rotation (-49deg); Transform: rotation (-49deg); box-Shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0) ); -moz-box-bóng: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0); -webkit-box-bóng: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);

Tạo kiểu .phần tử4 :: sau

 # gmail-logo2 .element4 :: after content: "; vị trí: tương đối; lề: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 54px; height: 186px; Border-radius: 30px 0 0 0; -webkit-Border-radius: 30px 0 0 0; -moz-Border-radius: 30px 0 0 0; -moz-Transform: rotation (53deg); -webkit-Transform: xoay (53deg); -o-Transform: xoay (53deg); biến đổi: xoay (53deg);

Tạo kiểu .phần tử5 :: trước

# gmail-logo2 .element5 :: before content: "; vị trí: tương đối; lề: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-Transform: rotation (55deg); -o-Transform: rotation (55deg); -webkit-Transform: rotation (55deg); Transform: rotation (55deg);

Tạo kiểu .phần tử5 :: sau

 # gmail-logo2 .element5 :: sau vị trí: tương đối; nội dung: "; lề: 115px 0 0 150px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-Transform: rotation (-50deg); - webkit-Transform: rotation (-50deg); -o-Transform: rotation (-50deg); Transform: rotation (-50deg);

Điều chỉnh mức độ ưu tiên của chỉ số z.

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

Chúng ta đang gần hoàn tất. Logo Gmail của bạn sẽ trông giống như thế này:

Cuối cùng, hãy cho nó một màu khác khi di chuột.

 # gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before nền: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: trước 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-bóng: -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-bóng: -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); -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), -6px 7px 0 rgb (10, 90, 4);  # gmail-logo2: hover .element2 :: trước 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-bóng: 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-bóng: 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-bóng: 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-bóng: 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: lơ lửng 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-bóng: 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-bóng: 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 :: trước 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 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -moz-box-bóng: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-box-bóng: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); 

Xem trước | Tải tập tin nguồn

Ghi chú của biên tập viên: Bài này được viết bởi Irham Kendeni cho Hongkiat.com. Irham, còn được gọi là Indaam, là một nhà thiết kế và phát triển web đến từ Indonesia. Anh ấy cũng thích phát triển chủ đề CSS và WordPress.