تحوم آثار لخلفية الصفحة. التأثيرات الأصلية عند التمرير فوق الكائنات

تأثير التمرير css

انتقال
مقياس التحويل (س ، ص)
: hover :: before :: after

وصف أنماط الصورة الأساسية / تأثير css

قمنا بتعيين عرض وارتفاع ثابت للكتلة مع صورة ، وبمساعدة الفائض: مخفي ، نخفي كل شيء غير ضروري خارجها ، نضيف مؤشرًا.

BlocImg (العرض: 600 بكسل ؛ الارتفاع: 338 بكسل ؛ تجاوز: مخفي ؛ المؤشر: المؤشر ؛)

للراحة ، نضع الكتلة في منتصف الشاشة.

Dws (موضع: مطلق ؛ أعلى: 50٪ ؛ يسار: 50٪ ؛ تحويل: ترجمة (-50٪ ، -50٪) ؛)

ثم نجعل عرض الصورة 100٪ ونعلق حركة سلسة في نصف ثانية.

BlocImg img (العرض: 100٪ ؛ الانتقال: .5s ؛)

اضبط مرشح التمويه على ذروة واحدة. مرشح: طمس (1 بكسل) وخلفية داكنة ، ولهذا نضيف خلفية سوداء إلى فئة .blocImg ، وعند التمرير فوقها ، نجعل الصورة نفسها نصف شفافة عتامة: .5 ؛ .

Dws: hover .blocImg img (تحويل: تدوير (-10deg) مقياس (1.3) ؛ مرشح: طمس (1 بكسل) ؛ عتامة: .5 ؛)

لنبدأ الآن في تصميم النص.

نصنع محتوى النص للكتلة

وضع الأصل تمامًا للكتلة بالنص .blocText وضبط المسافات البادئة على جميع الحواف إلى 30 صورة. على الإطار في المستقبل سنجعل مظهره متحركًا.

BlocText (مخطط تفصيلي: برتقالي خالص 1 بكسل ؛ الموضع: مطلق ؛ أعلى: 30 بكسل ؛ يسار: 30 بكسل ؛ يمين: 30 بكسل ؛ أسفل: 30 بكسل ؛)

بالنسبة للنص ، اضبط اللون على الأبيض ، واجعله كبيرًا ، واضبط المساحة المتروكة حول الحواف.

