كيفية إنشاء شعار Gmail مع CSS3
منذ شهرين ، أوضحت لك كيفية إنشاء شعار تغذية RSS باستخدام CSS3. اعتقدت أنه سيكون من الممتع خلق شيء أكثر تعقيدًا. في منشور اليوم ، سوف أعرض عليك كيفية إنشاء واحدة ، ولكن هناك نوعان مختلفان من شعار Gmail باستخدام CSS3 فقط.
اختصارات إلى:
- Gmail logo CSS تعليمي رقم 1 | معاينة
- Gmail logo CSS تعليمي رقم 2 | معاينة
شعار Gmail رقم 1
هذا الشعار الأول بسيط وسهل الخلق. دون مزيد من اللغط ، وهنا هي الخطوات. لنبدأ بإطلاق محرر الكود المفضل وإدخال أكواد HTML التالية وحفظها كـ شعار gmail.html.
Gmail CSS Logo
أضف أنماط CSS التالية بين لإعادة تعيين قيم CSS الافتراضية.
.gmail-logo ، .gmail-logo * ، .gmail-logo *: من قبل ، .gmail-logo *: after margin: 0؛ الحشو: 0؛ خلفية: شفافة؛ الحدود: 0؛ مخطط: 0؛ العرض محجوب؛ font: normal normal 0/0 serif؛
تمنحك أكواد CSS التالية خلفية حمراء لشعار Gmail وجوانب مستديرة.
.gmail-logo margin: 110px auto؛ الخلفية: rgb (201 ، 44 ، 25) ؛ العرض: 600px ل. الطول: 400px؛ أعلى الحدود: 4px الصلبة rgb (201 ، 44 ، 25) ؛ الحد السفلي: 4px الصلبة rgb (201 ، 44 ، 25) ؛ الحدود بين دائرة نصف قطرها: 10px؛ -moz الحدود نصف قطرها: 10px؛ -webkit الحدود نصف قطرها: 10px؛
بعد ذلك ، نواصل إنشاء المربع الأبيض داخل الخلفية الحمراء.
.gmail-logo .gmail-box overflow: hidden؛ تعويم: اليسار؛ العرض: 440px؛ الطول: 400px؛ الهامش: 0 0 0 80px ؛ الخلفية: أبيض؛ الحدود بين دائرة نصف قطرها: 5px؛ -moz الحدود نصف قطرها: 5px؛ -webkit الحدود نصف قطرها: 5px؛
لإنشاء تأثير "M" الأحمر ، سنقوم أولاً بإنشاء مربع ذو حد أحمر.
.gmail-logo .gmail-box: قبل موضع: نسبي؛ المحتوى: "؛ فهرس z: 1 ؛ الخلفية: أبيض ؛ تعويم: اليسار ؛ العرض: 320 بكسل ؛ الارتفاع: 320 بكسل ؛ الحد الأقصى: 100 بكسل × rgb صلب (201 ، 44 ، 25) ؛ الهامش: -310px 0 0 -40px ؛ border- نصف القطر: 10px ؛ -moz-border-radius: 10px ؛ -webkit-border-radius: 10px ؛ -moz-convert: rotate (45deg) ؛ -wkkit-convert: rotate (45deg) ؛ -o-convert: rotate (45deg ) ؛
ثم نمضي في إخفاء الجوانب المفرطة ، مما يتيح لنا "M" كاملة باللون الأحمر.
.gmail-logo .gmail-box overflow: hidden؛
الآن ، دعنا نعطي اثنين من الحدود الحمراء الرفيعة ، ونعطيها مظهر المغلف.
.gmail-logo .gmail-box: after content: "؛ float: left ؛ العرض: 360px ؛ الارتفاع: 360px ؛ الحد: 2px solid rgb (201 ، 44 ، 25) ؛ الهامش: 10px 0 0 40px ؛ -o-convert : rotate (45deg) ؛ -webkit-convert: rotate (45deg)؛ -moz-convert: rotate (45deg)؛
نحن على وشك الإنتهاء. دعنا نضيف بعض التدرج إلى الظرف الأحمر.
.gmail-logo: بعد content: "؛ position: نسبي ؛ z-index: 2 ؛ content:"؛ تعويم: اليسار؛ هامش قمة: -404px. العرض: 600px ل. الطول: 408px؛ العرض محجوب؛ الخلفية: - الانحدار الخطي (أعلى ، rgba (255 ، 255 ، 255 ، 0.3) 0٪ ، / * rgba (255 ، 255 ، 255 ، 0.3) 30٪ ، * / rgba (255 ، 255 ، 255 ، 0.1 ) 100 ٪) ؛ الخلفية: - الانحدار الخطي (أعلى ، rgba (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)) ، / * لون توقف (30٪ ، rgba (255 ، 255 ، 255 ، 0.2))، * / color-stop (100٪، rgba (255، 255، 255، 0.1)))؛
أخيرًا وليس آخرًا ، دعونا نعطيه لونًا مختلفًا عند التحويم. أضف HTML DOCTYPE التالي من قبل
وأنماط CSS التالية من قبل
.gmail-logo: hover background: # 313131؛ الحدود بين اللون: # 313131؛ / * المؤشر: المؤشر؛ * / .gmail-logo: hover .gmail-box: before border-colour: # 313131؛ .gmail-logo: hover .gmail-box: after border-color: # 313131؛ الحدود القاع لون: # الاتحاد الفرنسي. الحدود من اليمين اللون: # الاتحاد الفرنسي.
معاينة | تحميل الملف المصدر
شعار Gmail رقم 2
بعد ذلك ، سننشئ شعار Gmail من منظور آخر بتأثير ثلاثي الأبعاد بسيط. سنبدأ بترميز HTML الأساسي.
شعار Gmail 2
نظرًا لأن الشعار له منظور مختلف ، فسوف نبدأ بتدويره قليلاً وإنشاء الطبقات اللازمة (التي سنطلق عليها عناصر) في تسلسل.
# gmail-logo2 margin: 0 auto؛ العرض محجوب؛ العرض: 380px؛ الطول: 290px؛ -moz-تحويل: تدوير (6deg)؛ -webkit-تحويل: تدوير (6deg)؛ -o-تحويل: تدوير (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 :: before content: "؛ موضع: نسبي ؛ الهامش: 2px 0 0 14px ؛ تعويم: يسار ؛ عرض: كتلة ؛ خلفية: rgb (201 ، 44 ، 25) ؛ العرض: 30 بكسل ؛ الارتفاع: 276 بكسل ؛ تحويل -moz: تدوير (ثلاثي الأبعاد) ؛ تحويل -Wkkit: تدوير (ثلاثي الأبعاد) ؛ تحويل -o: تدوير (ثلاثي الأبعاد) ؛ تحويل: تدوير (ثلاثي الأبعاد) ؛ الحدودي نصف القطر: 22px 0 0 20px ؛ -moz نصف القطر: 22px 0 0 20px ؛ - حد نصف قطر الويب: 22px 0 0 20px ؛ صندوق بصري: -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)؛
تصميم .element1 :: بعد
# gmail-logo2 .element1 :: after content: "؛ position: نسبي ، الهامش: 40px 5px 0 0 ؛ float: right ؛ display: block ؛ الخلفية: rgb (201 ، 44 ، 25) ؛ العرض: 30px ؛ الارتفاع: 238px ؛ -moz-convert: rotate (3deg) ؛ -webkit-convert: rotate (3deg) ؛ -o-convert: rotate (3deg) ؛ convert: rotate (3deg)؛-border-radius: 0 18px 26px 0؛ -webkit نصف القطر: 0 18px 26px 0 ؛ -Moz-border-radius: 0 18px 26px 0 ؛ صندوق الظل: -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 ب (109 ، 10 ، 0) ؛
تصميم .element2 :: قبل
# gmail-logo2 .element2 :: before content: "؛ الهامش: 22px 0 0 48px ؛ تعويم: يسار ؛ عرض: كتلة ؛ خلفية: rgb (201 ، 44 ، 25) ؛ العرض: 315 بكسل ؛ الارتفاع: 14 بكسل ؛ -تحويل: تدوير (6.8deg) ؛ تحويل -webkit: تدوير (6.8deg) ؛ -o- تحويل: تدوير (6.8deg) ؛ تحويل: تدوير (6.8deg) ؛ مربع الظل: 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 -الظلال: 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)؛
تصميم .element2 :: بعد
# gmail-logo2 .element2 :: after content: "؛ موضع: نسبي ؛ الهامش: 230px 0 0 36px ؛ تعويم: يسار ؛ عرض: كتلة ؛ خلفية: rgb (201 ، 44 ، 25) ؛ العرض: 310 بكسل ؛ الارتفاع: 12 بكسل ؛ صندوق الظل: 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)؛-box-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) ؛ الظل المربع: 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 ؛ تعويم: يسار ؛ عرض: كتلة ؛ خلفية: rgb (201 ، 44 ، 25) ؛ العرض: 42 بكسل ؛ الارتفاع: 268 بكسل ؛ تحويل -moz: rotate (3deg) ؛ -webkit-convert: rotate (3deg) ؛ -o-convert: rotate (3deg) ؛ convert: rotate (3deg)؛
تصميم .element3 :: بعد
# gmail-logo2 .element3 :: after content: "؛ position: نسبي ، الهامش: 40px 32px 0 0 ؛ float: right ؛ display: block ؛ الخلفية: rgb (201 ، 44 ، 25) ؛ العرض: 22px ؛ الارتفاع: 236 بكسل ؛ تحويل -moz: تدوير (3.0deg) ؛ -webkit-convert: تدوير (3.0deg) ؛ -o- تحويل: تدوير (3.0deg) ؛ تحويل: تدوير (3.0deg) ؛ مربع الظل: 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)؛-box-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 6 rx 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)؛
تصميم .element4 :: قبل
# gmail-logo2 .element4 :: قبل content: "؛ موضع: نسبي ؛ الهامش: -2px 0 0 130 بكسل ؛ تعويم: يسار ؛ عرض: كتلة ؛ خلفية: rgb (201 ، 44 ، 25) ؛ العرض: 54 بكسل ؛ الارتفاع : 192 بكسل ؛ تحويل -moz: تدوير (-49deg) ؛ تحويل -webkit: تدوير (-49deg) ؛ -o-convert: تدوير (-49deg) ؛ تحويل: تدوير (-49deg) ؛ مربع الظل: -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)؛
تصميم .element4 :: بعد
# gmail-logo2 .element4 :: after content: "؛ position: نسبي ، الهامش: 12px 88px 0 0 ؛ float: right ؛ display: block ؛ الخلفية: rgb (201 ، 44 ، 25) ؛ العرض: 54px ؛ الارتفاع: 186px ؛ دائرة نصف قطرها: 30px 0 0 0 ؛ -Webkit-border-radius: 30px 0 0 0 ؛ -moz-border-radius: 30px 0 0 0 ؛ -moz-convert: rotate (53deg)؛ -webkit-convert: تدوير (53deg) ؛ -o-convert: تدوير (53deg) ؛ تحويل: تدوير (53deg) ؛
تصميم .element5 :: قبل
# gmail-logo2 .element5 :: before content: "؛ position: نسبي ؛ الهامش: 115px 0 0 125px ؛ تعويم: يسار ؛ عرض: block ؛ الخلفية: rgb (201 ، 44 ، 25) ؛ العرض: 2px ؛ الارتفاع: 150px ؛ -moz-convert: rotate (55deg) ؛ -o-convert: rotate (55deg)؛ -webkit-convert: rotate (55deg)؛ convert: rotate (55deg)؛
تصميم .element5 :: بعد
# gmail-logo2 .element5 :: after position: نسبي؛ المحتوى: "؛ الهامش: 115px 0 0 150px ؛ تعويم: يسار ؛ عرض: block ؛ الخلفية: rgb (201 ، 44 ، 25) ؛ العرض: 2px ؛ الارتفاع: 150px ؛ -moz-convert: rotate (-50deg) ؛ - webkit-convert: rotate (-50deg)؛ -o-convert: rotate (-50deg)؛ convert: rotate (-50deg)؛
ضبط أولوية ض مؤشر.
# gmail-logo2 .element1 :: قبل z-index: 3؛ # gmail-logo2 .element1 :: بعد z-index: 1؛ / * # gmail-logo2 .element2 :: قبل * / # gmail-logo2 .element2 :: بعد z-index: 2؛ # gmail-logo2 .element3 :: قبل z-index: 5؛ # gmail-logo2 .element3 :: بعد z-index: 1؛ # gmail-logo2 .element4 :: قبل z-index: 4؛ # gmail-logo2 .element4 :: بعد z-index: 3؛ / * # gmail-logo2 .element5 :: قبل # gmail- logo2 .element5 :: بعد * /
نحن على وشك الإنتهاء. يجب أن يبدو شعار 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)، -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)؛ -صندوق الظل: 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 (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) ؛ -صندوق الظل: 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 :: قبل 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-الظل: 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-الظل: 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 :: قبل 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)؛
معاينة | تحميل الملف المصدر
ملحوظة المحرر: هذا هو مكتوب من قبل إيرهام كينديني ل Hongkiat.com. Irham ، المعروف أيضًا باسم Indaam ، هو مصمم ومطور ويب من إندونيسيا. كما يحب تطوير موضوع CSS و WordPress.
