Główna » Kodowanie » Jak utworzyć logo Gmail za pomocą CSS3

    Jak utworzyć logo Gmail za pomocą CSS3

    Kilka miesięcy temu pokazałem Ci, jak stworzyć logo kanału RSS za pomocą CSS3. Pomyślałem, że fajnie byłoby stworzyć coś bardziej skomplikowanego. W dzisiejszym poście pokażę Ci, jak utworzyć nie jedną, ale dwie odmiany logo Gmail przy użyciu tylko CSS3.

    Skróty do:

    • Gmail logo CSS tutorial # 1 | Zapowiedź
    • Samouczek Gmail logo CSS # 2 | Zapowiedź

    Logo Gmail # 1

    To pierwsze logo jest proste i dość łatwe do utworzenia. Bez dalszych ceregieli, oto kroki. Zacznijmy od rozpalenia ulubionego edytora kodu i wprowadzenia następujących kodów HTML, i zapiszmy go jako logo-gmail.html.

       Logo CSS Gmaila          

    Dodaj następujące style CSS między zresetować domyślne wartości CSS.

    .logo gmail, .gmail-logo *, .gmail-logo *: przed, .gmail-logo *: after margin: 0; dopełnienie: 0; tło: przezroczyste; granica: 0; zarys: 0; Blok wyświetlacza; czcionka: normalna normalna 0/0 szeryfowa; 

    Poniższe kody CSS dają nam czerwone tło logo Gmaila i zaokrąglone boki.

     .gmail-logo margin: 110px auto; tło: rgb (201, 44, 25); szerokość: 600px; wysokość: 400px; border-top: 4px stałe rgb (201, 44, 25); border-bottom: 4px stałe rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

    Następnie kontynuujemy tworzenie białego pola na czerwonym tle.

     .gmail-logo .gmail-box overflow: hidden; float: left; szerokość: 440px; wysokość: 400px; margin: 0 0 0 80px; tło: biały; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

    Aby utworzyć czerwony efekt „M”, najpierw utworzymy pudełko z czerwoną ramką.

     .gmail-logo .gmail-box: przed position: relative; zawartość: "; z-index: 1; background: white; float: left; width: 320px; height: 320px; border: 100px solid rgb (201, 44, 25); margin: -310px 0 0 -40px; border- promień: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: rotate (45deg) );

    Następnie kontynuujemy ukrywanie nadmiernych boków, dając nam kompletny „M” w kolorze czerwonym.

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

    Teraz dajmy dwie cienkie czerwone obramowanie, nadając mu wygląd koperty.

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

    Prawie skończyliśmy. Dodajmy gradient do czerwonej koperty.

     .gmail-logo: after content: "; position: relative; z-index: 2; content:"; float: left; margines: -404px; szerokość: 600px; wysokość: 408px; Blok wyświetlacza; tło: -moz-linear-gradient (góra, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); tło: -o-liniowy gradient (góra, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, rgba (255, 255, 255, 0,3)), / * zatrzymanie koloru (30%, rgba (255, 255, 255 , 0,2)), * / zatrzymanie koloru (100%, rgba (255, 255, 255, 0,1)));  

    Na koniec nadajmy mu inny kolor po uniesieniu. Dodaj następujący kod HTML DOCTYPE wcześniej

      

    I następujące style CSS wcześniej

     .gmail-logo: hover background: # 313131; border-color: # 313131; / * kursor: wskaźnik; * / .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; 

    Podgląd | Pobierz plik źródłowy

    Logo Gmail # 2

    Następnie utworzymy logo Gmail z innej perspektywy z niewielkim efektem 3D. Zaczniemy od podstawowego znacznika HTML.

       Logo Gmail 2                   

    Ponieważ logo ma inną perspektywę, zaczniemy od obrócenia go trochę i stworzenia potrzebnych warstw (które nazwiemy je elementy) kolejno.

     # gmail-logo2 margin: 0 auto; Blok wyświetlacza; szerokość: 380px; wysokość: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: rotate (6deg); transform: rotate (6deg);  # gmail-logo2 .element1 display: block; szerokość: 380px; wysokość: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; Blok wyświetlacza; szerokość: 380px; wysokość: 290px; margines: -290px 0 0 0;  

    Stylizacja .element1 :: wcześniej

     # gmail-logo2 .element1 :: before content: "; position: relative; margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; height: 276px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-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; 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); 

    Stylizacja .element1 :: po

     # gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: 238px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (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-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);  

    Stylizacja .element2 :: wcześniej

     # gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transform: 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);

    Stylizacja .element2 :: po

     # 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-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);

    Stylizacja .element3 :: wcześniej

     # gmail-logo2 .element3 :: before content: "; position: relative; margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: 42px; height: 268px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);

    Stylizacja .element3 :: po

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

    Stylizacja .element4 :: wcześniej

     # gmail-logo2 .element4 :: before content: "; position: relative; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; height : 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);

    Stylizacja .element4 :: po

     # 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-transform: rotate (53deg); -webkit-transform: rotate (53deg); -o-transform: rotate (53deg); transform: rotate (53deg);

    Stylizacja .element5 :: wcześniej

    # gmail-logo2 .element5 :: before content: "; position: relative; margin: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: rotate (55deg); -o-transform: rotate (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);

    Stylizacja .element5 :: po

     # gmail-logo2 .element5 :: after position: relative; content: "; margin: 115px 0 0 150px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: rotate (-50deg); webkit-transform: rotate (-50deg); -o-transform: rotate (-50deg); transform: rotate (-50deg);

    Dostosowywanie priorytetu indeks Z.

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

    Prawie skończyliśmy. Twoje logo Gmail powinno wyglądać mniej więcej tak:

    Na koniec nadajmy mu inny kolor po zawisie.

     # 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); 

    Podgląd | Pobierz plik źródłowy

    Nota redaktora: Ten wpis jest napisany przez Irham Kendeni dla Hongkiat.com. Irham, znany również jako Indaam, jest projektantem stron internetowych i deweloperem z Indonezji. Uwielbia także tworzenie motywów CSS i WordPress.