2Glowing Hover effect using html and css3
مرحبًا أيها القارئ، ستتعلم اليوم في هذه المدونة كيفية إنشاء تصميم نموذج الثاني باستخدام HTML & Css3 فقط. لقد شاركت في وقت سابق العديد من المدونات حول كيفية إنشاء نموذج مثل هذا في القناة ولكن الجديد في هذا انه اناره جميله وجذابه . والآن سأقوم بإنشاء هذا النموذج مشروط باستخدام HTML & CSS3 فقط.ولكن هذه المرة سيكون مع وجود Glowing hover
هذا النموذج يمكن عمله كمميزات للشركة او اخبار او يمكن عمله كعرض منتجات ايضا وكل شيء يمكن تحويله بمجرد تغيير العناوين نحن نعمل ذلك في مشاريعنا والان اطلع جيدا على طريقة عمله وذلك لضمان العودة مرى اخرى لعمله في مشروعك
شاهد الفيديو بالكامل من هنا
قد يعجبك هذا :
وكما تلاحظ في ملف الhtml قمنا بوضع div خاص بالحاوية التي تشمل ما بداخلهاWrapper ليتسنى لنا التعامل مع ذلك بملف الstyle وبعد اضافة 3card من غير صور بالتنسيق وعمل نسخ لل3 بشكل عام بسيطة جدا قمنا باضافة اللنك الخاص بملف css وكذلك وضعنا h2 html كعنوان لكل حاوية وفي داخلها وضعننا P للتعامل مع النص الصغير بالالوان .
في ملف CSS ، قمت أولاً بوضع جميع العناصر في المركز وتعيين خلفية متدرجة. ثم قمت بإنشاء حاوية باللون الاسود الشكل ذات عرض ارتفاع معين. بعد ذلك ، قمت بالتصميم لمدخلات مثل أنا أعطيت ارتفاع العرض ، الحشو الهامش ، وما إلى ذلك. وبالمثل ، فعلت التصميم لكل الdiv كما هو الحال عند التمرير أعطت زخرفة النص: التسطير. حجم النصوص بعد ذلك تدرجنا في العمل ووضعنا خاصية filter حيث ان الخاصية filter
في CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور ![]()
والخلفيات background
والإطارات border
.
تُطبَّق التأثيرات المُحدَّدة عبر الخاصية filter
على العنصر قبل عرضه على الشاشة مباشرةً، ويمكن تطبيق عدِّة مرشحات على العنصر معًا بتمرير عدِّة مرشحات إلى الخاصية filter
، وسيُفصَل بين المُرشحات بفراغ.اما بخصوص
الدالة linear-gradient()
في CSS ستُنشِئ تدرجًا لونيًا بين لونين أو أكثر على امتداد خط مستقيم، والنتيجة هي كائن من نوع البيانات
الذي هو نوعٌ خاصٌ من ![]()
.
لا تملك التدرجات اللونية في CSS أبعادًا فعليةً، أي ليس لها قياس مُحدَّد ولا نسبة أبعاد، وستُعرَض حسب أبعاد العنصر المحتواة فيه.كما تعلمون
ويجب معرفة هذه الخاصيات موجودة في موقع حوسب بالتفصيل لاننا كثير ما نستخدمها والتي استخدامها للهوامش
HTML FIEL
CSS FIEL
2Glowing Hover effect using html and css3
مرحبًا أيها القارئ، ستتعلم اليوم في هذه المدونة كيفية إنشاء تصميم نموذج الثاني باستخدام HTML & Css3 فقط. لقد شاركت في وقت سابق العديد من المدونات حول كيفية إنشاء نموذج مثل هذا في القناة ولكن الجديد في هذا انه اناره جميله وجذابه . والآن سأقوم بإنشاء هذا النموذج مشروط باستخدام HTML & CSS3 فقط.ولكن هذه المرة سيكون مع وجود Glowing hover
هذا النموذج يمكن عمله كمميزات للشركة او اخبار او يمكن عمله كعرض منتجات ايضا وكل شيء يمكن تحويله بمجرد تغيير العناوين نحن نعمل ذلك في مشاريعنا والان اطلع جيدا على طريقة عمله وذلك لضمان العودة مرى اخرى لعمله في مشروعك
شاهد الفيديو بالكامل من هنا
قد يعجبك هذا :
وكما تلاحظ في ملف الhtml قمنا بوضع div خاص بالحاوية التي تشمل ما بداخلهاWrapper ليتسنى لنا التعامل مع ذلك بملف الstyle وبعد اضافة 3card من غير صور بالتنسيق وعمل نسخ لل3 بشكل عام بسيطة جدا قمنا باضافة اللنك الخاص بملف css وكذلك وضعنا h2 html كعنوان لكل حاوية وفي داخلها وضعننا P للتعامل مع النص الصغير بالالوان .
في ملف CSS ، قمت أولاً بوضع جميع العناصر في المركز وتعيين خلفية متدرجة. ثم قمت بإنشاء حاوية باللون الاسود الشكل ذات عرض ارتفاع معين. بعد ذلك ، قمت بالتصميم لمدخلات مثل أنا أعطيت ارتفاع العرض ، الحشو الهامش ، وما إلى ذلك. وبالمثل ، فعلت التصميم لكل الdiv كما هو الحال عند التمرير أعطت زخرفة النص: التسطير. حجم النصوص بعد ذلك تدرجنا في العمل ووضعنا خاصية filter حيث ان الخاصية
filter
في CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور ![]()
والخلفيات background
والإطارات border
.
تُطبَّق التأثيرات المُحدَّدة عبر الخاصية
filter
على العنصر قبل عرضه على الشاشة مباشرةً، ويمكن تطبيق عدِّة مرشحات على العنصر معًا بتمرير عدِّة مرشحات إلى الخاصية filter
، وسيُفصَل بين المُرشحات بفراغ.اما بخصوص
الدالة
linear-gradient()
في CSS ستُنشِئ تدرجًا لونيًا بين لونين أو أكثر على امتداد خط مستقيم، والنتيجة هي كائن من نوع البيانات
الذي هو نوعٌ خاصٌ من ![]()
.
لا تملك التدرجات اللونية في CSS أبعادًا فعليةً، أي ليس لها قياس مُحدَّد ولا نسبة أبعاد، وستُعرَض حسب أبعاد العنصر المحتواة فيه.كما تعلمون
ويجب معرفة هذه الخاصيات موجودة في موقع حوسب بالتفصيل لاننا كثير ما نستخدمها والتي استخدامها للهوامش
HTML FIEL
تعليقات
إرسال تعليق