כיצד ליצור את הלוגו של Gmail עם

לפני כמה חודשים הראיתי לך איך ליצור עדכון RSS עם הלוגו CSS3. חשבתי שזה יהיה כיף ליצור משהו קצת יותר מורכב. בהודעה של היום, אני אראה לך כיצד ליצור אף אחד, אך שתי וריאציות של לוגו Gmail באמצעות CSS3 בלבד.

קיצורי דרך ל:

• לוגו של Gmail מדריך CSS # 1 תצוגה מקדימה
• לוגו של Gmail # CSS מדריך # 2 תצוגה מקדימה

הלוגו של Gmail מס '1

זה הלוגו הראשון הוא פשוט, וקל למדי שנוצר. ללא ado נוספת, להלן השלבים. נתחיל עם ירי את עורך הקוד האהוב עליך להזין את קודי ה- HTML הבאים, ולשמור אותו בתור logo-gmail.html.

הוסף את סגנונות CSS הבאים בין כדי לאפס ערכי ברירת מחדל של CSS.

.gmail-logo, .gmail-logo *, .gmail-logo *: before, .gmail-logo *: אחרי margin: 0; ריפוד: 0; רקע: שקוף; border you01; outline: 0; בלוק תצוגה; font: normal Normal 0/0 serif; 

קודי ה- CSS הבאים מעניקים לנו את הרקע האדום של הלוגו של Gmail ואת הצדדים המעוגלים.

 .gmail-logo margin: 110px auto; רקע: rgb (201, 44, 25); רוחב: 600px; גובה: 400px; border-top: 4px solid rgb (201, 44, 25); הגבול התחתון: 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 position: יחסית; (), גובה: 320px, גובה: 320px, גובה: 120px; גבול: לבן, רוחב: 320px; גובה: 320px, גבול: 100px מוצק rgb (201, 44, 25), שולי: -310px 0 0 -40px; רדיוס: 10px; -moz-border-radius: 10px; -webitit-border-radius: 10px; -moz-transform: סיבוב (45deg); -webkit-transform: סיבוב (45deg); -o-transform: סיבוב (45deg );

לאחר מכן אנו ממשיכים להסתיר את הצדדים מופרז, נותן לנו להשלים "M" בצבע אדום.

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

עכשיו, בואו לתת שני הגבול אדום דק, נותן לו את המעטפה נראה.

 .gmail-box: after = content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25), margin: 10px 0 0 40px; -o-transform : לסובב (45deg); -webkit-transform: לסובב (45deg); -Moz-transform: לסובב (45deg);

כמעט סיימנו. בואו להוסיף קצת שיפוע המעטפה האדומה.

 .gmail-logo: after content: ": position: יחסית; z-index: 2; תוכן:"; צף: משמאל; margin-top: -404px; רוחב: 600px; גובה: 408px; בלוק תצוגה; רקע: 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%); רקע (: 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));  

אחרון חביב, בואו לתת לו צבע שונה על מרחף. הוסף את ה- HTML DOCTYPE הבא

ואת סגנונות CSS הבאים לפני

 .gmail-logo: העבר את העכבר background: # 313131; border-color: # 313131; / * הסמן: מצביע; * / .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; 

תצוגה מקדימה | הורד קובץ מקור

הלוגו של Gmail מס '2

לאחר מכן, ניצור את הלוגו של Gmail מנקודת מבט אחרת עם אפקט תלת-ממד קטן. נתחיל בסימון HTML הבסיסי.

מכיוון שללוגו יש פרספקטיבה אחרת, נתחיל על ידי סיבוב זה קצת וליצור את השכבות הדרושות (אשר נקרא להם אלמנטים) ברצף.

 # gmail-logo2 margin: 0 auto; בלוק תצוגה; רוחב: 380px; גובה: 290px; -Moz-transform: לסובב (6deg); -webkit-transform: לסובב (6deg); -O-transform: לסובב (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; שוליים: -290 פיקסלים 0 0 0;  

סטיילינג .element1 :: לפני

 # gmail-logo2 .element1 :: לפני content: ": position: יחסי; margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; height: 276px; -Moz-transform: סיבוב (3deg); -webkit-transform: סיבוב (3deg): -o-transform: סיבוב (3deg), המרה: סיבוב (3deg); רדיוס הגבול: 22px 0 0 20px; -oz -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, 0), -px 2px 0 rgb (109, 10, 0), 3px 3px 0 rgb (109, 10, 0) 4px 4px 0 rgb (109, 10, 0), -5 px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -Moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2 px 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); 

