مقدمة

butterfly css هي طريقة جديدة لبناء مواقع الويب التي تحلّق من أول لحظة! عبر الكتابة السريعة المعتمدة على الخصائص (attributes)

يوفر هذا التوثيق دليلًا شاملًا لجميع الخصائص المتاحة، من التثبيت إلى الأوصاف التفصيلية والأمثلة. يمكنك مشاهدة عرض توضيحي للوضع الداكن وتأثير عيد الميلاد هنا.

التثبيت

لاستخدام butterfly CSS، ما عليك سوى إضافة الوسوم التالية داخل قسم <head> في مستند HTML الخاص بك. ملف iv.css مخصص للحركات والميزات الأساسية، وiv.js للتعامل مع الارتفاع والعرض والهوامش والحشوة، أما dark.js فهو مخصص للوضع الداكن فقط.

   
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css">
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js"></script>
                    <script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js"></script>

على سبيل المثال، لتحويل أي عنصر إلى فراشة: 

                        <div butterfly='fly' ></div>
ولإنشاء زر: 
<button btn='purple' handdrawn>...</button>

الصندوق المتجاوب

الخاصية `responsive`

استخدمها على أي عنصر أب لتحويله إلى صندوق flex متجاوب (ملاحظة: استخدمها فقط إذا كانت العناصر الأبناء من نوع div فقط)

<div responsive>   </div>

الحركات الأساسية

هذه الخصائص تُطبّق حركات مستمرة متنوعة على العناصر. وهي تأثيرات حركية للأغراض العامة.

الخاصية `spin`

تدوير العنصر 360 درجة بشكل مستمر.

<div spin></div>

🌍

الخاصية `bounce`

تجعل العنصر يرتد رأسيًا.

<div bounce></div>

⚽

الخاصية `pulse`

تجعل العنصر يكبر قليلًا ثم يتلاشى ويعود.

<div pulse></div>

💗

الخاصية `swing`

تجعل العنصر يتأرجح من جانب لآخر.

<div swing></div>

🧹

الخاصية `flip`

تقلب العنصر أفقيًا.

<div flip></div>

🃏

الخاصية `shake`

تجعل العنصر يهتز أفقيًا.

<div shake></div>

😵‍💫

الخاصية `grow`

تجعل العنصر يكبر ويصغر باستمرار.

<div grow></div>

🐣

الخاصية `shrink`

تجعل العنصر يصغر ويكبر باستمرار.

<div shrink></div>

🛰️

الخاصية `slide-x`

تحرك العنصر أفقيًا يمينًا ويسارًا.

<div slide-x></div>

🛒

الخاصية `slide-y`

تحرك العنصر رأسيًا لأعلى ولأسفل.

<div slide-y></div>

🎈

الوضع الداكن

الخاصية `d{color}/lwhite` مثل `dpurple`

تضبط الخلفية على اللون البنفسجي الداكن عند تفعيل 'dark-btn'، واللون البنفسجي الفاتح في وضع النهار.

<div  dpurple lpurple> </div>
الخاصية `tl{color}/dt{color}`

لتحديد لون النص في الوضع الداكن والفاتح.

<p dtwhite tlblue></p>
                            
                            <button dark-btn btn='black' ></button>
الخاصية `tl{color}/dt{color}`

لتحديد لون النص في الوضع الداكن والفاتح.

<p dtwhite tlblue></p>
                            
                            <button dark-btn btn='black' ></button>
تخصيص الوضع الداكن باستخدام JavaScript 
  document.addEventListener("darkModeApplied", (mode) => {
    if (mode.detail.dark) {
        console.log("Dark mode is active");
        // custom dark mode logic
    } else {
        console.log("Light mode is active");
        // custom light mode logic
    }
});

حركات الكرة العائمة

هذه الخصائص تُنشئ كرات متوهجة ومتحركة تطفو عبر العنصر باستخدام الـ pseudo-element ‏`::before`. ينبغي أن يحتوي العنصر الأب على `position: relative` و`overflow: hidden` للحصول على أفضل النتائج.

الخاصية `ball-move-1`

حركة كرة متوهجة بمسار وسرعة محددين.

<div style="..." ball-move-1></div>

كرة 1

الخاصية `ball-move-2`

حركة كرة متوهجة بمسار وسرعة مختلفين.

<div style="..." ball-move-2></div>

كرة 2

الخاصية `ball-move-3`

حركة كرة متوهجة أكبر حجمًا.

<div style="..." ball-move-3></div>

