الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

CSSANS Pro - الخط الملون ، وقح ، CSS

CSSANS Pro هو مشروع CSS للتو من قبل Andronache Izabela و Codrin Pavel.

جدول المحتويات

  • نظرة عامة - جميع الفصول الدراسية و CSS
  • بداية سريعة - احصل على CSSANS Pro وتشغيله في ثوانٍ
  • بداية سريعة - إصدار JavaScript - دع JS يقوم بالكتابة
  • خيارات
    • الألوان
    • تباعد الحروف
    • تباعد الكلمات
    • رفع الخط
    • مائل (نص مائل)
    • المحاذاة: المركز
    • المحاذاة: صحيح
  • دعم المتصفح - كيفية الاستخدام بدون متغيرات CSS
  • إمكانية الوصول - سوبر ، فائقة الأهمية
  • التثبيت - تعليمات لتشغيل هذا الريبو محليا

ملخص

كبار

  • a - z <b class="cssans:LETTER"></b>

صغيرة

  • a - z <b class="cssans:letter"></b>

أرقام

  • 0 - 9 <b class="cssans:NUMBER"></b>

الرموز

  • ! ~ ،.*()؟@: ؛ '-+=/& $#_ <b class="cssans:CHARACTER"></b>

هرب الرموز

  • ` <b class="cssans:%60"></b>
  • ^ <b class="cssans:%5E"></b>
  • ٪ <b class="cssans:%25"></b>
  • [ <b class="cssans:%5B"></b>
  • ] <b class="cssans:%5D"></b>
  • { <b class="cssans:%7B"></b>
  • } <b class="cssans:%7D"></b>
  • " <b class="cssans:%22"></b>
  • << <b class="cssans:%3C"></b>
  • > <b class="cssans:%3E"></b>
  • <b class="cssans:%5C"></b>
  • | <b class="cssans:%7C"></b>

بداية سريعة

الاستيلاء على ملف CSS المصغر من الريبو:

  • /dist/cssans.min.css

أضف بعض مثال HTML علامة: 

 < div class =" cssans cssans--center " >
    < div class =" cssans__accessible " > CSSans Pro </ div >

    < div class =" cssans__word " >
        < b class =" cssans:C " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:a " > </ b >
        < b class =" cssans:n " > </ b >
        < b class =" cssans:s " > </ b >
    </ div >

    < div class =" cssans__word " >
        < b class =" cssans:P " > </ b >
        < b class =" cssans:r " > </ b >
        < b class =" cssans:o " > </ b >
    </ div >
</ div >

... ربح!

هذا انهيار سريع:

  • كل حرف هو عنصر واحد مع فئة من cssans:CHAR
  • كل كلمة فردية تذهب داخل حاوية .cssans__word . هذا سيتأكد من أن جميع النصية متباعدة بشكل صحيح.
  • لتحسين إمكانية الوصول ، يجب عليك إضافة النص الأصلي في حاوية .cssans__accessible . بالتأكيد اقرأ هذا
  • يوفر CSSANS Pro بعض الخيارات وفئات المساعدة المدمجة مثل .cssans--center . رؤية المزيد من الخيارات

بداية سريعة - إصدار JavaScript

احصل على ملفات CSS و JS المصغرة من الريبو:

  • /dist/cssans.min.css
  • /dist/cssans.min.js

أضف بعض مثال HTML علامة: 

 < div id =" foo " > CSSans Pro </ div >

استدعاء CSSans(element, text) 

 var element = document . getElementById ( 'foo' ) ;
var text = element . innerText ;
CSSans ( element , text ) ;

يمكنك الاستيلاء على وظيفة CSSANS غير المحتملة من /_src/cssans/js/cssans.js لمعرفة ما يجري هناك. لا شيء ، حقا ، لا تتردد في صنع بنفسك.

خيارات

الألوان

يتم التحكم في الباليت الملون بواسطة 5 متغيرات CSS مكتوبة على أنها- --cssans-**WHICHCOLOR**: **R**, **G**, **B** .

يستخدم هذا التدوين قيم الألوان فقط ، بدون بناء جملة rgb() . 

 --cssans-primary : 31 , 51 , 104 ;    // blue
--cssans-secondary : 237 , 21 , 118 ; // pink
--cssans-accent1 : 43 , 208 , 247 ;   // light blue
--cssans-accent2 : 255 , 92 , 92 ;    // orange
--cssans-accent3 : 255 , 216 , 9 ;    // yellow

تباعد الحروف 

 --cssans-letter-spacing : 0.1 em ;

تباعد الكلمات 

 --cssans-word-spacing : 1 em ;

رفع الخط 

 --cssans-line-height : 1.1 em ;

محاذاة: المركز

استخدم فئة cssans--center على الحاوية التي تحمل علامة الخط.

سوف تتأكد هذا الفصل من محاذاة جميع الكلمات بشكل صحيح في منتصف الحاوية الأصل.

ببساطة تعيين text-align:center; لن تفعل ذلك أيضًا نظرًا لأن الكلمات مفصولة بالهوامش. 

 < div class =" cssans--center " >
    < div class =" cssans__word " > ... </ div >
</ div >

محاذاة: صحيح

استخدم فئة cssans--right على الحاوية التي تحمل علامة الخط.

سيساعدك هذه الفئة على محاذاة النص بشكل صحيح مع الجانب الأيمن من الحاوية الأصل. 

 < div class =" cssans--right " >
    < div class =" cssans__word " > ... </ div >
</ div >

مائل (مائل)

استخدم فئة cssans--slanted على الحاوية التي تحمل علامة الخط الخاصة بك لإعطاء الخط نظرة مائلة .

ملاحظة: يضيف هذا الفئة حرفيًا transform: skew(-15deg); لكل .cssans__word . لا تتردد في التجربة؟ 

 < div class =" cssans--slanted " >
    < div class =" cssans__word " > ... </ div >
</ div >

دعم المتصفح

يمكن لـ CSSANS Pro العمل على المتصفحات القديمة التي لا تدعم خصائص CSS المخصصة. فيما يلي بعض الطرق للقيام بذلك ، اختر الشخص الذي يناسب بشكل أفضل:

  • استخدم الإصدار المتوافق مع CSSANS PRO /dist/cssans.min.ie.css - لا يحتوي هذا الملف على متغيرات CSS ، يتم تجميع جميع الكود على خصائص CSS العادية. لا تتردد في العثور على/استبدال جميع الألوان والمفرقة التي ترغب في تخصيصها.

  • قم بتثبيت الريبو محليًا وقم ببناء نسختك الخاصة من cssans.min.ie.css أو ...

  • استخدم polyfil ، مثل css-vars-ponyfill

إمكانية الوصول

لا تحتاج إلى قراءة هذا إذا كنت تستخدم وظيفة CSSans() JavaScript.

يتكون CSSANS Pro من أشكال CSS التي لا يمكن للقراء فحصها والتقنيات المساعدة الأخرى.

من أجل الحفاظ على موقعك في الوصول إليه ، يرجى استخدام فئة .cssans__accessible المدمجة. من السهل حقًا ، انظر: 

 < div class =" cssans__accessible " > I can be read by a screen reader, hurray! </ div >

تثبيت

  1. ستحتاج إلى بيئة Jekyll العاملة و NPM مثبتة على جهازك. بمجرد تثبيت NPM ، ستحتاج إلى تثبيت gulp في دليل الجذر العالمي إذا لم تكن قد قمت بالفعل npm install -g gulp . تأكد من أن هذه تعمل على نظامك قبل المتابعة.

  2. استنساخ الريبو

  3. تثبيت التبعيات مع npm install

  4. gulp

في هذه المرحلة ، يجب على Browsersync فتح علامة تبويب متصفح جديدة على http://localhost:3000 وأنت على ما يرام!

يحتوي المستودع على جميع ملفات CSSANS Pro ، وكذلك موقع العرض التقديمي.

يمكنك العثور على ملفات الخط تحت _src/cssans/sass/ . يتم تعيين جميع خصائص CSS المخصصة في _common.scss .

يجب أن يقوم dist Directore بتحديث التحديث أثناء تحديث الملفات ، بحيث يمكنك الحصول على الملفات المصغرة من المجلد _dist بمجرد الانتهاء من التحرير.

استمتع!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل