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

الصفحات


Glowing Hover effect using html and css3

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء Glowin Hover Card desgin  HTML CSS و من دون JavaScript. لقد قمت سابقًا بمشاركة العديد من المدونات حول وضع هوفر 3D لكن هذا نوع مختلف عن الباقي حان الوقت لاجل استخدامه بشكل منفرد وتعلم كيفية وضعه بحركة متلاشية لتعطي لمسه جميلة ، بخاصية ال transfrom-styleوضع محرك البحث دائما ياتي في   واجهة مستخدم داخل صفحة ويب تحتوي على مقالات كثيرة في موقع الويب. عادةً ما يتم عرض هذا المحرك في موقع الويب من اجل البحث بسهوله عن اي مقالة 
ربما تكون قد شاهدت العديد من الأنواع المختلفة من تأثيرات تمرير الرموز الاجتماعية ، لكن في هذه المقالة ، سأوضح لك كيفية إنشاء تأثير تحويم الرموز الاجتماعية المتوهجة. لتحقيق هذا التأثير ، سأستخدم خصائص ظل مربع CSS3 وخصائص ظل النص اليوم في هذه المدونة ، سأشارك معك هذا البرنامج ( Glowing hover effect ). هذا النوع  يستجيب بشكل كامل لأي جهاز. على الأجهزة المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (  card desgin)
فيديو تعليمي لانشاء xGlowing Hover effect using html and css3



كما رأيت في الفيديو ، فإن محرك البحث هذا تكون بطريقة جميلة. إذا كنت مبتدئًا في تصميم الويب ، فقد ساعدك هذا البرنامج التعليمي على فهم الرموز والمفاهيم الأساسية وراء إنشاء التصميم ذلك
إذا كنت تحب هذا البرنامج ( Glowing Hover effect using html and css3) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :
كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج ( card desgin). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>.بأسم الفئة "BOX" كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من غيرbootstrap ثم أنشأت <div> بداخله ثم بعد ذلك انشأت ".IMGBOX". 

وتقسيم الموضوع الى ثلاث اقسام  

ضع في اعتبارك عنصر div مع class: wrapper وداخل عنصر div هذا ، ضع في اعتبارك القائمة غير المرتبة التي تحتوي على ثلاث عناصر قائمة بفئات مختلفة بداخلها. ووضع الرموز الاجتماعية المطلوبة داخل عناصر القائمة. ولزيادة حجم الأيقونات ذات الخطوط الرائعة ، استخدم إحدى فئات Font-awesome الافتراضية.في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العنصر في الوسط . ثم قمت بالتصميم الأساسي للتقسيم وعناصر اخرى أعطيت اللون وحجم الخط والحشو وما إلى ذلك. وبالمثل ، بعد ذلك ، قمت بتصميم مربع   البحث. ثم قمت بعد ذلك بالتوجه الى بقية العلامات لاجل التنسيق الصحيحالآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية transfrom. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك  عرض معين.  ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-sizeلإنشاء هذا البرنامج (شريط  البحث). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.

HTML FILE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover effect With Glowing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="imgbox">
<img src="img1.jpg" alt="">
</div>
<div class="content">
<h2>Web dev
<span>Web developer using php</span>
</h2>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="img2.jpg" alt="">
</div>
<div class="content">
<h2>Mob dev
<span>MOP developer using java</span>
</h2>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="img3.jpg" alt="">
</div>
<div class="content">
<h2>Full dev
<span>Laravel full stack</span>
</h2>
</div>
</div>
</body>
</html>
Css file
هل اعجبك الموضوع :

تعليقات