كرة 3

الخاصية `ball-move-4`

حركة كرة متوهجة أسرع وأصغر حجمًا.

<div style="..." ball-move-4></div>

كرة 4

الخاصية `ball-move-5`

حركة كرة متوهجة كبيرة جدًا وبطيئة جدًا.

<div style="..." ball-move-5></div>

كرة 5

التأثيرات الخاصة

هذه الخصائص تُطبّق تأثيرات بصرية فريدة على العناصر، وكثيرًا ما تستخدم pseudo-elements أو فلاتر SVG.

الخاصية `birthday-paper`

تُنشئ حركة أوراق تتساقط كالقصاصات الملونة (confetti) فوق العنصر. يجب أن يحتوي العنصر الأب على `position: relative` و`overflow: hidden`.

<div style="..." birthday-paper></div>
عيد ميلاد سعيد!
الخاصية `handdrawn`

تمنح العنصر مظهرًا مرسومًا يدويًا أو خشنًا باستخدام فلتر SVG، مع تأثير عند التحويم.

<div handdrawn></div>
صندوق مرسوم
الخاصية `blur`

تُطبّق `filter: blur(2px)` على العنصر.

<div blur></div>
ضبابي
الخاصية `butterfly='fly'` اطلع على الشرح هنا 
<div style="..." butterfly='fly'></div>

أدوات التدوير

تُطبّق زوايا تدوير محددة على العناصر. توفر هذه الخصائص تدويرًا بتدرج درجة واحدة من 0 إلى 360 درجة. كما تتوفر متغيرات متجاوبة.

الخصائص `rotate="0"` إلى `rotate="360"`

تدوير العنصر بالدرجة المحددة (مثلًا `rotate="45"` للتدوير 45 درجة، و`rotate="180"` للتدوير 180 درجة). القيم بالدرجات بدون وحدات في الخاصية نفسها.

<div rotate="45"></div>
45°

أدوات التخطيط

الخاصية `rows`

تُطبّق `display: flex` مع `flex-direction: row`، وتمركز العناصر أفقيًا ورأسيًا.

<div rows>...</div>
عنصر 1 عنصر 2
الخاصية `columns`

تُطبّق `display: flex` مع `flex-direction: column`، وتمركز العناصر أفقيًا ورأسيًا.

<div columns>...</div>
عنصر 1 عنصر 2
الخاصية `center`

تمركز العنصر داخل حاوية flex الخاصة به (`align-self: center; justify-self: center;`).

<div flex-row><span center>...</span></div>
في المنتصف
الخاصية `flex-auto`

تتبدّل بين flex-row وflex-column عندما تكون الشاشة أكبر أو أصغر من 1200px للتخطيط العام لا للبطاقات. مثلًا يمكنك استخدامها إذا أردت نصًا بجانب صورة على الكمبيوتر، ويصبح النص تحت الصورة على الموبايل. لعناصر أو divs متجاوبة راجع قسم الصندوق المتجاوب.

<div flex-auto> </div>

أدوات العرض والارتفاع

هذه الخصائص تُتيح لك تحديد عرض وارتفاع ثابتين للعناصر بوحدة rem.

الخصائص `w-1` إلى `w-999`

تضبط عرض العنصر من 1 rem إلى 999 rem. مثلًا `w-100` تضبط العرض على 100rem.

<div w-150></div>
عرض 150rem
الخصائص `h-1` إلى `h-999`

تضبط ارتفاع العنصر من 1 rem إلى 999 rem. مثلًا `h-200` تضبط الارتفاع على 200rem.

<div h-120></div>
ارتفاع 120rem
`w-10p` إلى `w-100p` (بضرب 10) وw-full

تضبط العرض بالنسبة المئوية.

<div w-80p></div>
عرض كامل
`h-10p` إلى `h-100p` (بضرب 10)

تضبط الارتفاع بالنسبة المئوية.

<div h-90p></div>
ارتفاع 90%

أشكال Clip-Path

هذه الخصائص تُطبّق أشكالًا هندسية متنوعة باستخدام `clip-path`.

الخاصية `circle`

تقصّ العنصر على شكل دائرة مثالية.

<div circle></div>
دائرة
الخاصية `triangle`

تقصّ العنصر على شكل مثلث.

<div triangle></div>
مثلث
الخاصية `ellipse`

تقصّ العنصر على شكل بيضاوي.

<div ellipse></div>
بيضاوي
الخاصية `square`

