Πώς να δημιουργήσετε το λογότυπο Gmail με CSS3

Πριν από μερικούς μήνες σας έδειξα πώς να δημιουργήσετε το λογότυπο τροφοδοσίας RSS με το CSS3. Σκέφτηκα ότι θα ήταν διασκεδαστικό να δημιουργηθεί κάτι πιο περίπλοκο. Στη σημερινή θέση, θα σας δείξω πώς να δημιουργήσετε όχι μία, αλλά δύο παραλλαγές του λογότυπου του Gmail χρησιμοποιώντας μόνο το CSS3.

Συντομεύσεις προς:

• Λογότυπο του Gmail CSS tutorial # 1 | Προεπισκόπηση
• Λογότυπο του Gmail CSS tutorial # 2 | Προεπισκόπηση

Λογότυπο Gmail # 1

Αυτό το πρώτο λογότυπο είναι απλό και αρκετά εύκολο να δημιουργηθεί. Χωρίς άλλο λάθος, εδώ είναι τα βήματα. Ας ξεκινήσουμε με την ενεργοποίηση του αγαπημένου σας επεξεργαστή κώδικα και εισαγάγετε τους ακόλουθους κώδικες HTML και αποθηκεύστε το ως logo-gmail.html.

Προσθέστε τα ακόλουθα στυλ CSS μεταξύ για να επαναφέρετε τις προεπιλεγμένες τιμές CSS.

.gmail-logo, .gmail-logo *, .gmail-logo *: πριν, .gmail-logo *: μετά από margin: 0; padding: 0; υπόβαθρο: διαφανές. σύνορα: 0; περίγραμμα: 0; εμφάνιση: μπλοκ? γραμματοσειρά: κανονική κανονική 0/0 serif; 

Οι παρακάτω κώδικες CSS μας δίνουν το κόκκινο φόντο του λογότυπου του Gmail και τις στρογγυλεμένες πλευρές του.

 .gmail-logo margin: 110px auto; υπόβαθρο: rgb (201, 44, 25); πλάτος: 600px; ύψος: 400px; κορυφαία όψη: 4pbs στερεά rgb (201, 44, 25); σύνορα-κάτω: 4pbs στερεά rgb (201, 44, 25); ακτίνα-ακτίνα: 10px; -moz-border-radius: 10px; -webkit-ακτίνα-ακτίνα: 10px; 

Στη συνέχεια, συνεχίζουμε να δημιουργούμε το λευκό πλαίσιο μέσα στο κόκκινο φόντο.

 .gmail-logo .gmail-box υπερχείλιση: κρυφή; float: αριστερά. πλάτος: 440px; ύψος: 400px; περιθώριο: 0 0 0 80px; φόντο: λευκό? ακτίνα ακτίνων: 5px; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; 

Για να δημιουργήσετε το κόκκινο εφέ "M", θα δημιουργήσουμε πρώτα ένα πλαίσιο με κόκκινα περιγράμματα.

 .gmail-logo .gmail-box: πριν από θέση: σχετική; Περιεχόμενο: "· z-δείκτης: 1 · φόντο: λευκό · float: αριστερά · πλάτος: 320px · ύψος: 320px · περίγραμμα: 100px στερεό rgb (201, 44, 25) · margin: -310px 0 0 -40px · border- ακτίνα: 10px; -moz-περιθώριο-ακτίνα: 10px; -webkit-border-ακτίνα: 10px; -moz-μετασχηματισμός: περιστροφή (45deg); -webkit-μετασχηματισμός: περιστροφή (45deg) ) ·

Στη συνέχεια συνεχίζουμε να κρύβουμε τις υπερβολικές πλευρές δίνοντας μας ένα πλήρες "Μ" σε κόκκινο χρώμα.

 .gmail-logo .gmail-box υπερχείλιση: κρυφή; 

Τώρα, ας δώσουμε δύο λεπτά κόκκινα περιγράμματα, δίνοντάς του το βλέμμα του φακέλου.

 .gmail-logo.gmail-box: μετά από content: "· float: left · width: 360px · height: 360px · border: 2px solid rgb (201,44,25) · margin: 10px 0 0 40px : περιστρέψτε (45deg), -webkit-transform: περιστρέψτε (45deg), -moz-transform: περιστρέψτε (45deg),

