أفضل تصاميم صناديق الدردشة باستخدام 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، من تطوير أمين. كما يُمكنك تخصيصه حسب رغبتك واحتياجاتك.
