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

الصفحات

Create chat box web desgin




مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء Chat box الابداعي باستخدام HTML CSS و من دون JavaScript. لم اقم  سابقًا بمشاركة العديد من المدونات حول الدردشة او التواصل بين المستخدم والمشرف للموقع حان الوقت لأشارك معكم الدردشة او التواصل بين مشرف الموقع والمستخدم

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

اليوم في هذه المدونة ، سأشارك معك هذا البرنامج (chat ). الذي يستجيب بشكل كامل لأي جهاز. على الأجهزة المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة 
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج ( chat box)

فيديو تعليمي لانشاء Chat box





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

إذا كنت تحب هذا البرنامج ( chat box ) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :
كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج ( chat box  ). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>.بأسم الفئة "center" كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من غيرbootstrap ثم أنشأت <div> بداخله ثم بعد ذلك انشأت ".wrapper". وايضا وضعت الايقونات التابعة للفونت اوسم fontawosme وذلك بالذهاب الى موقع واخذ السي دي ان وبعدها اخذ الايقونات سوشيال ميديا
..
وقمنا بوضع ذلك الهيكل بالتفصيل ووضعنا ايضا الفورم الخاص بالارسال اولا ياتي حقل ادخال الاسم وبعدها حقل ادخال البريد الالكتروني ايضا 

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

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

HTML FILE:


>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Chat Box web desgintitle>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js">script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
head>
<body>
<input type="checkbox" id="click">
<label for="click">
<i class="fab fa-facebook-messenger">i>
<i class="fas fa-times">i>
label>
<div class="wrapper">
<div class="head-text">
Let's chat? - Onlinediv>
<div class="chat-box">
<div class="desc-text">
Please fill out the form below to start chatting with the next available agent.div>
<form action="#">
<div class="field">
<input type="text" placeholder="Your Name" required>
div>
<div class="field">
<input type="email" placeholder="Email Address" required>
div>
<div class="field textarea">
<changeit cols="30" rows="10" placeholder="Explain your queries.." required>changeit>
div>
<div class="field">
<button type="submit">Start Chatbutton>
div>
form>
div>
div>
body>
html>


CSS FILE:




*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
background: #ccc;
}
#click{
display: none;
}
label{
position: absolute;
right: 30px;
bottom: 20px;
height: 55px;
width: 55px;
background: -webkit-linear-gradient(left, #383e72, #5e42fa);
text-align: center;
line-height: 50px;
border-radius: 50px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
label i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
label i.fas{
opacity: 0;
pointer-events: none;
}
#click:checked ~ label.fas{
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) rotate(180deg);
}
#click:checked ~ label.fab{
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) rotate(180deg);
}
.wrapper{
position: absolute;
right: 50px;
bottom: 0px;
max-width: 400px;
background: #fff;
border-radius: 15px;
box-shadow: 0px 15px 20ox rgba(0, 0, 0, 1);
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265,1.55);
}
#click:checked ~ .wrapper{
opacity: 1;
bottom: 85px;
pointer-events: auto;
}
.wrapper .head-text{
line-height: 60px;
color: white;
border-radius: 15px 15px 0 0;
padding: 0 20px;
font-weight: 500;
font-size: 20px;
background: -webkit-linear-gradient(left, #383e72, #5e42fa);
}
.chat-box .desc-text{
color: #515365;
text-align: center;
line-height: 25px;
font-size: 17px;
font-weight: 300;
}
.chat-box form{
padding: 10px 15px;
margin: 20px 0;
border-radius: 25px;
border: 1px solid lightgray;
}
.chat-box form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.chat-box form .field:last-child{
margin-bottom:15px;
}
form .field input,
form .field button,
form .textarea textarea{
width: 100%;
height: 100%;
padding-left: 20px;
border: 1px solid lightgrey;
outline: none;
border-radius: 25px;
font-size: 16px;
transition: all 0.3s ease;
}
form .field input:focus,
form .textarea textarea:focus{
border-color: #5e42fa;
}
form .field input::placeholder,
form .textarea textarea::placeholder{
color: silver;
transition: all 0.3s ease;
}
form .field input:focus::placeholder,
form .textarea textarea:focus::placeholder{
color: lightgrey;
}
.chat-box form .textarea{
height: 70px;
width: 100%;
}
.chat-box form .textarea textarea{
height: 100%;
border-radius: 50px;
resize: none;
padding: 15px 20px;
font-size: 16px;
}
.chat-box form .field button{
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 18px;
font-weight: 500;
background: -webkit-linear-gradient(left, #383e72, #5e42fa);
transition: all 0.3s ease;
}
.chat-box form .field button:active{
transform: scale(0.97);
}

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

تعليقات