10 تقنيات إبداعية باستخدام CSS3 Box Shadow

لقد شهدنا عددًا هائلاً من التطورات في تطوير الويب CSS3 خلال السنوات القليلة الماضية فقط. بدأت المواقع الشعبية في جميع أنحاء شبكة الإنترنت في دمج العديد من الأساليب الفريدة مثل الزوايا الدائرية واستعلامات الوسائط التي تستجيب للهواتف المحمولة. ولكن الأهم من ذلك أن هذا قد فتح الباب أمام نماذج واجهات مبتكرة في غضون دقائق.

في هذه المقالة أريد أن أشارك 10 مقتطفات برمجية متعلقة بتصميمات الظل الرائعة للمربع CSS3. سأشرح كيف تعمل الشفرة وكيف يمكنك تنفيذ كل صندوق ظل في موقع الويب الخاص بك.

وتُعزى جميع هذه الأساليب إلى تأثير التصميم الكبير من المواقع الشعبية الأخرى. هذا مثال رائع على كيفية قيام مطوري الويب الحاليين ببناء اتجاهات مؤثرة لمستقبل تصميم الويب.

1. ثابت الأعلى شريط الأدوات

تستخدم خدمة الوسائط الاجتماعية الرومانية Trilulilu شريط أدوات عائمًا حول موقع الويب بالكامل. هذا يمكن ان تنشأ بسرعة باستخدام الموقف: ثابت. الملكية على أي عنصر شريط العلوي. ولكن هذا الظل الإضافي للمربع يأخذ التأثير إلى مستوى جديد تمامًا.

#banner position: ثابت؛ الارتفاع: 60 بكسل ؛ العرض: 100 ٪ ؛ أعلى: 0 ؛ اليسار: 0 ؛ أعلى الحدود: 5px صلب # a1cb2f ؛ الخلفية: #fff؛ -moz-box-shadow: 0 2px 3px 0px rgba (0، 0، 0، 0.16)؛ -webkit-box-shadow: 0 2px 3px 0px rgba (0، 0، 0، 0.16)؛ box-shadow: 0 2px 3px 0px rgba (0، 0، 0، 0.16)؛ مؤشر z: 999999 ؛  # banner h1 line-height: 60px؛

ستلاحظ أن خاصية box-shadow تم إعدادها بالفعل مع مجموعة قيمة بسيطة إلى حد ما. سوف يسقط الظل أسفل الصندوق ، ويطمس بمقدار 3 بكسل على أي من الجانبين.

يمكننا استخدام رغبا () طريقة لتطبيق عتامة بسيطة على الظل ، بحيث لا يظهر العنصر غامقًا جدًا. إنها إضافة خفية ستجذب انتباه الزائر بالتأكيد.

عرض

2. الفرعية الملاحة المنسدلة

في ما يلي طريقة ظل مربعات إبداعية أخرى يتم تطبيقها على القائمة الفرعية المنسدلة العددية. يمكن رؤية تأثير مماثل على رائد الأعمال وأنت تحوم فوق كل من أهم روابط التنقل الرئيسية. هذا هو بالتأكيد أكثر صعوبة بعض الشيء لتكوين ولكن تستحق الصبر.