Είμαστε σχεδόν τελειωμένοι. Ας προσθέσουμε κάποια κλίση στο κόκκινο φάκελο.

 .gmail-logo: μετά από περιεχόμενο: "· θέση: σχετική · z-index: 2; περιεχόμενο:"; float: αριστερά. περιθώριο-κορυφή: -404px; πλάτος: 600px; ύψος: 408px; εμφάνιση: μπλοκ? (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%). υπόβαθρο: -webkit-κλίση (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, έγχρωμη διακοπή (0%, rgba (255, 255, 255, 0.3)), , 0.2)), * / έγχρωμη διακοπή (100%, rgba (255, 255, 255, 0.1)).  

Τελευταίο αλλά όχι λιγότερο σημαντικό, ας δώσουμε ένα διαφορετικό χρώμα όταν το κρατήσουμε. Προσθέστε το ακόλουθο HTML DOCTYPE πριν

Και τα επόμενα στυλ CSS πριν

 .gmail-logo: αιωρείται background: # 313131; border-color: # 313131; / * δρομέας: δείκτης; * / .gmail-logo: hover .gmail-box: πριν από την border-color: # 313131;  .gmail-logo: hover .gmail-box: μετά το border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Προεπισκόπηση | Λήψη αρχείου προέλευσης

Λογότυπο Gmail # 2

Στη συνέχεια, θα δημιουργήσουμε το λογότυπο του Gmail από μια άλλη οπτική γωνία με λίγο 3D εφέ. Θα ξεκινήσουμε με τη βασική σήμανση HTML.

Δεδομένου ότι το λογότυπο έχει διαφορετική προοπτική, θα ξεκινήσουμε περιστρέφοντάς το λίγο και θα δημιουργήσουμε τα απαιτούμενα επίπεδα (τα οποία θα τα ονομάσουμε στοιχεία) σε ακολουθία.

 # gmail-logo2 περιθώριο: 0 αυτόματα; εμφάνιση: μπλοκ? πλάτος: 380px; ύψος: 290px; -moz-transform: περιστρέψτε (6deg); -webkit-transform: περιστρέψτε (6deg); -o-μετασχηματισμός: περιστροφή (6deg); μετασχηματισμός: περιστροφή (6deg);  # gmail-logo2.element1 εμφάνιση: μπλοκ? πλάτος: 380px; ύψος: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; εμφάνιση: μπλοκ? πλάτος: 380px; ύψος: 290px; περιθώριο: -290px 0 0 0;  

Σχεδίαση .element1 :: πριν

 # gmail-logo2 .element1 :: πριν από την content: "· position: relative · margin: 2px 0 0 14px · float: left · display: block · background: rgb (201, 44, 25) 276px; -moz-transform: περιστρέφεται (3deg); -webkit-transform: περιστρέφεται (3deg); -o-μετασχηματίζει: περιστρέφει (3deg) - ακτίνα-ακτίνα: 22px 0 0 20px · -webkit-border-radius: 22px 0 0 20px · box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb ), -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 , 0) · -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb -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 0 rgb (109, 10, 0), -6px 6px 0 rgb (109,10,0), 

Σχεδίαση .στοιχείο1 :: μετά

 # gmail-logo2 .element1 :: μετά από περιεχόμενο: "· θέση: σχετική · περιθώριο: 40px 5px 0 0 · float: δεξιά · εμφάνιση: μπλοκ · φόντο: rgb (201, 44, 25) 238px? -Moz-transform: περιστρέφεται (3deg); -webkit-transform: περιστρέφεται (3deg); -o-μετασχηματίζει: περιστρέφει (3deg) - ακτίνα ακτινοβολίας: 0 18px 26px 0; -moz-border-ακτίνα: 0 18px 26px 0? box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb ), -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 , 0), -6px 7px 0 rgb (109, 10, 0), -moz-box-σκιά: -1px 1px 0 rgb (109, 10, 0), -2px 2px 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-σκιά: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) (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 · -moz μετασχηματισμός: περιστροφή (6.8deg), -webkit-μετασχηματισμός: περιστροφή (6.8deg), -o-μετασχηματισμός: περιστροφή (6.8deg), μεταστροφή: περιστροφή (6.8deg), shadow 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), -6px 6px 0 rgb (109, 10, 0), -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 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) (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),

Σχεδίαση .στοιχείο2 :: μετά

 # gmail-logo2 .element2 :: μετά από περιεχόμενο: "· θέση: σχετική · περιθώριο: 230px 0 0 36px · float: left · display: block · background: rgb (201, 44, 25) (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) (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 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: "· position: relative · margin: 8px 0 0 42px · float: left · display: block · background: rgb (201, 44, 25) 268px; -moz-transform: περιστρέψτε (3deg); -webkit-transform: περιστρέψτε (3deg); -o-transform: περιστρέψτε (3deg)

