القائمة الرئيسية

الصفحات

تعديل المشاركة

Hover effect with glowing

سومر للحلول البرمجية
(0)

  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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puer css Glowing Eeffect On Hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="single-box">
<h2>Web desgin</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio corporis facere quibusdam quo, voluptates beatae odit atque voluptatem placeat? Repellendus odio expedita ea dolor fugiat cum similique magnam adipisci possimus.</p>
</div>
<div class="single-box">
<h2>Web developer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio corporis facere quibusdam quo, voluptates beatae odit atque voluptatem placeat? Repellendus odio expedita ea dolor fugiat cum similique magnam adipisci possimus.</p>
</div>
<div class="single-box">
<h2>Full stack</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio corporis facere quibusdam quo, voluptates beatae odit atque voluptatem placeat? Repellendus odio expedita ea dolor fugiat cum similique magnam adipisci possimus.</p>
</div>
</div>
</body>
</html>

CSS FIEL


body{
background: #000;
}
.wrapper{
width: 1170px;
margin: 8% auto;
}
.single-box{
width: 24%;
height: 270px;
float: left;
margin: 0 24px;
background: #111;
border-radius: 25px;
color: #fff;
padding: 30px;
font-family: merienda;
text-align: justify;
position: relative;
}
.single-box h2{
border-bottom: 5px solid #fff;
padding-bottom: 10px;
}
.single-box:before{
content: '';
background: linear-gradient(45deg, #ff0000,#ff7300,#ffb000,#48ff00,#00ffd5,#002bff,#7a00ff,#7a00ff,#ff00c8,#ff0000);
position: absolute;
top: -2px;
left:-2px;
-webkit-background-size:400%;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: animate 20s linear infinite;
opacity: 0;
transition: opacity .3s ease;
}
.single-box:hover:before{
opacity: 1;
}
.single-box:after{
z-index: -1;
content: '';
position: absolute;
width:100%;
height: 100%;
background: #111;
left:0;
top:0;
}
@keyframes animate{
0%{
background-position: 0 0;
}
50%{
background-position: 400% 0;
}
100%{
background-position: 0 0;
}
}
'

هل اعجبك الموضوع :

أخر المواضيع من قسم : Glowing Hover

تعليقات

إرسال تعليق