النص (اللون: #fff ؛ تحويل النص: أحرف كبيرة ؛ الحشو: 0 20 بكسل ؛)

اضبط المستوى الثاني متجهًا إلى 25 بستوني.

نص h2 (حجم الخط: 25 بكسل ؛)

نجعل الجزء الثاني منه باللون البرتقالي ، ونضع المسافات البادئة من الجزء السفلي للخط ، ونجعل الشرطة السفلية 2 بستوني.

امتداد النص h2 (اللون: برتقالي ؛ المساحة المتروكة: 3 بكسل ؛ الحد السفلي: 2 بكسل #fff ؛)

نحن نضع الفقرة بشكل مطلق ، ونخفضها بمقدار 180 قمة. اضبط عرض الكتلة الخاصة به على 250 بكسل. أضف 4 حدود على الجانب الأيسر. وضبط المساحة المتروكة.

نص ص (الموضع: مطلق ؛ أعلى: 180 بكسل ؛ العرض: 250 بكسل ؛ الحد الأيسر: 4 بكسل صلب # ffb611 ؛ الحشو: 0 10 بكسل ؛)

وصف العناصر الزائفة :: قبل و :: بعد

دعنا نزيل المخطط التفصيلي ، الذي تم تعيينه مسبقًا على فئة .blocText ، وقم بتعيينه للعناصر الزائفة.

نصنع عناصر زائفة :: before :: after ، نصف أنماطها الرئيسية.

نضعها بشكل مطلق ، ونضبط العرض والارتفاع على 100٪ والمظهر المدفوع في نصف ثانية.

BlocText :: before، .blocText :: after (content: ""؛ position: mat: top: 0؛ left: 0؛ width: 100٪؛ height: 100٪؛)

بشكل منفصل ، :: قبل أن نعيّن حدًا من الأعلى والأسفل في قمة واحدة. وقم بتعيين التحويل لتحويل المحور السيني: مقياس (0،1).

BlocText :: before (border-top: 1px solid #fff؛ border-bottom: 1px solid #fff؛ convert: scale (0،1)؛)

نفعل الشيء نفسه لـ :: after ، فقط الحدود الآن على الجانبين الأيسر والأيمن ، والتحول على طول المحور Y

BlocText :: after (border-left: 1px solid #fff؛ border-right: 1px solid #fff؛ convert: scale (1،0)؛)

ولمظهرها ، نحدد التحويل لجميع المحاور في 1.

Dws: hover .blocText :: before، .dws: hover .blocText :: after (transform: scale (1،1)؛)

ويبقى إخفاء النص ، لذلك سنقوم بتعيين عتامة: 0 لفئة النص وإضافة مظهره السلس.

وعند التمرير ، يتم عرض النص.

Dws: التمرير فوق النص (عتامة: 1 ؛)

في النهاية ، حصلنا على تأثيرات تحوم رائعة عند التمرير فوق صورة.

من اعجب بالفيديو شاركه مع اصدقائك على مواقع التواصل الاجتماعي ولا تنسى التعليق.

أعد الدرس جوريلوف دينيس.

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

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

من أجل عدم كسر الصورة العامة ، لم أشوّه أسماء التأثيرات بالترجمة الآلية (باستثناء البعض) ، تركت العناوين الأصلية كما أطلق عليها المطور.

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

iHover عبارة عن مجموعة رائعة من تأثيرات التمرير CSS3 الخالصة مع دعم Bootstrap 3. مبني على Scss CSS (ملف) ، ويمكن تعديله بسهولة باستخدام المتغيرات. الكود معياري ، ليست هناك حاجة لتضمين الملف بأكمله. 30+ مؤثرات مختلفة في عبوة واحدة. كل شيء موثق جيدًا ، والتأثيرات سهلة الاستخدام للغاية. كل ما عليك فعله هو إنشاء ترميز HTML بشكل صحيح وتضمين ملف CSS للعمل.

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

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

تأثيرات تحوم CSS3 للصور المصغرة

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

مجموعة أخرى من قواعد CSS لإنشاء تأثيرات تحوم رائعة على صور مصغرة مستديرة تمامًا. تحتوي الحزمة على 7 أنواع من انتقالات CSS3 ، وثائق مفصلة للغاية حول الإعداد والاستخدام. التأثيرات مدعومة من قبل جميع المتصفحات الحديثة.

تدوير الصور المصغرة على تحوم

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

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

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

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

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

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

مجموعة أخرى من 10 تأثيرات تحوم للصور ، وتعديلات مختلفة للصور المصغرة عند التمرير ، والتكبير ، والتدوير ، والتدوير ، والتعتيم ، إلخ.

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

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

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

الصور المنزلقة

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

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

حل مثير للاهتمام ، يتم تقديم الصور المصغرة في شكل غامق ، عندما تحوم فوقها ، تظهر الصور وينبثق التوقيع على خلفية فاتحة.

يظهر التعليق الخاص بالصورة من الزاوية ويتوسع قطريًا ليشمل كامل مساحة الصورة.

بعض الحلول الأكثر إثارة للاهتمام لتنفيذ التعليقات المنبثقة للصور المصغرة. في المحرر عبر الإنترنت ، يمكنك تجربة الخيارات وتحقيق نتائج أكثر إثارة للإعجاب.

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

أشكال غريبة وتأثير تكبير مقترن بالتأثير المتحرك لظهور التسميات التوضيحية على الصور المصغرة.

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

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

6 تعليق على الصورة

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

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

خدمة SendPulse هي أداة تسويقية لإنشاء قاعدة اشتراك وتحويل الزوار العشوائيين إلى موقعك إلى زوار عاديين. يجمع SendPulse بين أهم الميزات لجذب العملاء والاحتفاظ بهم على منصة واحدة:
● الرسائل الإخبارية عبر البريد الإلكتروني ،
● دفع الويب ،
● رسائل SMS ،
● SMTP ،
● المراسلات في فايبر ،
● إرسال رسائل إلى facebook messenger.

النشرات الإخبارية عبر البريد الإلكتروني

إرسال الإخطارات

SMTP

روبوتات فيسبوك ماسنجر

إرسال الرسائل القصيرة

إنضم لبرنامج

إذا أعجبك التأثير ، فيمكنك فقط نسخ الكود النهائي واستخدامه!

فرح موقع الويب الخاص بك!

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

تم تنفيذ جميع أمثلة اليوم وتحسينها للمتصفحات الحديثة الجديدة ، وستعمل بالتأكيد فيها (على سبيل المثال ، في مستعرضات عائلة Mozilla أو WebKit). لا يمكننا أن نؤكد لكم العمل في IE ، ولكن في أحدث الإصدارات ، ستعمل التأثيرات بالتأكيد كما ينبغي. لكن لا تنسَ أنه لكل تأثير ، تم إعداد خيار تراجع جذاب في حالة استمرار عدم دعم المتصفح للتأثير.

01. تكبير

عرض:لعرض

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

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

Bump Up CSS

Ex1 img (
الحدود: 5px صلب #ccc ؛
تعويم: اليسار؛
الهامش: 15 بكسل
-انتقال مجموعة الويب: هامش 0.5s سهل الخروج ؛
-موز-الانتقال: هامش 0.5s سهولة الخروج ؛
-o-Transition: هامش 0.5s سهل الخروج ؛
}

Ex1 img: التمرير (
أعلى الهامش: 2 بكسل ؛
}
02. تكديس آند تنمو

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

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

كود CSS لـ Stack & Grow

/ * المثال 2 * /
#حاوية(
العرض: 300 بكسل
الهامش: 0 تلقائي ؛
}

# ex2 img (
الارتفاع: 100 بكسل ؛
العرض: 300 بكسل
الهامش: 15 بكسل 0 ؛
-webkit- الانتقال: كل 1s سهلة ؛
-موز-الانتقال: كل 1s سهولة ؛
-o-Transition: سهولة كل 1s ؛
}

# ex2 img: hover (
الارتفاع: 133 بكسل ؛
العرض: 400 بكسل
الهامش الأيسر: -50 بكسل ؛
}
03. تتلاشى النص في

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

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

تتلاشى النص في تأثير كود CSS

# ex3 (
العرض: 730 بكسل
الارتفاع: 133 بكسل ؛
ارتفاع الخط: 0 بكسل
اللون: شفاف
حجم الخط: 50 بكسل ؛
عائلة الخطوط: "HelveticaNeue-Light" ، "Helvetica Neue Light" ، "Helvetica Neue" ، Helvetica ، Arial ، sans-serif ؛
وزن الخط: 300
تحويل النص: الأحرف الكبيرة ؛

}

# ex3: مرر (
ارتفاع الخط: 133 بكسل ؛
اللون: # 575858 ؛
}