Σχεδίαση .element3 :: μετά

 # gmail-logo2 .element3 :: μετά από περιεχόμενο: "· θέση: σχετική · περιθώριο: 40px 32px 0 0 · float: δεξιά · εμφάνιση: μπλοκ · φόντο: rgb (201, 44, 25) 236px; -moz-transform: περιστρέφεται (3.0deg); -webkit-transform: περιστρέφεται (3.0deg); -o-μετασχηματίζει: περιστρέφει (3.0deg); 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) (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb , 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); (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),

Σχεδίαση .element4 :: πριν

 # gmail-logo2 .element4 :: Πριν από περιεχόμενο: "· θέση: σχετική · περιθώριο: -2px 0 0 130px · float: αριστερά · εμφάνιση: μπλοκ · φόντο: rgb (201, 44, 25) : 192px · -moz-transform: περιστρέφεται (-49deg) · -webkit-transform: περιστρέφεται (-49deg) · -o-μετασχηματίζει: περιστρέφει (-49deg) 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) (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-σκιά: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0) 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) rgb (109, 10, 0), -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb 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) 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0),

Σχεδίαση .element4 :: μετά

 # gmail-logo2 .element4 :: μετά από περιεχόμενο: "· θέση: σχετική · περιθώριο: 12px 88px 0 0 · float: δεξιά · εμφάνιση: μπλοκ · φόντο: rgb (201, 44, 25) 186px · ακτίνα-ακτίνα: 30px 0 0 0 · -webkit-border-radius: 30px 0 0 0 · -moz-border-radius: 30px 0 0 0 · -moz-transform: rotate (53deg) · -webkit-transform: περιστροφή (53deg), -o-μετασχηματισμός: περιστροφή (53deg), μετασχηματισμός: περιστροφή (53deg),

Σχεδίαση .element5 :: πριν

# gmail-logo2 .element5 :: πριν από την content: "· position: relative · margin: 115px 0 0 125px · float: left · display: block · background: rgb (201, 44, 25) 150px, -moz-transform: περιστρέψτε (55deg), -o-transform: περιστρέψτε (55deg), -webkit-transform: περιστροφή (55deg)

Σχεδίαση .element5 :: μετά

 # gmail-logo2 .element5 :: μετά από θέση: σχετική; (201, 44, 25), πλάτος: 2px, ύψος: 150px, -moz-transform: rotate (-50deg), - webkit-μετασχηματισμός: περιστροφή (-50deg), -o-μετασχηματισμός: περιστροφή (-50deg), μετασχηματισμός: περιστροφή (-50deg),

Προσαρμογή της προτεραιότητας του z-δείκτης.

 # gmail-logo2 .element1 :: πριν από z-index: 3; # gmail-logo2 .element1 :: μετά από z-index: 1; / gmail-logo2 .element2 :: μετά από z-index: 2; # gmail-logo2 .element3 :: πριν από z-index: 5; # gmail-logo2. # gmail-logo2 .element4 :: πριν από z-index: 4; # gmail-logo2 .element4 :: μετά από z-index: 3; / logo2 .element5 :: μετά από  * /

Είμαστε σχεδόν τελειωμένοι. Το λογότυπό σας στο Gmail θα πρέπει να φαίνεται ως εξής:

Τελικά, ας δώσουμε ένα διαφορετικό χρώμα όταν κρέμεται.

 # gmail-logo2: hover * :: μετά, # gmail-logo2: hover * :: πριν από το 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 , 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-σκιά: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4) rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4). -moz-box-σκιά: -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 :: μετά από box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb , 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-σκιά: -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-σκιά: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4) 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 :: πριν από την box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4). (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). (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 :: μετά από box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4). (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). (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 :: μετά από box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4). (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). (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 :: πριν από το box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb , 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-σκιά: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4) 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) 0 0 rgb (10, 90, 4). (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) 0 0 rgb (10, 90, 4). 

Προεπισκόπηση | Λήψη αρχείου προέλευσης

Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Ο Irham Kendeni για το Hongkiat.com. Ο Irham, επίσης γνωστός ως Indaam, είναι σχεδιαστής και προγραμματιστής ιστοσελίδων από την Ινδονησία. Αγαπά επίσης την ανάπτυξη θεμάτων CSS και WordPress.