#bar display: block؛ الارتفاع: 45 بكسل ؛ الخلفية: # 22385a ؛ الحشو أعلى: 5px. الهامش السفلي: 150 بكسل ؛ الموقف: نسبي  #bar ul margin: 0px 15px؛ font-family: Candara، Calibri، "Segoe UI"، Segoe، Arial، sans-serif؛  #bar ul li background: # 22385a؛ العرض محجوب؛ حجم الخط: 1.2em ؛ الموقف: نسبي تعويم: اليسار؛  #bar ul li a display: block؛ اللون: # fffff7 ؛ ارتفاع الخط: 45 بكسل ؛ وزن الخط: غامق ؛ الحشو: 0px 10px ؛ زخرفة النص: لا شيء ؛ مؤشر z: 9999 ؛  #bar ul li a: hover، #bar ul li a.selected color: # 365977؛ الخلفية: #fff؛ الحد العلوي الأيسر نصف القطر: 3 بكسل ؛ الحد الأعلى نصف القطر الأيمن: 3 بكسل ؛ -wkkit-border-top-left-radius: 3px؛ -Webkit-border-top-right-radius: 3px؛ - الحد من دائرة نصف قطرها - topleft: 3px. -Moz-border-radius-topright: 3px؛  #bar ul .subnav display: block؛ اليسار: 14 بكسل ؛ أعلى: 48 بكسل ؛ مؤشر z: -1 ؛ العرض: 500 بكسل ؛ الموقف: مطلق ؛ الارتفاع: 90 بكسل ؛ الحد: 1px صلب # edf0f3 ؛ الحد الأعلى: 0 ؛ الحشو: 10px 0 10px 10px ؛ إخفاء الفائض؛ -Moz-border-radius-bottomleft: 3px؛ -Moz-border-radius-bottomleft: 3px؛ -Wkkit-border-bottom-left-radius: 3px؛ -Wkkit-border-bottom-right-radius: 3px؛ الحد الأدنى نصف القطر الأيمن: 3 بكسل ؛ الحد الأدنى نصف القطر الأيمن: 3 بكسل ؛ -moz-box-shadow: 0px 2px 7px rgba (0،0،0،0.25)؛ -webkit-box-shadow: 0px 2px 7px rgba (0،0،0،0.25)؛ مربع الظل: 0px 2px 7px rgba (0،0،0،0.25) ؛ -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (قوة = 3 ، الاتجاه = 180 ، اللون =" # 333333 ")"؛ عامل التصفية: progid: DXImageTransform.Microsoft.Shadow (القوة = 3 ، الاتجاه = 180 ، اللون = "# 333333") ؛

يمكن تصميم ارتباطات التنقل لتغيير اللون عند تحديده أو على مؤشر الماوس. أقوم أيضًا بإضافة بعض الحدود المستديرة على الروابط وفوق مربع القائمة المنسدلة. هذا يعطي شعورا أجمل بدلا من الحواف الصلبة في كل مكان. أنا أيضا الاستفادة من -MS-فلتر و منقي الخصائص التي هي ملكية خاصة لـ Internet Explorer.

إذا قمت بإعداد نظام ملاحة كامل ، فستتمكن من تغيير مجموعة العرض إلى لا شيء وإخفاء القائمة بمجرد تحميل الصفحة. ثم باستخدام بعض مسج يمكنك استهداف الحدث .hover () وعرض شريط الشبكة الفرعية مع المحتوى المحدث.

عرض

3. لامعة الظل زر

ربما يكون هذا أحد أنماطي المفضلة التي قمت بإنشائها فقط بسبب مدى ديناميكية ظهورها على الصفحة. إذا لم تتمكن من معرفة ذلك ، فهذا هو الزر الأزرق الصغير الموجود في صفحة YouTube الرئيسية بعد تسجيل الدخول لأول مرة.

