Bagaimana Membuat logo Gmail dengan CSS3

Beberapa bulan yang lalu saya menunjukkan kepada anda cara membuat logo suapan RSS dengan CSS3. Saya fikir ia akan menjadi menyeronokkan untuk membuat sesuatu yang lebih kompleks. Dalam jawatan hari ini, saya akan menunjukkan kepada anda cara membuat tidak satu, tetapi dua variasi logo Gmail menggunakan hanya CSS3.

Pintasan kepada:

• Tutorial logo CSS CSS # 1 | Pratonton
• Logo Gmail tutorial CSS # 2 | Pratonton

Logo Gmail # 1

Logo pertama ini mudah, dan agak mudah dibuat. Tanpa berlengah-lengah lagi, berikut langkah-langkahnya. Mari mulakan dengan menembak editor kod kegemaran anda dan masukkan kod HTML berikut, dan simpan sebagai logo-gmail.html.

Tambah gaya CSS berikut di antara untuk menetapkan semula nilai CSS lalai.

.gmail-logo, .gmail-logo *, .gmail-logo *: sebelum, .gmail-logo *: after margin: 0; padding: 0; latar belakang: telus; sempadan: 0; garis besar: 0; paparan: blok; fon: normal normal 0/0 serif; 

Kod CSS berikut memberi kita latar belakang merah logo Gmail dan satu sisi bulat.

 .gmail-logo margin: 110px auto; latar belakang: rgb (201, 44, 25); lebar: 600px; ketinggian: 400px; border-top: rpb pepejal 4px (201, 44, 25); border-bottom: 4px solid rgb (201, 44, 25); jejari sempadan: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Kemudian, kami teruskan membuat kotak putih dalam latar belakang merah.

 .gmail-logo .gmail-box overflow: hidden; terapung: kiri; lebar: 440px; ketinggian: 400px; margin: 0 0 0 80px; latar belakang: putih; jejari sempadan: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Untuk menghasilkan kesan "M" merah, kami mula-mula membuat kotak dengan sempadan merah.

 .gmail-logo .gmail-box: before position: relative; kandungan: "; z-index: 1; latar belakang: putih; terapung: kiri; lebar: 320px; ketinggian: 320px; border: 100px solid rgb (201, 44, radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); );

Kemudian kita terus menyembunyikan sisi yang berlebihan, memberikan kita "M" lengkap dengan warna merah.

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

Sekarang, mari kita berikan dua sempadan merah nipis, memberikan sampul surat tersebut.

 .gmail-logo .gmail-box: after content: "float: left, width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; : berputar (45deg); -webkit-transform: putar (45deg); -moz-transform: berputar (45deg);

Kami hampir selesai. Mari tambah kecerunan pada sampul merah.

 .gmail-logo: after content: "; position: relative; z-index: 2; content:"; terapung: kiri; margin-top: -404px; lebar: 600px; ketinggian: 408px; paparan: blok; latar belakang: -moz-linear-kecerunan (atas, RGBA (255, 255, 255, 0.3) 0%, / * RGBA (255, 255, 255, 0.3) 30%, * / RGBA (255, 255, 255, 0.1 ) 100%); (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, berhenti warna (0%, rgba (255, 255, 255, 0.3)), / * stop-color (30%, rgba (255, 255, 255 , 0.2)), * / warna-stop (100%, rgba (255, 255, 255, 0.1)));  

Akhir sekali, mari kita beri warna yang berbeza apabila melayang. Tambah DOCTYPE HTML berikut sebelum ini

Dan gaya CSS berikut sebelum ini

 .gmail-logo: hover background: # 313131; border color: # 313131; / * kursor: penunjuk; * / .gmail-logo: hover .gmail-box: before border-color: # 313131;  .gmail-logo: hover .gmail-box: after border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Preview | Muat turun fail sumber

Logo Gmail # 2

Selanjutnya, kami akan membuat logo Gmail dari perspektif lain dengan kesan 3D yang sedikit. Kami akan bermula dengan markup HTML asas.

Oleh kerana logo mempunyai perspektif yang berbeza, kita akan bermula dengan berputar sedikit dan membuat lapisan diperlukan (yang akan kita panggil mereka unsur-unsur) dalam urutan.

 # gmail-logo2 margin: 0 auto; paparan: blok; lebar: 380px; ketinggian: 290px; -moz-transform: putar (6deg); -webkit-transform: berputar (6deg); -o-transform: berputar (6deg); mengubah: berputar (6deg);  # gmail-logo2 .element1 display: block; lebar: 380px; ketinggian: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; paparan: blok; lebar: 380px; ketinggian: 290px; margin: -290px 0 0 0;  

