Cara Membuat logo Gmail dengan CSS3
Beberapa bulan yang lalu saya menunjukkan kepada Anda cara membuat logo umpan RSS dengan CSS3. Saya pikir itu akan menyenangkan menciptakan sesuatu yang sedikit lebih kompleks. Dalam posting hari ini, saya akan menunjukkan kepada Anda bagaimana membuat bukan hanya satu, tetapi dua variasi logo Gmail hanya menggunakan CSS3.
Pintasan ke:
- Tutorial logo CSS Gmail # 1 | Pratinjau
- Tutorial logo CSS CSS # 2 | Pratinjau
Logo Gmail # 1
Logo pertama ini sederhana, dan cukup mudah dibuat. Tanpa basa-basi lagi, berikut adalah langkah-langkahnya. Mari kita mulai dengan menjalankan editor kode favorit Anda dan masukkan kode HTML berikut, dan simpan sebagai logo-gmail.html.
Logo CSS Gmail
Tambahkan gaya CSS berikut di antara untuk mereset nilai CSS default.
.gmail-logo, .gmail-logo *, .gmail-logo *: before, .gmail-logo *: after margin: 0; bantalan: 0; latar belakang: transparan; perbatasan: 0; garis besar: 0; display: blok; font: normal normal 0/0 serif;
Kode CSS berikut memberi kita latar belakang merah logo Gmail dan sisi yang membulat.
.gmail-logo margin: 110px auto; latar belakang: rgb (201, 44, 25); lebar: 600px; tinggi: 400px; border-top: 4px solid rgb (201, 44, 25); border-bottom: 4px solid rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Kemudian, kami melanjutkan membuat kotak putih di dalam latar belakang merah.
.gmail-logo .gmail-box overflow: hidden; mengapung: kiri; lebar: 440px; tinggi: 400px; margin: 0 0 0 80px; latar belakang: putih; batas-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Untuk membuat efek "M" merah, pertama-tama kita akan membuat kotak dengan batas merah.
.gmail-logo .gmail-box: before position: relative; isi: "; z-indeks: 1; latar belakang: putih; float: kiri; lebar: 320px; tinggi: 320px; batas: 100px rgb padat (201, 44, 25); margin: -310px 0 0 -40px; perbatasan- radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: rotate (45deg );
Lalu kami melanjutkan menyembunyikan sisi yang berlebihan, memberi kami "M" lengkap dalam warna merah.
.gmail-logo .gmail-box overflow: hidden;
Sekarang, mari kita beri dua batas merah tipis, memberikannya tampilan amplop.
.gmail-logo .gmail-box: after content: "; float: kiri; lebar: 360px; tinggi: 360px; batas: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : rotate (45deg); -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);
Kami hampir selesai. Mari kita tambahkan gradien ke amplop merah.
.gmail-logo: after content: "; position: relative; z-index: 2; content:"; mengapung: kiri; margin-top: -404px; lebar: 600px; tinggi: 408px; display: blok; latar belakang: -moz-linear-gradient (atas, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); latar belakang: -o-linear-gradient (atas, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, penghenti warna (0%, rgba (255, 255, 255, 0.3)), / * color-stop (30%, rgba (255, 255, 255) , 0,2)), * / color-stop (100%, rgba (255, 255, 255, 0.1)));
Last but not least, mari kita beri warna yang berbeda saat melayang. Tambahkan HTML DOCTYPE berikut ini sebelumnya
Dan gaya CSS berikut sebelumnya
.gmail-logo: hover background: # 313131; warna perbatasan: # 313131; / * cursor: pointer; * / .gmail-logo: hover .gmail-box: sebelum border-color: # 313131; .gmail-logo: hover .gmail-box: after border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff;
Pratinjau | Unduh file sumber
Logo Gmail # 2
Selanjutnya, kami akan membuat logo Gmail dari perspektif lain dengan sedikit efek 3D. Kami akan mulai dengan markup HTML dasar.
Logo Gmail 2
Karena logo memiliki perspektif yang berbeda, kita akan mulai dengan memutarnya sedikit dan membuat lapisan yang diperlukan (yang akan kita sebut mereka elemen) berurutan.
# gmail-logo2 margin: 0 auto; display: blok; lebar: 380px; tinggi: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: rotate (6deg); transform: rotate (6deg); # gmail-logo2 .element1 display: block; lebar: 380px; tinggi: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; display: blok; lebar: 380px; tinggi: 290px; margin: -290px 0 0 0;
Styling .element1 :: sebelumnya
# gmail-logo2 .element1 :: before content: "; posisi: relatif; margin: 2px 0 0 14px; float: kiri; tampilan: blok; latar: rgb (201, 44, 25); lebar: 30px; tinggi: 276px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); transform: rotate (3deg); border-radius: 22px 0 0 20px; -moz -border-radius: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; bayangan kotak: -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);
Styling .element1 :: after
# gmail-logo2 .element1 :: after content: "; posisi: relatif; margin: 40px 5px 0 0; float: kanan; tampilan: blok; latar: rgb (201, 44, 25); lebar: 30px; tinggi: 238px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); transform-radius: 0 18px 26px 0; -webkit -border-radius: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; bayangan kotak: -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 ), -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 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);
Styling .element2 :: sebelumnya
# gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); lebar: 315px; tinggi: 14px; -moz -transformasi: rotate (6.8deg); -webkit-transform: rotate (6.8deg); -o-transform: rotate (6.8deg); transform: rotate (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-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);
Styling .element2 :: after
# gmail-logo2 .element2 :: after content: "; posisi: relatif; margin: 230px 0 0 36px; float: kiri; tampilan: blok; latar: rgb (201, 44, 25); lebar: 310px; tinggi: 12px; bayangan kotak: 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 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);
Styling .element3 :: sebelumnya
# gmail-logo2 .element3 :: before content: "; posisi: relatif; margin: 8px 0 0 42px; float: kiri; tampilan: blok; latar: rgb (201, 44, 25); lebar: 42px; tinggi: 268px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);
Styling .element3 :: after
# gmail-logo2 .element3 :: after content: "; posisi: relatif; margin: 40px 32px 0 0; float: kanan; tampilan: blok; latar: rgb (201, 44, 25); lebar: 22px; tinggi: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg); transform: rotate (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-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);
Styling .element4 :: sebelumnya
# gmail-logo2 .element4 :: before content: "; posisi: relatif; margin: -2px 0 0 130px; float: kiri; tampilan: blok; latar: rgb (201, 44, 25); lebar: 54px; tinggi : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotate (-49deg); -o-transform: rotate (-49deg); transform: rotate (-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-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); -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);
Styling .element4 :: after
# gmail-logo2 .element4 :: after content: "; posisi: relatif; margin: 12px 88px 0 0; float: kanan; tampilan: blok; latar: rgb (201, 44, 25); lebar: 54px; tinggi: 186px; border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: rotate (53deg); -o-transform: rotate (53deg); transform: rotate (53deg);
Styling .element5 :: sebelumnya
# gmail-logo2 .element5 :: before content: "; posisi: relatif; margin: 115px 0 0 125px; float: kiri; tampilan: blok; latar: rgb (201, 44, 25); lebar: 2px; tinggi: 150px; -moz-transform: rotate (55deg); -o-transform: rotate (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);
Styling .element5 :: after
# gmail-logo2 .element5 :: after position: relative; konten: "; margin: 115px 0 0 150px; float: kiri; tampilan: blok; latar belakang: rgb (201, 44, 25); lebar: 2px; tinggi: 150px; -moz-transform: rotate (-50deg); - webkit-transform: rotate (-50deg); -o-transform: rotate (-50deg); transform: rotate (-50deg);
Menyesuaikan prioritas indeks-z.
# gmail-logo2 .element1 :: before 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 # gmail- logo2 .element5 :: after * /
Kami hampir selesai. Logo Gmail Anda akan terlihat seperti ini:
Akhirnya, mari kita beri warna berbeda saat 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, 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 , 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);
Pratinjau | Unduh file sumber
Catatan Editor: Posting ini ditulis oleh Irham Kendeni untuk Hongkiat.com. Irham, juga dikenal sebagai Indaam, adalah perancang dan pengembang web dari Indonesia. Dia juga menyukai pengembangan tema CSS dan WordPress.