סטיילינג .ationsier

 # gmail-logo2 .element1 :: after content: ± מיקום: יחסית, שולי: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: 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; 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 0px 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 3, 0px 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);  

סטיילינג .element2 :: לפני

 # gmail-logo2 .element2 :: לפני content: '; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -oz - סיבוב (6.8deg); סיבוב: (0dx); סיבוב (6.8deg); (0, 0, 0), 0 0px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0) 0), 6px 0px 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 -צללה: 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);

סטיילינג .ationsier

 # gmail-logo2 .element2 :: after content:> position: יחסי: 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 0 px 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);

סטיילינג .element3 :: לפני

 # gmail-logo2 .element3 :: לפני content: ± מיקום: יחסי, שוליים: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: 42px; height: 268px; -moz-transform: לסובב (3deg); -webkit-transform: לסובב (3deg); -o-transform: לסובב (3deg); להפוך: לסובב (3deg);

סטיילינג .ationsier

 # gmail-logo2 .element3 :: after content: ± מיקום: יחסית, שולי: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); רוחב: 22px; גובה: 236px; -moz-transform: סיבוב (3.0deg); -webkit-transform: סיבוב (3.0deg); -o-transform: סיבוב (3.0deg), המרה: סיבוב (3.0deg); תיבת צל: 0 1px 0 rgb (109, 10, 0), 0 0px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0) (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 0px 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); (0, 0, 0), 0 0px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 0px 0 rgb (109, 10, 0) 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

סטיילינג .הע להשפיע

 # gmail-logo2 .element4 :: לפני content: ": position: יחסי; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; height : 192px; -moz-transform: סיבוב (-49deg); -webkit-transform: סיבוב (-49deg); -o-transform: סיבוב (-49deg); שינוי: סיבוב (-49deg); box-shadow: -1px 0 0 rgb (109, 10, 0), -2 px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0) 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 rgb (109, 10, 0), ): -Moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2 px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5 px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0) -8 px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2 px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4 px 0 0 rgb (109, 10, 0), -5 px 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);

סטיילינג .הע להשפיע

 # gmail-logo2 .element4 :: after content: ± מיקום: יחסית, שוליים: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 54px; height: 18px-radius: 30px 0 0 0; -webitit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: סיבוב (53deg); -webkit-transform: סיבוב (53deg); -o-transform: לסובב (53deg); להפוך: לסובב (53deg);

סטיילינג .postier them

# gmail-logo2 .element5 :: לפני content: ± מיקום: יחסית, שולי: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: (55deg): סיבוב (55deg); סיבוב (55deg); סיבוב (55deg); סיבוב (55deg);

סטיילינג .ationsier

 # gmail-logo2 .element5 :: after עמדה: יחסית; (), רוחב: 2px; גובה: 150px; -Moz-transform: סיבוב (-50deg); webkit-transform: סיבוב (-50deg); -o-transform: סיבוב (-50deg); המרה: סיבוב (-50deg);

התאמת העדיפות של z-index.

 # gmail-logo2 .element1 :: לפני 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- logo .element5 :: after  * /

כמעט סיימנו. הלוגו שלך ב- Gmail אמור להיראות כך:

לבסוף, בואו לתת לו צבע שונה על מרחף.

 # gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: לפני 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), -5 px 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), -5 px 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), -5 px 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 0px 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), -5 px 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), -5 px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4);  # gmail-logo2: hover .element2 :: לפני 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); (0, 10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 0, 0) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); (0, 0, 4), 0 0px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 0, 0) 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); (0, 10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 0, 0) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); (0, 0, 4), 0 0px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 0, 0) 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); (0, 10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 0, 0) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); (0, 0, 4), 0 0px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 0, 0) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: hover .element4 :: לפני box-shadow: -1px 0 0 rgb (10, 90, 4), -2 px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 , 0, 0, 4, 0) 0 0 0 0 rgb (10, 90, 4), -5 px 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: -1 px 0 0 rgb (10, 90, 4), -2 px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -p8 0 0 rgb (10, 90, 4); -webkit-box-shadow: -1 px 0 0 rgb (10, 90, 4), -2 px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -p8 0 0 rgb (10, 90, 4); 

תצוגה מקדימה | הורד קובץ מקור

הערת העורך: פוסט זה נכתב על ידי ארהם קנדני עבור Hongkiat.com. אירחם, הידוע גם בשם Indaam, הוא מעצב אינטרנט מפתח מאינדונזיה. הוא גם אוהב CSS ו WordPress נושא פיתוח.