blues color: #fff؛ العرض: 190 بكسل ؛ الارتفاع: 35 بكسل ؛ المؤشر: المؤشر ؛ font-family: Arial، Tahoma، sans-serif؛ حجم الخط: 1.0em ؛ وزن الخط: غامق ؛ -Moz-border-radius: 2px ؛ -Webkit-border-radius: 2px؛ نصف قطر الحدود: 2 بكسل ؛ عرض الحدود: 1px ؛ لون الحدود: # 0053a6 # 0053a6 # 000؛ لون الخلفية: # 6891e7 ؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # 4495e7 0 ، # 0053a6 100٪) ؛ خلفية الصورة: -ms-linear-gradient (أعلى ، # 4495e7 0 ، # 0053a6 100٪) ؛ خلفية الصورة: -o-linear-gradient (أعلى ، # 4495e7 0 ، # 0053a6 100٪) ؛ background-image: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0 ، # 4495e7) ، لون توقف (100 ٪ ، # 0053a6)) ؛ خلفية الصورة: -تدرج خطي-التدرج (أعلى ، # 4495e7 0 ، # 0053a6 100٪) ؛ صورة الخلفية: التدرج الخطي (إلى الأسفل ، # 4495e7 0 ، # 0053a6 100٪) ؛ text-shadow: 1px 1px 0 rgba (0، 0، 0، .6)؛ -moz-box-shadow: inset 0 1px 0 rgba (256، 256، 256، .35)؛ -ms-box-shadow: inset 0 1px 0 rgba (256، 256، 256، .35)؛ -webkit-box-shadow: inset 0 1px 0 rgba (256، 256، 256، .35)؛ box-shadow: inset 0 1px 0 rgba (256، 256، 256، .35)؛ filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0، StartColorStr = # 4495e7، EndColorStr = # 0053a6)؛  .blues: hover border-colour: # 002d59 # 002d59 # 000؛ -moz-box-shadow: inset 0 1px 0 rgba (256، 256، 256، 0.55)، 1px 1px 3px rgba (0، 0، 0، 0.25)؛ -ms-box-shadow: inset 0 1px 0 rgba (256، 256، 256، 0.55)، 1px 1px 3px rgba (0، 0، 0، 0.25)؛ -webkit-box-shadow: inset 0 1px 0 rgba (256، 256، 256، 0.55)، 1px 1px 3px rgba (0، 0، 0، 0.25)؛ box-shadow: inset 0 1px 0 rgba (256، 256، 256، 0.55)، 1px 1px 3px rgba (0، 0، 0، .25)؛ filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0، StartColorStr = # 3a8cdf، EndColorStr = # 0053a6)؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # 3a8cdf 0 ، # 0053a6 100٪) ؛ خلفية الصورة: -ms-linear-gradient (أعلى ، # 3a8cdf 0 ، # 0053a6 100٪) ؛ خلفية الصورة: -o-linear-gradient (top، # 3a8cdf 0، # 0053a6 100٪)؛ background-image: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0 ، # 3a8cdf) ، لون توقف (100 ٪ ، # 0053a6)) ؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، # 3a8cdf 0 ، # 0053a6 100٪) ؛ صورة الخلفية: التدرج الخطي (أسفل الصورة ، # 3a8cdf 0 ، # 0053a6 100٪) ؛ . blues: active border-color: # 000 # 002d59 # 002d59؛ -moz-box-shadow: inset 0 1px 3px rgba (0،0،0،0.2)، 0 1px 0 #fff؛ -ms-box-shadow: inset 0 1px 3px rgba (0،0،0،0.2)، 0 1px 0 #fff؛ -webkit-box-shadow: inset 0 1px 3px rgba (0،0،0،0.2)، 0 1px 0 #fff؛ box-shadow: inset 0 1px 3px rgba (0،0،0،0.2)، 0 1px 0 #fff؛ filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0، StartColorStr = # 005ab4، EndColorStr = # 175ea6)؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # 005ab4 0 ، # 175ea6 100٪) ؛ خلفية الصورة: -ms-linear-gradient (أعلى ، # 005ab4 0 ، # 175ea6 100٪) ؛ خلفية الصورة: -o-linear-gradient (أعلى ، # 005ab4 0 ، # 175ea6 100٪) ؛ background-image: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0 ، # 005ab4) ، لون توقف (100 ٪ ، # 175ea6)) ؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، # 005ab4 0 ، # 175ea6 100٪) ؛ خلفية الصورة: التدرج الخطي (إلى الأسفل ، # 005ab4 0 ، # 175ea6 100٪) ؛

رمز الزر بالكامل كثير للنظر ، لكننا نحاول لدعم أكبر عدد ممكن من المتصفحات. هناك ظلال نصية وظلال مربعة مع دعم مصاحب لـ MS Internet Explorer 7+. نحن أيضا وضع الصورة الخلفية خاصية تدرجات CSS3 على عدد كبير من البادئات المحددة للبائع.

ولكن إذا كنت تحب هذا النمط التصميم ثم سوف تحوم الدول النشطة وجذب انتباهكم أيضًا. إننا نقوم في الأساس بتحديث الحدود لتضمين بعض الظلال بالداخل أثناء الضغط لأسفل ، بينما نقوم بتحديث تدرج الخلفية لإظهار أغمق قليلاً.

نظرًا لعدم وجود صور على الزر ، يمكنك تحديث القيم السداسية وتحويلها إلى مزج في أي نظام ألوان عمليًا.

عرض

4. الإخطارات قائمة الخروج

لست مستخدمًا كبيرًا على Facebook ولكني لاحظت بعض تقنيات واجهة المستخدم من إعادة تصميمها. يمكن مقارنة قائمة flyout هذه بالإعلامات المنبثقة أو طلبات الأصدقاء المنبثقة الموجودة على الصفحة الرئيسية.