تجعل العنصر مقصوصًا على شكل مربع (inset 0).

<div square></div>
مربع
الخاصية `rectangle`

تقصّ العنصر على شكل مستطيل (مع inset بنسبة 10% أعلى وأسفل).

<div rectangle></div>
مستطيل
الخاصية `diamond`

تقصّ العنصر على شكل معيّن.

<div diamond></div>
معيّن
الخاصية `hexagon`

تقصّ العنصر على شكل سداسي.

<div hexagon></div>
سداسي
الخاصية `parallelogram`

تقصّ العنصر على شكل متوازي أضلاع.

<div parallelogram></div>
متوازي
الخاصية `star`

تقصّ العنصر على شكل نجمة.

<div star></div>
نجمة
الخاصية `trapezoid`

تقصّ العنصر على شكل شبه منحرف.

<div trapezoid></div>
شبه منحرف
الخاصية `home`

تقصّ العنصر على شكل منزل كلاسيكي.

<div home></div>
منزل
الخاصية `heart`

تقصّ العنصر على شكل قلب.

<div heart></div>
قلب
الخاصية `x`

تقصّ العنصر على شكل حرف 'X'.

<div x></div>
شكل X
الخاصية `message`

تقصّ العنصر على شكل فقاعة رسالة مع مؤشر في الأسفل.

<div message></div>
رسالة

التدرجات اللونية

تُطبّق تدرجات خطية حديثة كألوان خلفية.

الخاصية `gradient-1`

تدرج من #6600FF إلى #FF6FD8.

<div gradient-1></div>
الخاصية `gradient-2`

تدرج من #43e97b إلى #38f9d7.

<div gradient-2></div>
الخاصية `gradient-3`

تدرج من #f7971e إلى #ffd200.

<div gradient-3></div>
الخاصية `gradient-4`

تدرج من #f953c6 إلى #b91d73.

<div gradient-4></div>
الخاصية `gradient-5`

تدرج من #30cfd0 إلى #330867.

<div gradient-5></div>
الخاصية `gradient-6`

تدرج من #5ee7df إلى #b490ca.

<div gradient-6></div>
الخاصية `gradient-7`

تدرج من #ee9ca7 إلى #ffdde1.

<div gradient-7></div>
الخاصية `gradient-8`

تدرج من #f6d365 إلى #fda085.

<div gradient-8></div>
الخاصية `gradient-9`

تدرج من #6600ff إلى #c6e8f8.

<div gradient-9></div>
الخاصية `gradient-10`

تدرج من #ffffff إلى #00c3ff.

<div gradient-10></div>

المكونات

البطاقة (Card)

الخاصية `card`

مكوّن بطاقة منسّق بحشوة وزوايا مستديرة وظل، مع تأثير تحويم خفيف.

<div card>...</div>

عنوان البطاقة

هذا محتوى داخل بطاقة butterfly CSS.

الزر (Button)

الخاصية `button`

زر منسّق بشكل أساسي مع حشوة وزوايا مستديرة وخلفية وتأثيرات تحويم.

<button button>اضغط هنا</button>
خصائص `btn='{color}'`

أزرار ملونة جاهزة. استبدل `{color}` بأي لون من مجموعة واسعة من الألوان. تأثيرات التحويم مضمّنة.

<button btn='purple'>Purple</button>
<button btn='green'>Green</button>
<button btn='rose'>Rose</button>

يشمل هذا طيفًا كاملًا من الألوان لخصائص `btn='{color}'`. يرجى الرجوع إلى ملف `float.css` للاطلاع على تعريفات الألوان الدقيقة.

ألوان الخلفية

اضبط ألوان الخلفية باستخدام محددات الخصائص للألوان الأساسية والظلال المختلفة (مثل `red`، `red-500`). تُطبّق هذه الخصائص `!important` للتغلب على الأنماط الأخرى.

الألوان الأساسية

الخاصية `red`

تضبط الخلفية على اللون الأحمر الزاهي.

<div red></div>
الخاصية `pink`

تضبط الخلفية على اللون الوردي الزاهي.

<div pink></div>
الخاصية `purple`

تضبط الخلفية على اللون البنفسجي الغامق.

<div purple></div>
الخاصية `deep-purple`

تضبط الخلفية على بنفسجي أكثر قتامة.

<div deep-purple></div>
الخاصية `indigo`

تضبط الخلفية على اللون النيلي الأزرق.

<div indigo></div>
الخاصية `blue`

تضبط الخلفية على الأزرق العادي.

