أفضل تصاميم صناديق الدردشة باستخدام HTML وCSS
أصدقائي الأعزاء، في هذا المقال قمت بإدراج أكثر من 20 نموذجًا لتصميمات صناديق الدردشة باستخدام HTML وCSS المتاحة على CodePen.
أفضل مجموعة لتصميمات صناديق الدردشة بلغة HTML
في هذه المجموعة، قمت بإدراج أكثر من 20 نموذجًا لتصميمات صناديق الدردشة. تصفح هذه التصميمات الرائعة لصناديق الدردشة مثل:
- دردشة CSS متجاوبة
- ودجت الدردشة
- روبوت دردشة بسيط باستخدام jQuery مع BotUI
- وغيرها الكثير...
#1: Responsive CSS Chat
المؤلف: | Thanwya5Stars |
تاريخ الإنشاء: | 17 يونيو 2018 |
مصنوع بـ: | HTML & CSS |
رابط التجربة: | الكود المصدري / العرض التجريبي |
الوسوم: | صندوق CSS متجاوب |
تم تطوير نموذج "دردشة CSS المتجاوبة" بواسطة Thanwya5Stars. علاوة على ذلك، يمكنك تخصيص هذه التصميمات وفقًا لرغباتك واحتياجاتك.
#2: HTML Chat Widget
المؤلف: | Ankit Jaiswal |
تاريخ الإنشاء: | 22 يوليو 2019 |
مُصنع باستخدام: | HTML، CSS و JS |
رابط العرض: | الكود المصدري / العرض التجريبي |
الوسوم: | ودجت دردشة HTML |
أداة دردشة HTML، من تطوير أنكيت جايسوال. يمكنك تخصيصها حسب رغبتك واحتياجاتك.
#3: Simple jQuery Chatbot with BotUI
Author: | Tobias Rickmann |
Created on: | August 25, 2017 |
Made with: | HTML, CSS & JS |
Demo Link: | Source Code / Demo |
Tags: | Simple jQuery Chatbot |
روبوت دردشة بسيط بتقنية jQuery، من تطوير توبياس ريكمان. يمكنك تخصيصه حسب رغبتك واحتياجاتك.
#4: Vue js Chatbox playground
Author: | Charles Swierczek |
Created on: | December 30, 2017 |
Made with: | HTML(Pug), CSS & JS |
Demo Link: | Source Code / Demo |
Tags: | Vue js Chatbox |
ملعب صندوق دردشة Vue.js، والذي تم تطويره بواسطة Charles Swierczek. علاوة على ذلك، يمكنك تخصيصه وفقًا لرغباتك واحتياجاتك.
#5: Emotional Chatbot
Author: | Hyperplexed |
Created on: | December 9, 2017 |
Made with: | HTML(Pug), CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Emotional Chatbot |
روبوت الدردشة العاطفي، من تطوير شركة هايبربليكسد. يمكنك تخصيصه حسب رغبتك واحتياجاتك.
#6: Chat UI Design
Author: | Shiva Pandey |
Created on: | May 10, 2017 |
Made with: | HTML, CSS & JS |
Demo Link: | Source Code / Demo |
Tags: | Chat UI Design |
تصميم واجهة مستخدم الدردشة، من تطوير شيفا باندي. كما يمكنك تخصيصها حسب رغبتك واحتياجاتك.
#7: Chatbot Assistant Prototype
Author: | Guimauve |
Created on: | June 6, 2017 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Chatbot Assistant Prototype |
نموذج أولي لمساعد روبوت الدردشة، من تطوير Guimauve. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#8: Html CSS Chat box Design
Author: | Virgil Pana |
Created on: | April 2, 2015 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | CSS Chat box Design |
تصميم مربع دردشة HTML CSS، من تطوير فيرجيل بانا. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#9: Stylish chat window design
Author: | Mamun Khandaker |
Created on: | April 10, 2017 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Stylish chat window design |
تصميم أنيق لنافذة الدردشة، من تطوير مامون خندقكر. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#10: React Chat box Design
Author: | >Raphaël Bélin |
Created on: | May 7, 2018 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | React Chat box Design |
تصميم مربع دردشة React، من تطوير رافائيل بيلين. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#11: Chat UI modal window
Author: | Artem Panarin |
Created on: | May 12, 2016 |
Made with: | HTML & CSS |
Demo Link: | Source Code / Demo |
Tags: | Chat UI modal window |
نافذة نموذجية لواجهة مستخدم الدردشة، من تطوير أرتيمي بانارين. كما يمكنك تخصيصها حسب رغبتك واحتياجاتك.
#12: ComponentUI#2 – ChatBox 💬
Author: | anhat.dev |
Created on: | March 26, 2020 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | ChatBox window |
نافذة روبوت الدردشة، من تطوير anant.dev. كما يمكنك تخصيصها حسب رغبتك واحتياجاتك.
#13: Live Chat Box Design
Author: | Debashis Barman |
Created on: | October 27, 2017 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Live Chat Box Window |
تصميم صندوق الدردشة المباشرة، من تطوير ديباشيس بارمان. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#14: WhatsApp Chatbot with Pure HTML/CSS/JS
Author: | ajay |
Created on: | July 16, 2018 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | WhatsApp Chatbot |
بوت دردشة واتساب، من تطوير أجاي. كما يمكنك تخصيصه حسب رغبتك واحتياجاتك.
#15: Responsive chatbox flexbox and localStorage
Author: | jaguar |
Created on: | October 18, 2019 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Responsive chatbox flexbox |
صندوق دردشة متجاوب Flexbox وLocalStorage، من تطوير Jaguar. كما يمكنك تخصيصه حسب رغبتك واحتياجاتك.
#16: Animated Chat App Landing Page
Author: | Rahul Sah |
Created on: | April 7, 2021 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Animated Chat App |
صفحة هبوط لتطبيق الدردشة المتحركة، من تطوير راؤول ساه. كما يمكنك تخصيصها حسب رغبتك واحتياجاتك.
#17: Simple ChatBox Design
Author: | iamJoey |
Created on: | October 23, 2018 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Simple Chat Box Design |
تصميم بسيط لصندوق الدردشة، من تطوير iamJoey. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#18: Slack Sass ChatBox Design
Author: | Brandon |
Created on: | May 17, 2016 |
Made with: | HTML(Pug) & CSS |
Demo Link: | Source Code / Demo |
Tags: | Slack Chat Box Design |
تصميم صندوق دردشة Slack Sass، من تطوير براندون. كما يمكنك تخصيصه حسب رغبتك واحتياجاتك.
#19: Responsive Chatbox UI Design
Author: | abadu |
Created on: | February 10, 2019 |
Made with: | HTML(Pug) & CSS(Sass) |
Demo Link: | Source Code / Demo |
Tags: | Chatbox UI Design |
تصميم واجهة مستخدم متجاوبة لصندوق الدردشة، من تطوير abadu. كما يمكنك تخصيصه حسب رغبتك واحتياجاتك.
#20: Material Messaging App Concept
Author: | Thomas d’Aubenton |
Created on: | August 14, 2017 |
Made with: | HTML & CSS |
Demo Link: | Source Code / Demo |
Tags: | Material Messaging App Design |
تطبيق الرسائل المادية، من تطوير توماس دوبنتون. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#21: Hip Chat Box Layout
Author: | Ionel Cucu |
Created on: | April 29, 2014 |
Made with: | HTML & CSS(Less) |
Demo Link: | Source Code / Demo |
Tags: | Hip Chat Box Layout |
تصميم صندوق الدردشة العصري، من تطوير إيونيل كوكو. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
#22: Mobile Chat Screen with jQuery
Author: | Hanuman Sahay Sharma |
Created on: | September 18, 2017 |
Made with: | HTML, CSS(SCSS) & JS |
Demo Link: | Source Code / Demo |
Tags: | Chat Screen with jQuery |
شاشة دردشة جوال بتقنية jQuery، من تطوير هانومان سهاي شارما. كما يمكنك تخصيصها حسب رغبتك واحتياجاتك.
#23: Bootstrap Chat Box Design
Author: | Emin |
Created on: | July 18, 2019 |
Made with: | HTML, CSS & JS |
Demo Link: | Source Code / Demo |
Tags: | Bootstrap Chat Box Design |
تصميم صندوق دردشة Bootstrap، من تطوير أمين. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.