.flyout width: 310px؛ أعلى هامش: 10 بكسل ؛ حجم الخط: 11 بكسل ؛ الموقف: نسبي font-family: 'Lucida Grande' و Tahoma و Verdana و Arial و sans-serif ؛ لون الخلفية: أبيض. الحشو: 9px 11px ؛ الخلفية: rgba (255 ، 255 ، 255 ، 0.9) ؛ الحدود: 1px صلب # c5c5c5 ؛ -webkit-box-shadow: 0 3px 8px rgba (0، 0، 0، .25)؛ -moz-box-shadow: 0 3px 8px rgba (0، 0، 0، .25)؛ box-shadow: 0 3px 8px rgba (0، 0، 0، .25)؛ -Wkkit-border-radius: 3px ؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛  .flyout #tip background-image: url ('images / tip.png')؛ تكرار الخلفية: عدم التكرار ؛ حجم الخلفية: السيارات ؛ الارتفاع: 11 بكسل ؛ الموقف: مطلق ؛ أعلى: -11 بكسل ؛ اليسار: 25 بكسل ؛ العرض: 20 بكسل ؛  .flyout h2 text-convert: uppercase؛ اللون: # 666 ؛ حجم الخط: 1.2em ؛ الحشو أسفل: 5px. الهامش السفلي: 12 بكسل ؛ الحدود السفلية: 1px #dcdbda صلب ؛  .flyout p padding-bottom: 25px؛ حجم الخط: 1.1em ؛ اللون: # 222 ؛

لا توجد مجموعة كاملة من التعليمات البرمجية الجديدة المذهلة للعقل لعرضها هنا. أنا أستخدم صغير .تلميح فئة مع عنصر span داخلي لإضافة مثلث تلميح الأدوات. من الممكن إنشاء مثلثات CSS3 خالصة ولكن هذه الطريقة ليست سهلة ، كما قد تتخيل. إذا كنت تفضل هذه الطريقة ، فقد يكون الأمر يستحق القرصنة معًا. لكن خصائص تدوير CSS3 غير مدعومة في كل مكان ؛ في هذه الأثناء الصور لا تتطلب أي طريقة احتياطية.

عرض

5. غلاف صفحة أبل

هناك الكثير من الظلال المذهلة لصندوق CSS3 التي يمكنك العثور عليها على موقع أبل الرسمي. هذا المثال أدناه عبارة عن حاوية صندوقية صغيرة تمتد بضعة أعمدة. عند النظر إلى تخطيط Apple ، ستلاحظ أن العديد من صفحاتها تتكون من العديد من صناديق التغليف.

.applewrap العرض: 100 ٪ ؛ العرض محجوب؛ الارتفاع: 150 بكسل ؛ الخلفية: أبيض. الحدود: 1px الصلبة. لون الحدود: # e5e5e5 #dbdbdb # d2d2d2 ؛ -Wkkit-border-radius: 4px؛ -Moz-border-radius: 4px ؛ دائرة نصف قطرها الحدود: 4px ؛ -webkit-box-shadow: rgba (0، 0، 0، 0.3) 0 1px 3px؛ -moz-box-shadow: rgba (0،0،0،0.3) 0 1px 3px؛ box-shadow: rgba (0، 0، 0، 0.3) 0 1px 3px؛  .applewrap .col float: left؛ التحجيم مربع: الحدود مربع. العرض: 250 بكسل ؛ الارتفاع: 150 بكسل ؛ الحشو: 16px 7px 6px 22px ؛ الخط: 12px / 18px "Lucida Grande" و "Lucida Sans Unicode" و Helvetica و Arial و Verdana و sans-serif ؛ اللون: # 343434 ؛ الحدود اليمنى: 1px صلب # dadada ؛

يمكنك تجميع صفحة مماثلة مقسمة بواسطة مربعات المحتوى من مختلف العرض والارتفاع. على الرغم من أنني وضعت بعض الأعمدة في هذا العرض التوضيحي ، إلا أنها ليست طريقة تنسيق ضرورية بأي وسيلة. سيتناسب ظل الصندوق بشكل أفضل على خلفية بيضاء / رمادية. لكنني أعتقد أن العرض على أي لون فاتح سيبدو جيدًا.

عرض

6. مربع محتوى أبل

يستخدم هذا النمط الآخر من مربع المحتوى على موقع Apple الإلكتروني في الغالب لتصميم الأعمدة. هذه في المقام الأول في أسفل الصفحة تعرض الصفقات والمعلومات الأخرى ذات الصلة. إنه أسلوب تصميم مختلف تمامًا مع عرض ظل الصندوق من الداخل إلى الأعلى.

