صمم زرًا بصريًا واحصل على HTML و CSS لاستخدامهما في موقعك الإلكتروني. ابدأ بنمط جاهز، واضبط الخطوط والألوان والشكل والظلال، ثم عاين حالات التفاعل قبل التصدير.
تصفح مجموعات 44 الجاهزة عبر تصنيفات: اليومية، الكلاسيكية، ذات الأشكال، التعبيرية، المتدرجة، والنخبة. كل نمط جاهز هو نقطة بداية يمكنك تعديلها.
كيف تؤثر الأنماط الجاهزة على تصميمك
اختر أولاً، ثم قم بالتحسين
استخدم مجموعة الأنماط لتضييق نطاق المعرض. يؤدي تطبيق نمط جاهز إلى استبدال أنماط الوضع الافتراضي والتحويم، مع الاحتفاظ بنص الزر واسم الفئة (class name).
جرب تعبئة صلبة بسيطة، أو زاوية مشكلة، أو حدودًا واضحة، أو معالجة أكثر زخرفية. بمجرد العثور على التوجه المناسب، استخدم علامات التبويب الأخرى لجعل التفاصيل تتناسب مع صفحتك.
اجعل التسمية تبدو مناسبة
قم بتعيين نص الزر، وعائلة الخط، والحجم، والوزن، والتباعد، وارتفاع السطر، والمحاذاة، ولون النص. شاهد تحديث التسمية أثناء عملك.
تحسين النص والتباعد
خطوط تناسب الإجراء
يحتوي النص على عناصر تحكم الخط وحقل نص زر ثانٍ. يتراوح حجم الخط من 10 إلى 80 بكسل؛ تستخدم العائلات المدرجة خطوطًا متاحة على جهاز الزائر.
استخدم تسمية قصيرة تصف الإجراء. في التعبئة، تضيف الحشوة الأفقية والعمودية مساحة حولها دون تغيير حجم الخط. تحقق من التسميات الأطول في الصفحة التي سيُستخدم فيها الزر.
اختر تعبئة صلبة أو متدرجة
استخدم لون خلفية واحدًا أو ادمج لونين بتدرج خطي. تتيح لك منتقيات الألوان ومدخلات الست عشري (hex) العمل بصريًا أو بدقة.
ضبط الألوان واتجاه التدرج
لونان، اتجاه واحد واضح
في التعبئة، قم بتغيير نمط التعبئة إلى تدرج خطي للكشف عن اللون الثاني وزاوية التدرج. تتراوح الزاوية من 0 إلى 360 درجة.
تقبل حقول الست عشري لونًا كاملاً من ستة أرقام أو اختصارًا من ثلاثة أرقام. اختبر التسمية البيضاء أو الملونة مقابل طرفي التدرج؛ لا يقوم الاستوديو تلقائيًا باعتماد تباين النص.
التحكم في الحدود والعمق
اضبط الزوايا المرتبطة أو المستقلة، وعرض الحدود ونمطها، وظلال الصندوق، وظلال النص. امنح الزر شكلاً يناسب سياقه.
استكشف الزوايا والحدود والظلال
من مستطيل حاد إلى شكل بيضاوي ناعم
في الشكل، أبقِ خيار ربط جميع الزوايا مفعلًا لنصف قطر مشترك، أو قم بإيقاف تشغيله لضبط كل زاوية على حدة. تشمل أنماط الحدود: صلب، متقطع، منقط، مزدوج، غائر، بارز، مرتفع، محزز، وبدون.
في الظل، اضبط الإزاحات الأفقية والعمودية، والتمويه، واللون، والشفافية. يحتوي ظل الصندوق أيضًا على انتشار ومفتاح للظل الداخلي. ظل النص منفصل، لذا يمكنك إضافة عمق للتسمية دون تغيير حدود الزر.
صمم التفاعل أيضًا
قم بتحرير أنماط الوضع الافتراضي والتحويم بشكل منفصل. عاين مظاهر الوضع الافتراضي، والتحويم، والنشط، ثم قارن الزر على خلفيات فاتحة وداكنة.
فهم حالات التحرير والمعاينة
نمطان قابلان للتحرير، ثلاث حالات معاينة
تختار حالة التحرير النمط الذي تغيره عناصر التحكم الخاصة بك. أزرار حالة اللوحة تختار المعاينة فقط. يؤدي التحويم فوق المعاينة أو الضغط عليها إلى إظهار تفاعلها أيضًا.
تتبع قيم التحويم التي لا تزال تطابق الوضع الافتراضي التعديلات الأساسية حتى يتم تخصيصها. يتضمن CSS المصدر قاعدة تحويم عند الحاجة، وحدود تركيز مرئية، وحركة نشطة، وقاعدة تقليل الحركة.
أحضر CSS إلى مشروعك
انسخ CSS الذي تم إنشاؤه وزر HTML المطابق، أو قم بتنزيل ورقة الأنماط. يحافظ اسم الفئة على اتصال الجزأين.
انسخ، ونزّل، واحتفظ بعملك
كود بسيط يمكنك استخدامه مباشرة
اختر اسم فئة مميزًا، وانسخ CSS من علامة التبويب الخاصة به، ثم انسخ الزر من HTML. يحفظ التنزيل ملف .css مسمى باسم الفئة؛ ولا يقوم بتنزيل صفحة ويب كاملة.
يتم تشغيل المعاينة وتوليد الكود في متصفحك. يحاول الاستوديو تذكر مسودة واحدة في التخزين المحلي لهذا المتصفح؛ قم بتصدير أي شيء تريد الاحتفاظ به. تعيد إعادة التعيين الاستوديو إلى نمطه الأولي.
النص والأنماط للداخل. HTML و CSS للخارج.
لا حاجة للتحميل. يعمل JavaScript على تشغيل المحرر المباشر في متصفحك. انسخ HTML و CSS بشكل منفصل، أو قم بتنزيل ورقة الأنماط CSS. تستخدم حزمة الخطوط التي تم إنشاؤها خطوطًا متاحة على جهاز المشاهد.