<div blue></div>
الخاصية `light-blue`

تضبط الخلفية على الأزرق الفاتح.

<div light-blue></div>
الخاصية `cyan`

تضبط الخلفية على اللون السماوي الأزرق.

<div cyan></div>
الخاصية `teal`

تضبط الخلفية على اللون الزيتي الأخضر.

<div teal></div>
الخاصية `green`

تضبط الخلفية على الأخضر الزاهي.

<div green></div>
الخاصية `light-green`

تضبط الخلفية على الأخضر الفاتح.

<div light-green></div>
الخاصية `lime`

تضبط الخلفية على الأخضر الليموني.

<div lime></div>
الخاصية `yellow`

تضبط الخلفية على الأصفر الذهبي.

<div yellow></div>
الخاصية `amber`

تضبط الخلفية على اللون الكهرماني الأصفر.

<div amber></div>
الخاصية `orange`

تضبط الخلفية على البرتقالي.

<div orange></div>
الخاصية `deep-orange`

تضبط الخلفية على البرتقالي الغامق.

<div deep-orange></div>
الخاصية `brown`

تضبط الخلفية على البني.

<div brown></div>
الخاصية `gray`

تضبط الخلفية على الرمادي العادي.

<div gray></div>
الخاصية `blue-gray`

تضبط الخلفية على الرمادي المزرق.

<div blue-gray></div>
الخاصية `black`

تضبط الخلفية على الأسود الغامق.

<div black></div>
الخاصية `white`

تضبط الخلفية على الأبيض.

<div white></div>
الخاصية `light`

تضبط الخلفية على بنفسجي/رمادي فاتح جدًا (`#f8f7ff`).

<div light></div>
الخاصية `dark`

تضبط الخلفية على رمادي/أزرق داكن (`#22223b`).

<div dark></div>

الألوان بالظلال (مثل `red-50` إلى `red-900`)

كل لون رئيسي (أحمر، أزرق، أخضر، أصفر، بنفسجي، رمادي) له 10 ظلال من 50 (الأفتح) إلى 900 (الأغمق).

الخصائص `red-50` إلى `red-900`

ظلال متنوعة من خلفية حمراء.

<div red-50></div>
<div red-500></div>
<div red-900></div>
الخصائص `blue-50` إلى `blue-900`

ظلال متنوعة من خلفية زرقاء.

<div blue-50></div>
<div blue-500></div>
<div blue-900></div>
الخصائص `green-50` إلى `green-900`

ظلال متنوعة من خلفية خضراء.

<div green-50></div>
<div green-500></div>
<div green-900></div>
الخصائص `yellow-50` إلى `yellow-900`

ظلال متنوعة من خلفية صفراء.

<div yellow-50></div>
<div yellow-500></div>
<div yellow-900></div>
الخصائص `purple-50` إلى `purple-900`

ظلال متنوعة من خلفية بنفسجية.

<div purple-50></div>
<div purple-500></div>
<div purple-900></div>
الخصائص `gray-50` إلى `gray-900`

ظلال متنوعة من خلفية رمادية.

<div gray-50></div>
<div gray-500></div>
<div gray-900></div>

ألوان النص

اضبط ألوان النص باستخدام محددات الخصائص مسبوقة بـ `t` للألوان الأساسية والظلال المختلفة (مثل `tred`، `tred-500`). تُطبّق هذه الخصائص `!important` للتغلب على الأنماط الأخرى.

ألوان النص الأساسية

الخاصية `tred`

تضبط لون النص على الأحمر الزاهي.

<span tred>...</span>

نص أحمر

الخاصية `tpink`

تضبط لون النص على الوردي الزاهي.

<span tpink>...</span>

نص وردي

الخاصية `tpurple`

تضبط لون النص على البنفسجي الغامق.

<span tpurple>...</span>

نص بنفسجي

الخاصية `tdeep-purple`

تضبط لون النص على بنفسجي أكثر قتامة.

<span tdeep-purple>...</span>

نص بنفسجي غامق

الخاصية `tindigo`

تضبط لون النص على النيلي الأزرق.

<span tindigo>...</span>

نص نيلي

الخاصية `tblue`

تضبط لون النص على الأزرق العادي.

<span tblue>...</span>

نص أزرق

الخاصية `tlight-blue`

تضبط لون النص على الأزرق الفاتح.

<span tlight-blue>...</span>

نص أزرق فاتح

الخاصية `tcyan`

تضبط لون النص على السماوي الأزرق.