.applebox width: auto؛ الارتفاع: 85 بكسل ؛ التحجيم مربع: الحدود مربع. الخلفية: # f5f5f5؛ الحشو: 20px 20px 10px ؛ الهامش: 10px 0 20px ؛ الحدود: 1px صلب #ccc؛ دائرة نصف قطرها الحدود: 4px ؛ -Wkkit-border-radius: 4px؛ -Moz-border-radius: 4px ؛ نصف قطرها: 4px ؛ -webkit-box-shadow: inset 0px 1px 1px rgba (0، 0، 0، .3)؛ -moz-box-shadow: inset 0px 1px 1px rgba (0، 0، 0، .3)؛ box-shadow: inset 0px 1px 1px rgba (0، 0، 0، .3)؛  .applebox .col width: 140px؛ تعويم: اليسار؛ الهامش: 0 0 0 30 بكسل ؛

لا أعتقد أن هذا الرمز يجب أن يكون صعبًا للغاية ومتابعته في حاوية div أخرى. صندوق الظل الوحيد الذي نطبقه يستخدم أقحم مع رموز اللون rgba ألفا شفافة. لذا ، على الرغم من أننا نضع ظل الظل المسقط على اللون الأسود النقي ، فإننا نعرض فقط عتامة بنسبة 30٪.

عرض

7. الروابط المميزة

ربما هذا هو نمط الظل المفضل لدي من موقع Apple الحالي. يجب أن تجد نمطًا تجريبيًا حيًا لهذه التقنية على صفحة iCloud مع سلسلة من مربعات الارتباط العائمة.

.applefeature ارتفاع: 150 بكسل ؛ الهامش: 8px ؛ محاذاة رأسية: أعلى ؛ عرض: كتلة مضمنة.  .applefeature a display: block؛ العرض: 168 بكسل ؛ الارتفاع: 140 بكسل ؛ الحدود: 1px صلب #ccc؛ اللون: # 333 ؛ زخرفة النص: لا شيء ؛ وزن الخط: غامق ؛ ارتفاع الخط: 1.3em ؛ الخلفية: # f7f7f7؛ -webkit-box-shadow: inset 0 1px 2px rgba (0، 0، 0، .3)؛ -moz-box-shadow: inset 0 1px 2px rgba (0، 0، 0، .3)؛ box-shadow: inset 0 1px 2px rgba (0، 0، 0، .3)؛ -Wkkit-border-radius: 4px؛ -Moz-border-radius: 4px ؛ دائرة نصف قطرها الحدود: 4px ؛  .applefeature a: hover background: #fafafa؛ الخلفية: -تدرج متدرج (خطي ، 0٪ 0٪ ، 0٪ 100٪ ، من (#fff) ، إلى (# f7f7f7)) ؛ الخلفية: - التدرج اللوني الخطي (100٪ 100٪ 90deg، # f7f7f7، #fff)؛ -webkit-box-shadow: inset 0 1px 2px rgba (0،0،0، .3)؛ -moz-box-shadow: inset 0 1px 2px rgba (0،0،0، .3)؛ box-shadow: inset 0 1px 2px rgba (0،0،0، .3)؛ -Wkkit-border-radius: 4px؛ -Moz-border-radius: 4px ؛ دائرة نصف قطرها الحدود: 4px ؛  .applefeature a img display: block؛ الهامش: 26px auto 4px؛  .applefeature a h4 display: block؛ العرض: 160 بكسل ؛ حجم الخط: 1.3em ؛ font-family: Arial، Tahoma، sans-serif؛ اللون: # 646464 ؛ محاذاة النص: المركز ؛

يتم تعيين هذه الروابط المميزة على عرض ثابت وتشمل أيقونة مميزة ونص العرض. يستخدم مثال Apple ظل مربع مماثلًا كما رأينا في مربع المحتوى السابق. ومع ذلك يمكن الآن تنشيط المربع بالكامل كارتباط والذي يشمل كلا من :يحوم و :نشيط تنص على. هناك الكثير من المرونة في مربع الارتباط هذا وعليك تجربة اللعب باستخدام الكود المصدري.

