Tailwind CSS: 15 تصميمًا فريدًا للبطاقة
نشرت: 2022-02-07- ما هي "البطاقات" في تصميم المواقع؟
- أين رمز تصاميم هذه البطاقة؟
- بطاقة الاتصال بي
- بطاقة المنتج الرقمية
- بطاقة ميزات المنتج
- بطاقة تسعير المنتج
- بطاقة تسعير العضوية
- بطاقة التزكية
- بطاقة بريد المدونة
- بطاقة Instagram
- بطاقة منتج التجارة الإلكترونية
- أحدث بطاقة مشروع
- بطاقة الإحصاء
- بطاقة مقال مدونة
- بطاقة تغريدة (صغيرة)
- بطاقة أعضاء الفريق
- بطاقة إشعار ملفات تعريف الارتباط
- تموج في البركة
لا تحتاج Tailwind CSS إلى مقدمة. إنه إلى حد بعيد إطار CSS الأكثر شيوعًا في العالم. وشهد إطار العمل مؤخرًا إصدارًا جديدًا - v3.0 - والذي يوفر المزيد من الميزات وتحسينات الأداء.
يمكن أن تُعزى شعبية Tailwind CSS إلى حد كبير إلى حقيقة أنك لست بحاجة إلى كتابة أي CSS لتصميم تخطيط. على هذا النحو ، يمكنك القيام بكل ما تبذلونه من التطوير من داخل قالب HTML نفسه. والأرقام تتحدث عن نفسها.
بطبيعة الحال ، كان هناك قدر كبير من النقاش حول Tailwind وكيف تغير عملية التطوير. هناك من يحتقرها والبعض يقسم بها.
يتمثل الاختلاف الرئيسي بين إطار عمل مثل Bootstrap في أن Tailwind تتطلب منك تصميم مكونات واجهة المستخدم الخاصة بك. ينصب التركيز على التطوير المخصص بدلاً من التخطيطات المعدة مسبقًا. هذا هو أيضا منطلق هذه المقالة.
لقد كتبت أيضًا عن مكتبات Tailwind CSS. على وجه الخصوص ، مكتبات المكونات المختلفة ومجموعات واجهة المستخدم التي يمكن أن تساعد حقًا في تسريع عملية التصميم الخاصة بك. أفضل ما في الأمر ، بالنسبة للكثيرين منهم - يمكنك استيراد مكوناتهم مباشرة كمقتطفات HTML.
ما هي "البطاقات" في تصميم المواقع؟
إذا كنت أتحلى بالذهول - فقط قم بلصق لون الخلفية مع بعض الظل المربع على عنصر ما وقم بتسميته بطاقة. هذا يلخص الامر. ولكن ، في ملاحظة أكثر جدية - تساعد البطاقات في التمييز بين العناصر المهمة أو الجديرة بالملاحظة في تصميم الصفحة.
هناك طريقة أخرى للنظر إليها وهي من خلال التصميمات القائمة على الحاويات. تساعد البطاقة ببساطة في إبراز المحتوى المهم. وبالتالي ، تقديم تجربة مستخدم أكثر اتساقًا.
وخير مثال على ذلك هو منصة مثل Facebook ، والتي تستخدم تصميمًا على غرار البطاقات بشكل حصري تقريبًا. لا يقتصر الأمر على إعادة إنشاء تجربة مستخدم مألوفة ، ولكن يمكن أيضًا استخدام البطاقات نفسها لتنظيم العديد من وظائف الموقع.
أين رمز تصاميم هذه البطاقة؟
تتم استضافة جميع الرموز الخاصة بتصميمات بطاقة Tailwind هذه على CodePen. ومع ذلك ، فقد اخترت عدم تضمين إطار iframe لعرضه هنا مباشرةً. بدلاً من ذلك ، قمت بإنشاء صورة مخصصة لكل بطاقة تعرض شكلها. تفكيري بسيط للغاية.
أنا لست من محبي استخدام التضمينات في هذه المدونة. وأعتقد أن الصور تقوم بعمل رائع في تقديم نظرة عامة سريعة على النتيجة. أسفل وصف كل بطاقة ، قمت بإضافة زر سينقلك إلى صفحة CodePen.
يمكنك أيضًا نسخ مقتطفات التعليمات البرمجية ولصقها في مستند HTML واستخدام Tailwind CSS CDN لعرض البطاقات محليًا:
<!DOCTYPE html> <html> <head> <title>Tailwind CSS - Card Designs</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <!-- Copy & Paste the snippets here --> </body> </html>بخلاف ذلك ، استخدمها كما تريد. وسيسعدني جدًا إضافة بعض تصميمات البطاقات المخصصة الخاصة بك إلى هذه القائمة. ضربني في التعليقات أدناه!
بطاقة الاتصال بي
هذا تصميم أنيق "كن على اتصال" يمكنك استخدامه في الجزء السفلي من موقع محفظتك.
يتضمن مساحة لصورة الغلاف ورقم هاتفك والبريد الإلكتروني وصفحة LinkedIn. يتم تضمين الرموز بتنسيق SVG مباشرةً ، لذا استبدلها كما تريد.
بطاقة المنتج الرقمية
هل تعمل على تصميم للتجارة الإلكترونية؟ احصل على هذه البطاقة لعرض المنتجات.
مثالي للمنتجات الرقمية مثل القوالب والسمات. يتضمن مساحة لـ 3 صور مخصصة وعلامات المنتج وزر معاينة وشراء الآن. بالإضافة إلى ذلك ، يمكنك تخصيص الوصف وتضمين ميزات المنتج البارزة.
أخيرًا وليس آخرًا ، يمكن بسهولة تكييف النمط مع حالات الاستخدام الأخرى أيضًا. على سبيل المثال ، لعرض منشورات المدونة ، قم بتمييز الحافظة ، وما إلى ذلك.
بطاقة ميزات المنتج
واحدة من أكثر البطاقات شيوعًا المستخدمة في تصميم الصفحة المقصودة هي ميزات المنتج. سيساعدك هذا على إبراز 4 من أبرز ميزات منتجك.
يتضمن مساحة للرموز أيضًا ، والتي يتم تضمينها مباشرةً في صورة SVG خام.
بطاقة تسعير المنتج
تأتي بطاقات الأسعار في عدد كبير من الأصناف. هذا ، على وجه الخصوص ، يمكن أن يكون بمثابة نموذج مرجعي لطيف لما تريد أن تبدو عليه. يمكن أن تساعد العلامة "الأكثر شيوعًا" في الجزء العلوي في التمييز بين الحزم التي تبيع أكثر من غيرها. وهو عنصر تصميم شائع إلى حد ما يتم استخدامه عبر مجموعة متنوعة من صفحات تسعير منتجات SaaS.
بطاقة تسعير العضوية
هذه طريقة أخرى لأسلوب بطاقة التسعير. إذا قدمت خطة واحدة فقط ، فستساعدك هذه البطاقة ذات العرض العريض في شرح كل ما يحصل عليه المستخدمون من خلال العضوية.
بطاقة التزكية
الدليل الاجتماعي هو جزء لا مفر منه من تصميم تخطيط صفحة الأعمال. وبهذا التصميم ، يمكنك تسليط الضوء بسرعة على ما يقوله الآخرون عن منتجك. يتضمن مساحة لشعار العلامة التجارية (من الذكر) ، وتعليقهم ، وكذلك الشخص الذي قال ذلك.
بطاقة بريد المدونة
أحد الأشياء التي أحبها في بطاقات بريد المدونة هو مقدار المعلومات التي يمكنهم نقلها. في هذا المثال ، يمكنك عمليا تغطية كل شيء. ترتبط العلامات بمنشور المدونة والمؤلف وحتى التفاصيل مثل وقت القراءة. وصورة مميزة.
نمت شعبية هذه الأنواع من التصميمات لعرض منشورات المدونة. وهي جيدة لأشياء مثل تحسين محركات البحث أيضًا. إذا كان بإمكانك الضغط في الفئات والعلامات في نفس العلامة ، فإن هذه العناصر الصغيرة تساهم بشكل كبير في بنية الارتباط الداخلية الخاصة بك.
بطاقة Instagram
هل تريد إنشاء نسخة من Instagram؟ ربما لا ، هناك الكثير من العمل! ولكن ، مع ذلك - إليك بطاقة صغيرة لطيفة على غرار Instagram تم إنشاؤها بالكامل باستخدام Tailwind CSS. ويقطع شوطًا طويلاً لإظهار مرونة Tailwind أيضًا. لا توجد CSS خارجية (بخلاف Tailwind نفسها) مستخدمة لعرض هذه البطاقة.
استخدم هذا النموذج كقالب لبناء تصميمات بطاقات معقدة لمشروعك الشخصي.
بطاقة منتج التجارة الإلكترونية
هذا هو أحد تصاميمي المفضلة إلى حد بعيد. الكثير من التفاصيل في هذه البطاقة ، ومع ذلك فهي لا تتطلب كتابة أي استعلامات أو محاذاة CSS معقدة. مثالية لتخطيطات التجارة الإلكترونية واسعة النطاق المتخصصة في بيع العناصر المادية.
أحدث بطاقة مشروع
هذا مقتطف صغير لطيف يمكنك استخدامه على موقع المحفظة. هل تعمل في مشروع مفتوح المصدر؟ أظهرها لقرائك. ضع في اعتبارك أن هذا مجرد قالب - لذلك لا يزال يتعين عليك كتابة الوظيفة لملء البيانات.
بطاقة الإحصاء
هل تريد إظهار متابعتك الاجتماعية؟ يجب أن يقوم قالب بطاقة الإحصاء هذا بالمهمة.
بطاقة مقال مدونة
هنا لدينا تصميم بطاقة أخرى للمدونات. هذه المرة ، نستخدم تنسيقًا مضغوطًا يسمح لك أيضًا بإضافة علامات. جيد بشكل خاص إذا كنت لا تستخدم الصور المميزة.
بطاقة تغريدة (صغيرة)
هذا مثال صغير لطيف على بطاقة Twitter كما تظهر على الأجهزة المحمولة. يمكن استخدامها في مجموعة واسعة من تخطيطات التصميم. على سبيل المثال ، قم بربط الدلائل التي تخرج إلى مواقع خارجية. جيد أيضًا لعرض المراجعات ، أو حتى منشورات المدونة إذا كنت تحب التصميم البسيط.
بطاقة أعضاء الفريق
ستحتاج أي صفحة عمل جادة إلى قسم "أعضاء الفريق". وهذا التصميم الفريد للبطاقة سوف ينجزها من أجلك. يتضمن صورة الملف الشخصي ، ومساحة للحصول على تفاصيل مثل موقف العمل. بالإضافة إلى ذلك ، يمكنك إضافة روابط وسائط اجتماعية مثل Twitter أو Facebook أو Dribble.
رغم ذلك ، بالطبع ، يمكن تصميمها حسب التفضيل الشخصي.
بطاقة إشعار ملفات تعريف الارتباط
وأخيرًا ، لدينا بطاقة إشعار ملفات تعريف الارتباط الصغيرة. بسيطة وأنيقة ومباشرة في صلب الموضوع. أنا متأكد من أنه يمكنك العثور على طرق لإعادة استخدام هذه البطاقة لاستخدامات أخرى.
تموج في البركة
وغني عن القول أن تصميمات البطاقات هذه تلعب دورًا صغيرًا في التصميم العام للتطبيق أو موقع الويب الخاص بك. رغم ذلك ، من الواضح تمامًا أن Tailwind CSS تجعل من السهل تصميم بطاقات أنيقة دون الحاجة إلى كتابة CSS إضافية!
لقد كنت سعيدًا جدًا باستكشاف إطار عمل الأداة المساعدة هذا بنفسي. من الصعب التغاضي عن مدى شعبية استخدامها جنبًا إلى جنب مع أطر تطوير الويب الحديثة.