# ex3 img (
تعويم: اليسار؛
الهامش: 0 15 بكسل ؛
}
04. صور ملتوية

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

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

هنا يمكنك استخدام المحددات الزائفة.

كود CSS للصور الملتوية

# ex4 (
العرض: 800 بكسل
الهامش: 0 تلقائي ؛
}

# ex4 img (
الهامش: 20 بكسل
الحدود: 5px صلب #eee ؛
-webkit-box-shadow: 4px 4px 4px rgba (0،0،0،0.2) ؛
-moz-box-shadow: 4px 4px 4px rgba (0،0،0،0.2) ؛
مربع الظل: 4px 4px 4px rgba (0،0،0،0.2) ؛
-انتقال مجموعة الويب: سهولة كل 0.5 ثانية ؛
-موز-الانتقال: كل 0.5 ثانية سهلة ؛
-o-Transition: كل 0.5s سهلة ؛
}

# ex4 img: hover (
-webkit- تحويل: تدوير (-7deg) ؛
-موز-تحويل: تدوير (-7deg) ؛
-o-تحويل: تدوير (-7deg) ؛
}
05. تتلاشى وتعكس

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

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

إذا كنت مرتبكًا بشأن انعكاسات CSS ، فيمكنك معرفة المزيد عنها في هذه المقالة (David Walsh).

تتلاشى وتعكس كود CSS

# ex5 (
العرض: 700 بكسل
الهامش: 0 تلقائي ؛
الحد الأدنى للارتفاع: 300 بكسل
}

# ex5 img (
الهامش: 25 ​​بكسل
العتامة: 0.8
الحدود: 10px صلب #eee ؛

/*انتقال*/
-webkit- الانتقال: كل 0.5 ثانية بسهولة ؛
-موز-الانتقال: كل 0.5 ثانية سهلة ؛
-o-Transition: كل 0.5s سهلة ؛

/*انعكاس*/
- انعكاس مربع الويب: أقل من 0 بكسل - التدرج اللوني لمجموعة الويب (خطي ، أعلى يسار ، أسفل يسار ، من (شفاف) ، توقف اللون (.7 ، شفاف) ، إلى (rgba (0،0،0،0.1)) ) ؛
}

# ex5 img: مرر (
العتامة: 1

/*انعكاس*/
-webkit-box-reflect: أقل من 0px -webkit-gradient (خطي ، أعلى يسار ، أسفل يسار ، من (شفاف) ، توقف اللون (.7 ، شفاف) ، إلى (rgba (0،0،0،0.4)) ) ؛

/*يشع*/
-webkit-box-shadow: 0px 0px 20px rgba (255،255،255،0.8) ؛
-moz-box-shadow: 0px 0px 20px rgba (255،255،255،0.8) ؛
مربع الظل: 0px 0px 20px rgba (255،255،255،0.8) ؛
}
خاتمة

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

إذا واجهت تأثيرات أخرى لافتة للنظر في مكان ما على الشبكة ، فيرجى إخبارنا والقراء الآخرين عنها.