من الممكن تقصير الطول / العرض وإنشاء قائمة روابط أصغر بكثير. قد تكون هذه مجموعة من الفصول أو الصفحات في مقالة ، أو يمكنك إنشاء قائمة فرعية محدودة برموز الارتباط. إنها بصراحة مجموعة رائعة من أحدث تقنيات CSS3 التي توضح مقدار الطاقة التي تتمتع بها كمصمم ويب.

عرض

8. صور مؤطرة

لقد أضفت خلفية رمادية إلى هذا المثال حتى تتمكن من رؤية أنماط ظل المربع بشكل أكثر وضوحًا. يشبه هذا المربع لقطات المعاينة المميزة على Wordpress.com باستثناء أنني أضفت عمقًا أكبر قليلاً إلى الكود المصدري.

.wpframe background: #fff؛ نصف قطر الحدود: 2 بكسل ؛ -Webkit-border-radius: 2px؛ -Moz-border-radius: 2px ؛ الحشو: 8px. -webkit-box-shadow: 1px 2px 1px # d1d1d1؛ -moz-box-shadow: 1px 2px 1px # d1d1d1؛ box-shadow: 1px 2px 1px # d1d1d1؛

ونظرًا لإعطاء الصور وسادة صغيرة على كلا الجانبين ، يظهر هذا الإطار كحدود بيضاء كبيرة. يمكنك دائمًا تحديث لون الخلفية ، أو حتى إضافة حد خارجي صغير لفصل الصورة عن الخلفية. ولكن هذه المجموعة من التبسيط إلى حد ما من الأساليب يمكن المناورة في مختلف تقنيات الظل مربع. قم بالتجوال باستخدام الكود وشاهد كيف يمكنك تحسين تصاميم الصور على موقع الويب الخاص بك.

عرض

9. متوهجة حقول الإدخال

حصلت على هذه الفكرة بعد زيارة صفحة تسجيل الدخول Pinterest عدة مرات. تعرض أنماط الرسوم المتحركة الخاصة بهم حقًا بعض الأمثلة البليغة للظلال المربعة المتعددة المضمّنة ، الخارجية والداخلية.

.formwrap display: block؛ الهامش السفلي: 15 بكسل ؛  .formwrap label display: inline-block؛ العرض: 80 بكسل ؛ حجم الخط: 11 بكسل ؛ وزن الخط: غامق ؛ اللون: # 444 ؛ font-family: Arial، Tahoma، sans-serif؛  .formwrap .shadowfield موقف: نسبي؛ العرض: 250 بكسل ؛ حجم الخط: 17 بكسل ؛ font-family: "Helvetica Neue"، Arial، sans-serif؛ وزن الخط: عادي ؛ الخلفية: # f7f8f8؛ اللون: # 7c7c7c ؛ ارتفاع الخط: 1.4 ؛ الحشو: 6px 12px. الخطوط العريضة: لا شيء ؛ انتقال: جميع 0.2s سهولة في الخروج 0s ؛ -webkit-الانتقالية: جميع أدوات سهولة الوصول إلى الداخل (0.2s) ؛ -moz-الانتقالية: جميع 0.2s سهولة في الخروج 0s ؛ الحدود: 1px صلب # ad9c9c ؛ نصف قطر الحدود: 6px 6px 6px 6px ؛ box-shadow: 0 1px rgba (34، 25، 25، 0.2) inset، 0 1px #fff؛  .formwrap .shadowfield: focus border-color: # 930؛ الخلفية: #fff؛ اللون: # 5d5d5d ؛ box-shadow: inset 0 1px rgba (34، 25، 25، 0.2)، 0 1px rgba (255، 255، 255، 0.6)، 0 0 7px rgba (235، 82، 82، 0.5)؛ -moz-box-shadow: inset 0 1px rgba (34، 25، 25، 0.2)، 0 1px rgba (255، 255، 255، 0.6)، 0 0 7px rgba (235، 82، 82، 0.5)؛ -webkit-box-shadow: inset 0 1px rgba (34، 25، 25، 0.2)، 0 1px rgba (255، 255، 255، 0.6)، 0 0 7px rgba (235، 82، 82، 0.5)؛

على الرغم من أن الأنماط الأولية جذابة للغاية ، فإنني جذبت إلى آثار الانتقال كما كنت تركز على كل حقل الإدخال. يمكنك علامة تبويب بينها ومعرفة الفرق الفوري في العديد من الخصائص. يتم تطبيق ظل صندوق التوهج الخارجي مع ظل أقحم محدث. أيضا يصبح لون النص أفتح أثناء تركيزك على إدخال معين ، ثم يتلاشى أثناء إلغاء التركيز.

حتى نسخ أحد هذه التأثيرات سيحسن بشكل كبير من تجربة المستخدم لحقول النموذج. تأكد من أنك لا تذهب بعيدًا جدًا إلى الحد الذي لا يمكن فيه استخدام النماذج. ومع ذلك ، سيستمتع معظم الزوار بالتأثيرات الجمالية المبهجة التي تشجع أيضًا على التفاعل وزيادة المشاركة مع موقع الويب الخاص بك.

عرض

10. أزرار الظل مرنة

تم تصميم أزرار الظل الفريدة هذه بمرحلة انتقال بطيئة أثناء التحويم والحالات النشطة. يمكنك العثور على أمثلة مماثلة على الصفحة الرئيسية لموزيلا كبيرة الحجم “تحميل فايرفوكس” زر. قليلا من ال مربع الظل تجمع الخصائص بالفعل بين ثلاثة ظلال مختلفة معًا في أمر واحد.

.blu-btn display: inline-block؛ -moz-border-radius: .25em؛ نصف قطرها الحدود: -webkit-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.2)؛ -moz-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.2)؛ box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.2)؛ لون الخلفية: # 276195 ؛ خلفية الصورة: -moz-linear-gradient (# 3c88cc، # 276195)؛ background-image: -ms-linear-gradient (# 3c88cc، # 276195)؛ background-image: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0٪ ، # 3c88cc) ، لون توقف (100٪ ، # 276195)) ؛ خلفية الصورة: - التدرج اللوني الخطي (# 3c88cc، # 276195)؛ خلفية الصورة: -o-linear-gradient (# 3c88cc، # 276195)؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc'، endColorstr = '# 276195'، GradientType = 0)؛ -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc'، endColorstr =" # 276195 "، GradientType = 0)"؛ صورة الخلفية: التدرج الخطي (# 3c88cc، # 276195)؛ الحدود: 0 ؛ المؤشر: المؤشر ؛ اللون: # ff؛ زخرفة النص: لا شيء ؛ محاذاة النص: المركز ؛ حجم الخط: 16 بكسل ؛ الحشو: 0px 20px ؛ الارتفاع: 40 بكسل ؛ ارتفاع الخط: 40 بكسل ؛ دقيقة العرض: 100px ؛ text-shadow: 0 1px 0 rgba (0،0،0،0.35)؛ font-family: Arial، Tahoma، sans-serif؛ -webkit-الانتقالية: جميع الخطي .2s ؛ الانتقال -moz: جميع الخطي .2s ؛ -o-الانتقالية: جميع الخطي .2s ؛ -ms-الانتقالية: جميع الخطي .2s ؛ انتقال: كل الخطي .2s .blu-btn: hover، .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.3) ، أقحم 0 12px 20px 2px # 3089d8؛ -moz-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.3)، inset 0 12px 20px 2px # 3089d8؛ box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.3)، inset 0 12px 20px 2px # 3089d8؛  .blu-btn: نشط -webkit-box-shadow: inset 0 2px 0 0 rgba (0،0،0،0.2)، inset 0 12px 20px 6px rgba (0،0،0،0.2)، inset 0 0 2px 2px rgba (0،0،0،0.3) ؛ -moz-box-الظل: أقحم 0 2px 0 0 rgba (0،0،0،0.2) ، أقحم 0 12px 20px 6px rgba (0،0،0،0.2) ، أقحم 0 0 2px 2px rgba (0،0 ، 0،0.3)؛ مربع الظل: أقحم 0 2px 0 0 rgba (0،0،0،0.2) ، أقحم 0 12px 20px 6px rgba (0،0،0،0.2) ، داخلي 0 0 2px 2px rgba (0،0،0،0.3) )؛  .grn-btn display: inline-block؛ -moz-border-radius: .25em؛ نصف قطرها الحدود: -webkit-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.2)؛ -moz-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.2)؛ box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.2)؛ لون الخلفية: # 659324 ؛ خلفية الصورة: -moz-linear-gradient (# 81bc2e، # 659324)؛ background-image: -ms-linear-gradient (# 81bc2e، # 659324)؛ خلفية الصورة: - التدرج اللوني على الويب (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0٪ ، # 81bc2e) ، توقف الألوان (100٪ ، # 659324)) ؛ خلفية الصورة: - التدرج اللوني الخطي (# 81bc2e، # 659324)؛ خلفية الصورة: -o-linear-gradient (# 81bc2e، # 659324)؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e'، endColorstr = '# 659324'، GradientType = 0)؛ -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e'، endColorstr =" # 659324 "، GradientType = 0)"؛ خلفية الصورة: التدرج الخطي (# 81bc2e ، # 659324) ؛ الحدود: 0 ؛ المؤشر: المؤشر ؛ اللون: # ff؛ زخرفة النص: لا شيء ؛ محاذاة النص: المركز ؛ حجم الخط: 16 بكسل ؛ الحشو: 0px 20px ؛ الارتفاع: 40 بكسل ؛ ارتفاع الخط: 40 بكسل ؛ دقيقة العرض: 100px ؛ text-shadow: 0 1px 0 rgba (0،0،0،0.35)؛ font-family: Arial، Tahoma، sans-serif؛ -webkit-الانتقالية: جميع الخطي .2s ؛ الانتقال -moz: جميع الخطي .2s ؛ -o-الانتقالية: جميع الخطي .2s ؛ -ms-الانتقالية: جميع الخطي .2s ؛ الانتقال: جميع الخطي .2s ؛  .grn-btn: hover ، .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0 ، 0.3) ، أقحم 0 12px 20px 2px # 85ca26؛ -moz-box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.3)، inset 0 12px 20px 2px # 85ca26؛ box-shadow: 0 2px 0 0 rgba (0،0،0،0.1)، inset 0 -2px 0 0 rgba (0،0،0،0.3)، inset 0 12px 20px 2px # 85ca26؛  .grn-btn: نشط -webkit-box-shadow: inset 0 2px 0 0 rgba (0،0،0،0.2)، inset 0 12px 20px 6px rgba (0،0،0،0.2)، inset 0 0 2px 2px rgba (0،0،0،0.3) ؛ -moz-box-الظل: أقحم 0 2px 0 0 rgba (0،0،0،0.2) ، أقحم 0 12px 20px 6px rgba (0،0،0،0.2) ، أقحم 0 0 2px 2px rgba (0،0 ، 0،0.3)؛ مربع الظل: أقحم 0 2px 0 0 rgba (0،0،0،0.2) ، أقحم 0 12px 20px 6px rgba (0،0،0،0.2) ، داخلي 0 0 2px 2px rgba (0،0،0،0.3) )؛