Penggayaan .element1 :: before

 # gmail-logo2 .element1 :: sebelum content: "; kedudukan: relatif: margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; Putar (3deg); -pilih-ubah: berputar (3deg); -o-transform: berputar (3deg); mengubah: berputar (3deg); radius sempadan: 22px 0 0 20px; -moz -bintang-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-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 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); 

Penggayaan .element1 :: after

 # gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: Ubah bentuk: berputar (3deg); -pilih-ubah: berputar (3deg); -o-transform: berputar (3deg); mengubah: berputar (3deg); radius sempadan: 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-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 -10px 7px 0 rgb (109, 10, 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) -6px 7px 0 rg b (109, 10, 0);  

Penggayaan .element2 :: before

 # gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -transform: berputar (6.8deg); -webkit-transform: berputar (6.8deg); -o-transform: berputar (6.8deg); transform: putar (6.8deg) 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0) 0), -6px 6px 0 rgb (109, 10, 0); -webkit-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); -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);

Penggayaan .element2 :: after

 # gmail-logo2 .element2 :: after content: "; position: relative; margin: 230px 0 0 36px; float: left; display: block; background: rgb (201, 44, 25); width: 310px; height: 12px; box-bayang-bayang: 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-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); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 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);

Penggayaan .element3 :: sebelum

 # gmail-logo2 .element3 :: sebelum content: "; kedudukan: relatif: margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: Ubah bentuk: berputar (3deg); -webkit-transform: berputar (3deg); -o-transform: berputar (3deg); mengubah: berputar (3deg);

Penggayaan .element3 :: after

 # gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 22px; height: Ubah-ubah: putar (3.0deg); -pilih-ubah: putar (3.0deg); -o-transform: putar (3.0deg); 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-shadow: 0 1px 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);

Penggayaan .element4 :: before

 # gmail-logo2 .element4 :: sebelum content: "; kedudukan: relatif; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; : 192px; -moz-mengubah: putar (-49deg); -webkit-mengubah: putar (-49deg); -o-mengubah: putar (-49deg); mengubah: putar (-49deg); box-bayang-bayang: -1px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), 0 0 rgb (109, 10, 0), -2px 0 0 rgb -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-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), -7px 0 0 rgb (109, 10, 0), 0 -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb -8px 0 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 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);

Penggayaan .element4 :: after

 # gmail-logo2 .element4 :: after content: "; position: relative; margin: 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-mengubah: putar (53deg); -webkit-mengubah: berputar (53deg); -o-transform: putar (53deg); ubah: berputar (53deg);

Penggayaan .element5 :: before

# gmail-logo2 .element5 :: sebelum kandungan: "; kedudukan: relatif: margin: 115px 0 0 125px; float: kiri; paparan: blok; 150px; -moz-transform: berputar (55deg); -o-transform: berputar (55deg); -webkit-transform: berputar (55deg);

Penggayaan .element5 :: after

 # gmail-logo2 .element5 :: after position: relative; kandungan: "; margin: 115px 0 0 150px; float: left; display: block; background: rgb (201, 44, 25); lebar: 2px; tinggi: 150px; webkit-transform: putar (-50deg); -o-transform: putar (-50deg); ubah: putar (-50deg);

Melaraskan keutamaan z-indeks.

 # gmail-logo2 .element1 :: sebelum z-index: 3; # gmail-logo2 .element1 :: after 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 .element4 :: before z-index: 4; # gmail-logo2 .element4 :: after z-index: 3; / * # gmail-logo2 .element5 :: before  logo2 .element5 :: after  * /

Kami hampir selesai. Logo Gmail anda harus kelihatan seperti ini:

Akhirnya, mari kita berikan warna yang berbeza apabila melayang.

 # 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 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 :: before box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 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, 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, 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 :: sebelum 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-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); -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 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); 

Preview | Muat turun fail sumber

Nota editor: Jawatan ini ditulis oleh Irham Kendeni untuk Hongkiat.com. Irham, juga dikenali sebagai Indaam, adalah seorang pereka web dan pemaju dari Indonesia. Dia juga suka pembangunan tema CSS dan WordPress.