<span tcyan>...</span>

نص سماوي

الخاصية `tteal`

تضبط لون النص على الزيتي الأخضر.

<span tteal>...</span>

نص زيتي

الخاصية `tgreen`

تضبط لون النص على الأخضر الزاهي.

<span tgreen>...</span>

نص أخضر

الخاصية `tlight-green`

تضبط لون النص على الأخضر الفاتح.

<span tlight-green>...</span>

نص أخضر فاتح

الخاصية `tlime`

تضبط لون النص على الأخضر الليموني.

<span tlime>...</span>

نص ليموني

الخاصية `tyellow`

تضبط لون النص على الأصفر الذهبي.

<span tyellow>...</span>

نص أصفر

الخاصية `tamber`

تضبط لون النص على الكهرماني الأصفر.

<span tamber>...</span>

نص كهرماني

الخاصية `torange`

تضبط لون النص على البرتقالي.

<span torange>...</span>

نص برتقالي

الخاصية `tdeep-orange`

تضبط لون النص على البرتقالي الغامق.

<span tdeep-orange>...</span>

نص برتقالي غامق

الخاصية `tbrown`

تضبط لون النص على البني.

<span tbrown>...</span>

نص بني

الخاصية `tgray`

تضبط لون النص على الرمادي العادي.

<span tgray>...</span>

نص رمادي

الخاصية `tblue-gray`

تضبط لون النص على الرمادي المزرق.

<span tblue-gray>...</span>

نص رمادي مزرق

الخاصية `tblack`

تضبط لون النص على الأسود الغامق.

<span tblack>...</span>

نص أسود

الخاصية `twhite`

تضبط لون النص على الأبيض.

<span twhite>...</span>

نص أبيض

الخاصية `tlight`

تضبط لون النص على بنفسجي/رمادي فاتح جدًا.

<span tlight>...</span>

نص فاتح

الخاصية `tdark`

تضبط لون النص على رمادي/أزرق داكن.

<span tdark>...</span>

نص داكن

ألوان النص بالظلال (مثل `tred-50` إلى `tred-900`)

كل لون رئيسي (أحمر، أزرق، أخضر، أصفر، بنفسجي، رمادي) له 10 ظلال من 50 (الأفتح) إلى 900 (الأغمق).

الخصائص `tred-50` إلى `tred-900`

ظلال متنوعة من النص الأحمر.

<span tred-50>نص</span>
<span tred-500>نص</span>
<span tred-900>نص</span>
نص نص نص نص نص
الخصائص `tblue-50` إلى `tblue-900`

ظلال متنوعة من النص الأزرق.

<span tblue-50>نص</span>
نص نص نص نص نص
الخصائص `tgreen-50` إلى `tgreen-900`

ظلال متنوعة من النص الأخضر.

<span tgreen-50>نص</span>
نص نص نص نص نص
الخصائص `tyellow-50` إلى `tyellow-900`

ظلال متنوعة من النص الأصفر.

<span tyellow-50>نص</span>
نص نص نص نص نص
الخصائص `tpurple-50` إلى `tpurple-900`

ظلال متنوعة من النص البنفسجي.

<span tpurple-50>نص</span>
نص نص نص نص نص
الخصائص `tgray-50` إلى `tgray-900`

ظلال متنوعة من النص الرمادي.

<span tgray-50>نص</span>
نص نص نص نص نص

أدوات التباعد

الخصائص `m-x / p-x`

استخدمها للهامش (margin) والحشوة (padding) بوحدة rem.

<div m-10></div> أو <div p-20></div>
الخاصية `bg=auto`

تضبط الخلفية على: توسيط، تغطية كاملة، بدون تكرار.

<div bg=auto></div>
الخاصية `s{color}`

تضيف ظلًا بنفس اللون المحدد.

<div sred></div>
الخاصية `shadow`

تضيف ظلًا رماديًا افتراضيًا.

<div shadow></div>
الخاصية `tshadow`

تُطبّق ظل نص.

<h1 tshadow>عنوان</h1>
الخصائص `navbar / top / bottom`

تُستخدم لتحديد موضع شريط التنقل.

<div navbar top></div>
`ai-center / ai-end / ai-start` لمحاذاة العناصر (align-items)
`jc-start / jc-end / jc-center` لتوزيع المحتوى (justify-content)
`ol` — شفافية منخفضة (opacity low)
`nof` — بدون تجاوز (overflow hidden للمحورين)
`bold` — نص عريض