أنا باستخدام التحولات الكاملة لمدة 200 ميلي ثانية على التحويم وحالات الزر النشط. ما يميز هذه الأنماط هو أنه يمكنك تطبيقها على أي عنصر قابل للنقر تقريبًا. الأزرار أو روابط الربط أو عناصر النموذج أو أي شيء آخر تعتقد أنه مناسب - على الرغم من أنه ينبغي استخدام هذه الأنماط بشكل متقطع حتى لا تفرط في تصميمك.

غالبًا ما يتم حفظ أزرار مثل هذه بالطريقة نفسها التي تستخدمها Mozilla. قم بإرفاق هذه الأنماط في مدونتك حيث لديك أزرار للتنزيل الهدية الترويجية أو شيء مشابه. يحب المستخدمون التفاعل مع واجهات فريدة وغالبًا ما يترجم هذا إلى نسبة أعلى بكثير لتقييم النقر إلى الظهور.

عرض

افكار اخيرة

آمل أن تتمكن من الحصول على بعض الدروس الرائعة من هذه المجموعة من تقنيات الظل المربع. هناك العديد من المجالات المختلفة التي يمكنك التركيز عليها بما في ذلك النماذج ومربعات الوسائط والأزرار وأشرطة الأدوات وحتى تخطيطات الموقع الكاملة.

لا تتردد في تنفيذ أي من تأثيرات الظل هذه على أجزاء من موقع الويب الخاص بك. هناك الكثير من التقنيات الأخرى ، ولكن هذه المجموعة مثالية لكل من المبتدئين والمطورين المتقدمين. وأيضًا إذا كان لديك أي اقتراحات أو أسئلة حول المقالة ، يمكنك مشاركتها معنا في منطقة مناقشة التعليقات أدناه.