إنه سؤال أسمعه يُطرح كثيرًا: هل من الممكن إنشاء ظلال من التدرجات بدلاً من الألوان الصلبة؟ لا توجد خاصية CSS محددة تقوم بذلك (صدقوني ، لقد بحثت) وأي منشور مدونة تجده حوله هو في الأساس الكثير من حيل CSS لتقريب التدرج اللوني. سنقوم بالفعل بتغطية بعض هؤلاء أثناء المضي قدمًا.
لكن اولا… طرق مقال عن الظلال المتدرجة؟ حقًا؟
نعم ، هذه مشاركة أخرى حول الموضوع ، لكنها مختلفة. معًا ، سنعمل على دفع الحدود للحصول على حل يغطي شيئًا لم أره في أي مكان آخر: شفافية. تعمل معظم الحيل إذا كان العنصر له خلفية غير شفافة ولكن ماذا لو كانت لدينا خلفية شفافة؟ سوف نستكشف هذه الحالة هنا!
قبل أن نبدأ ، اسمحوا لي أن أقدم منشئ الظلال المتدرجة. كل ما عليك فعله هو ضبط التكوين والحصول على الكود. لكن تابع لأنني سأساعدك على فهم كل المنطق وراء الكود الذي تم إنشاؤه.
جدول المحتويات
حل غير شفاف
لنبدأ بالحل الذي سيعمل مع 80٪ من معظم الحالات. الحالة الأكثر شيوعًا: أنت تستخدم عنصرًا بخلفية ، وتحتاج إلى إضافة ظل متدرج إليه. لا توجد قضايا شفافية للنظر هناك.
الحل هو الاعتماد على عنصر زائف حيث يتم تحديد التدرج اللوني. يمكنك وضعه خلف العنصر الفعلي و قم بتطبيق مرشح التمويه عليه.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
يبدو أنه يحتوي على الكثير من التعليمات البرمجية ، وذلك لأنه كذلك. إليك كيف تمكنا من القيام بذلك باستخدام ملف box-shadow
بدلاً من ذلك ، إذا كنا نستخدم لونًا خالصًا بدلاً من التدرج اللوني.
box-shadow: 10px 8px 10px 5px orange;
يجب أن يمنحك ذلك فكرة جيدة عما تفعله القيم الموجودة في المقتطف الأول. لدينا إزاحة X و Y ، نصف قطر التمويه ، ومسافة الانتشار. لاحظ أننا بحاجة إلى قيمة سالبة لمسافة الانتشار التي تأتي من inset
خاصية.
إليك عرض توضيحي يظهر الظل المتدرج بجانب اللون الكلاسيكي box-shadow
:
إذا نظرت عن كثب ، ستلاحظ أن كلا الظلين مختلفان قليلاً ، لا سيما الجزء الضبابي. إنها ليست مفاجأة لأنني متأكد من أن filter
تعمل خوارزمية الخاصية بشكل مختلف عن تلك الخاصة بـ box-shadow
. هذه ليست مشكلة كبيرة لأن النتيجة ، في النهاية ، متشابهة تمامًا.
هذا الحل جيد ، ولكن لا يزال به بعض العيوب المتعلقة بـ z-index: -1
تصريح. نعم هنالك "سياق التراص" يحدث هناك!
لقد تقدمت بطلب أ transform
إلى العنصر الرئيسي ، والازدهار! لم يعد الظل تحت العنصر. هذا ليس خطأ ولكنه نتيجة منطقية لسياق التراص. لا تقلق ، لن أبدأ شرحًا مملًا حول تكديس السياق (لقد فعلت ذلك بالفعل في سلسلة Stack Overflow) ، لكنني سأوضح لك كيفية التغلب عليها.
الحل الأول الذي أوصي به هو استخدام 3D transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
بدلا من استخدام z-index: -1
، سوف نستخدم ترجمة سلبية على طول المحور Z. سنضع كل شيء بالداخل translate3d()
. لا تنسى استخدام transform-style: preserve-3d
على العنصر الرئيسي خلاف ذلك ، 3D transform
لن تصبح نافذة المفعول.
على حد علمي ، ليس هناك أي آثار جانبية لهذا الحل ... ولكن ربما تراه. إذا كان الأمر كذلك ، فشاركه في قسم التعليقات ، ودعنا نحاول إيجاد حل له!
إذا كنت غير قادر على استخدام 3D لسبب ما transform
، الحل الآخر هو الاعتماد على عنصرين زائفين - ::before
و ::after
. يقوم أحدهما بإنشاء ظل التدرج ، والآخر يعيد إنتاج الخلفية الرئيسية (والأنماط الأخرى التي قد تحتاجها). بهذه الطريقة ، يمكننا التحكم بسهولة في ترتيب التراص لكل من العناصر الزائفة.
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
من المهم أن نلاحظ أننا كذلك إجبار العنصر الرئيسي لإنشاء سياق التراص بالتصريح z-index: 0
الطرق أو أي ممتلكات أخرى تفعل الشيء نفسه، عليه. أيضًا ، لا تنس أن العناصر الزائفة تعتبر مربع الحشو الخاص بالعنصر الرئيسي كمرجع. لذلك ، إذا كان للعنصر الرئيسي حد ، فأنت بحاجة إلى أخذ ذلك في الاعتبار عند تحديد أنماط العناصر الزائفة. ستلاحظ أنني أستخدم inset: -2px
on ::after
لحساب الحدود المحددة على العنصر الرئيسي.
كما قلت ، ربما يكون هذا الحل جيدًا بدرجة كافية في معظم الحالات التي تريد فيها ظلًا متدرجًا ، طالما أنك لست بحاجة إلى دعم الشفافية. لكننا هنا من أجل التحدي ودفع الحدود ، لذلك حتى لو لم تكن بحاجة إلى ما سيأتي بعد ذلك ، فابق معي. من المحتمل أن تتعلم حيل CSS جديدة يمكنك استخدامها في أي مكان آخر.
حل شفاف
دعنا ننتقل من حيث توقفنا في العرض ثلاثي الأبعاد transform
وإزالة الخلفية من العنصر الرئيسي. سأبدأ بظل له كل من الإزاحة ومسافة الانتشار تساوي 0
.
تكمن الفكرة في إيجاد طريقة لقص أو إخفاء كل شيء داخل منطقة العنصر (داخل الحد الأخضر) مع الاحتفاظ بما هو بالخارج. سوف نستخدم clip-path
من أجل هذا. لكن قد تتساءل كيف clip-path
يمكن أن تقطع في الداخل عنصر.
في الواقع ، لا توجد طريقة للقيام بذلك ، ولكن يمكننا محاكاته باستخدام نمط مضلع معين:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
تادا! لدينا ظل متدرج يدعم الشفافية. كل ما فعلناه هو إضافة clip-path
إلى الكود السابق. هنا شكل لتوضيح جزء المضلع.
المنطقة الزرقاء هي الجزء المرئي بعد تطبيق clip-path
. أنا أستخدم اللون الأزرق فقط لتوضيح المفهوم ، لكن في الواقع ، سنرى فقط الظل داخل تلك المنطقة. كما ترى ، لدينا أربع نقاط محددة بقيمة كبيرة (B
). قيمتي الكبيرة هي 100vmax
، ولكن يمكن أن تكون أي قيمة كبيرة تريدها. الفكرة هي التأكد من أن لدينا مساحة كافية للظل. لدينا أيضًا أربع نقاط تمثل أركان العنصر الزائف.
توضح الأسهم المسار الذي يحدد المضلع. نبدأ من (-B, -B)
حتى نصل (0,0)
. في المجموع ، نحتاج إلى 10 نقاط. ليست ثماني نقاط لأن نقطتين تتكرر مرتين في المسار ((-B,-B)
و (0,0)
).
لا يزال هناك شيء اخر ترك لنا القيام به ، وهو حساب مسافة السبريد والتعويضات. السبب الوحيد الذي يجعل العرض التوضيحي أعلاه يعمل لأنه حالة معينة حيث تكون التعويضات ومسافة الانتشار متساوية 0
.
دعونا نحدد السبريد ونرى ما سيحدث. تذكر أننا نستخدم ملفات inset
بقيمة سالبة للقيام بذلك:
أصبح العنصر الزائف الآن أكبر من العنصر الرئيسي ، لذا فإن ملف clip-path
يقطع أكثر مما نحتاج إليه. تذكر أننا نحتاج دائمًا إلى قطع الجزء في الداخل العنصر الرئيسي (المنطقة داخل الحد الأخضر للمثال). نحتاج إلى تعديل موضع النقاط الأربع بداخله clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
لقد حددنا متغير CSS ، --s
، لمسافة الانتشار وتحديث نقاط المضلع. لم أتطرق إلى النقاط التي أستخدم فيها القيمة الكبيرة. أقوم فقط بتحديث النقاط التي تحدد زوايا العنصر الزائف. أقوم بزيادة جميع القيم الصفرية بواسطة --s
وتقليل 100%
القيم من قبل --s
.
إنه نفس المنطق مع التعويضات. عندما نترجم العنصر الزائف ، يكون الظل خارج المحاذاة ، ونحتاج إلى تصحيح المضلع مرة أخرى وتحريك النقاط في الاتجاه المعاكس.
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
هناك متغيرين إضافيين للإزاحة: --x
و --y
. نستخدمها داخل transform
ونقوم أيضًا بتحديث ملف clip-path
قيم. ما زلنا لا نلمس نقاط المضلع بقيم كبيرة ، لكننا نعوض كل النقاط الأخرى - نحن نخفض --x
من إحداثيات X و --y
من إحداثيات ص.
الآن كل ما يتعين علينا القيام به هو تحديث بعض المتغيرات للتحكم في ظل التدرج. وأثناء وجودنا فيه ، دعنا أيضًا نجعل نصف قطر التمويه متغيرًا أيضًا:
هل ما زلنا بحاجة إلى 3D
transform
حيلة؟
كل هذا يتوقف على الحدود. لا تنس أن مرجع العنصر الزائف هو مربع الحشو ، لذلك إذا قمت بتطبيق حد على العنصر الرئيسي ، فسيكون لديك تداخل. إما أن تحتفظ بالـ 3D transform
خدعة أو تحديث inset
قيمة لحساب الحدود.
هنا هو العرض السابق مع تحديث inset
القيمة بدلا من 3D transform
:
أود أن أقول أن هذه طريقة أكثر ملاءمة للذهاب لأن مسافة الانتشار ستكون أكثر دقة ، حيث تبدأ من مربع الحدود بدلاً من مربع الحشو. لكنك ستحتاج إلى ضبط ملف inset
القيمة وفقًا لحد العنصر الرئيسي. في بعض الأحيان ، تكون حدود العنصر غير معروفة وعليك استخدام الحل السابق.
مع الحل السابق غير الشفاف ، من الممكن أن تواجه مشكلة سياق التراص. وباستخدام الحل الشفاف ، من الممكن أن تواجه مشكلة حدودية بدلاً من ذلك. الآن لديك خيارات وطرق للتغلب على هذه المشكلات. خدعة التحويل ثلاثي الأبعاد هي الحل المفضل لدي لأنها تعمل على إصلاح جميع المشكلات (المولد عبر الإنترنت سوف أعتبرها كذلك)
إضافة نصف قطر حد
إذا حاولت إضافة border-radius
بالنسبة للعنصر عند استخدام الحل غير الشفاف الذي بدأنا به ، فهذه مهمة تافهة إلى حد ما. كل ما عليك فعله هو أن ترث نفس القيمة من العنصر الرئيسي ، وقد انتهيت.
حتى إذا لم يكن لديك نصف قطر حد ، فمن الجيد تحديده border-radius: inherit
. هذا يمثل أي احتمال border-radius
قد ترغب في إضافته لاحقًا أو نصف قطر حد يأتي من مكان آخر.
إنها قصة مختلفة عند التعامل مع الحل الشفاف. لسوء الحظ ، هذا يعني إيجاد حل آخر لأن clip-path
لا تستطيع التعامل مع الانحناءات. هذا يعني أننا لن نتمكن من قطع المنطقة داخل العنصر الرئيسي.
سوف نقدم ملف mask
الملكية لهذا المزيج.
كان هذا الجزء مملًا جدًا ، ولقد كافحت لإيجاد حل عام لا يعتمد عليه أرقام سحرية. انتهى بي الأمر بحل معقد للغاية يستخدم عنصرًا زائفًا واحدًا فقط ، لكن الكود كان عبارة عن قطعة من السباغيتي لا تغطي سوى حالات قليلة معينة. لا أعتقد أن الأمر يستحق استكشاف هذا الطريق.
قررت إدخال عنصر إضافي من أجل رمز أبسط. ها هي الترميز:
<div class="box"> <sh></sh>
</div>
أنا أستخدم عنصرًا مخصصًا ، <sh>
، لتجنب أي تعارض محتمل مع CSS خارجي. كان بإمكاني استخدام ملف <div>
، ولكن نظرًا لأنه عنصر شائع ، يمكن بسهولة استهدافه بواسطة قاعدة CSS أخرى قادمة من مكان آخر يمكنه كسر الكود الخاص بنا.
الخطوة الأولى هي وضع ملف <sh>
عنصر وخلق تجاوزًا عمدًا:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
قد يبدو الرمز غريبًا بعض الشيء ، لكننا سنصل إلى المنطق الكامن وراءه مع تقدمنا. بعد ذلك ، نقوم بإنشاء ظل التدرج باستخدام عنصر زائف من <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
كما ترى ، يستخدم العنصر الزائف نفس الكود مثل جميع الأمثلة السابقة. الاختلاف الوحيد هو ثلاثي الأبعاد transform
المعرفة في <sh>
بدلاً من العنصر الزائف. في الوقت الحالي ، لدينا ظل متدرج بدون ميزة الشفافية:
لاحظ أن منطقة <sh>
يتم تعريف العنصر بالخطوط العريضة السوداء. لماذا أفعل هذا؟ لأنه بهذه الطريقة ، يمكنني تطبيق ملف mask
عليه لإخفاء الجزء داخل المنطقة الخضراء والحفاظ على الجزء الفائض حيث نحتاج إلى رؤية الظل.
أعلم أنه صعب بعض الشيء ، لكن على عكس clip-path
أطلقت حملة mask
الخاصية لا تأخذ في الحسبان المنطقة في الخارج عنصر لإظهار وإخفاء الأشياء. لهذا السبب كنت مضطرًا لإدخال العنصر الإضافي - لمحاكاة المنطقة "الخارجية".
لاحظ أيضًا أنني أستخدم مزيجًا من border
و inset
لتحديد تلك المنطقة. هذا يسمح لي بالحفاظ على مربع الحشو لهذا العنصر الإضافي كما هو للعنصر الرئيسي حتى لا يحتاج العنصر الزائف إلى حسابات إضافية.
شيء مفيد آخر نحصل عليه من استخدام عنصر إضافي هو أن العنصر ثابت ، وأن العنصر الزائف فقط هو الذي يتحرك (باستخدام translate
). سيسمح لي ذلك بتعريف القناع بسهولة ، وهو ملف آخر خطوة من هذه الحيلة.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
تم التنفيذ! لدينا ظل التدرج ، وهو يدعم border-radius
! ربما كنت تتوقع عقدة mask
قيمة مع الكثير من التدرجات ، ولكن لا! نحتاج فقط إلى اثنين من التدرجات البسيطة و a mask-composite
ليكمل السحر.
دعنا نعزل <sh>
عنصر لفهم ما يحدث هناك:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
هذا ما نحصل عليه:
لاحظ كيف يتطابق نصف القطر الداخلي مع العناصر الرئيسية border-radius
. لقد حددت حدًا كبيرًا (150px
) و border-radius
يساوي الحد الكبير المزيد نصف قطر العنصر الرئيسي. في الخارج ، لدينا نصف قطر يساوي 150px + R
. في الداخل ، لدي 150px + R - 150px = R
.
يجب علينا إخفاء الجزء الداخلي (الأزرق) والتأكد من أن الجزء الحدودي (الأحمر) لا يزال مرئيًا. للقيام بذلك ، قمت بتحديد طبقتين من القناع - واحدة تغطي فقط منطقة مربع المحتوى والأخرى تغطي منطقة مربع الحدود (القيمة الافتراضية). ثم استبعدت أحدهما عن الآخر للكشف عن الحدود.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
لقد استخدمت نفس الأسلوب ل إنشاء حد يدعم التدرجات و border-radius
. لدى آنا تيودور مقالة جيدة أيضًا حول اخفاء المركب أن أدعوكم للقراءة.
هل هناك أي عيوب لهذه الطريقة؟
نعم ، هذا بالتأكيد ليس مثاليًا. تتعلق المشكلة الأولى التي قد تواجهها باستخدام حد على العنصر الرئيسي. قد يؤدي هذا إلى حدوث اختلال صغير في نصف القطر إذا لم تأخذ في الحسبان ذلك. لدينا هذه المشكلة في مثالنا ، ولكن ربما لا يمكنك ملاحظتها.
الإصلاح سهل نسبيًا: أضف عرض الحدود لملف <sh>
عناصر inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
عيب آخر هو القيمة الكبيرة التي نستخدمها للحدود (150px
في المثال). يجب أن تكون هذه القيمة كبيرة بما يكفي لاحتواء الظل ولكنها ليست كبيرة جدًا لتجنب مشاكل تجاوز السعة وشريط التمرير. لحسن الحظ ، المولد عبر الإنترنت سيحسب القيمة المثلى مع الأخذ في الاعتبار جميع المعلمات.
العيب الأخير الذي أدركه هو عندما تعمل مع معقد border-radius
. على سبيل المثال ، إذا كنت تريد تطبيق نصف قطر مختلف على كل زاوية ، فيجب عليك تحديد متغير لكل جانب. أعتقد أنه ليس عيبًا حقًا ، ولكنه قد يجعل الحفاظ على شفرتك أكثر صعوبة.
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
المولد عبر الإنترنت لا تأخذ في الاعتبار سوى نصف قطر منتظم من أجل البساطة ، لكنك تعرف الآن كيفية تعديل الكود إذا كنت تريد التفكير في تكوين نصف قطر معقد.
اختتام
لقد وصلنا إلى النهاية! السحر وراء الظلال المتدرجة لم يعد لغزا. حاولت تغطية كل الاحتمالات وأي مشاكل محتملة قد تواجهها. إذا فاتني شيء ما أو اكتشفت أي مشكلة ، فلا تتردد في الإبلاغ عنها في قسم التعليقات ، وسأقوم بمراجعتها.
مرة أخرى ، من المحتمل أن يكون الكثير من هذا مبالغة بالنظر إلى أن الحل الفعلي سيغطي معظم حالات الاستخدام الخاصة بك. ومع ذلك ، من الجيد معرفة "لماذا" و "كيف" وراء الخدعة ، وكيفية التغلب على قيودها. بالإضافة إلى ذلك ، حصلنا على تمرين جيد في اللعب باستخدام قص وإخفاء CSS.
وبالطبع لديك المولد عبر الإنترنت يمكنك الوصول إليها في أي وقت تريد فيه تجنب المتاعب.
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- ماهرون
- من نحن
- حوله
- فوق
- مطلق
- وفقا
- حسابي
- الحسابات
- دقيق
- في الواقع
- إضافي
- بعد
- خوارزمية
- الكل
- يسمح
- سابقا
- دائما
- آنا
- و
- آخر
- في أى مكان
- تطبيقي
- التقديم
- تطبيق
- المنطقة
- حول
- البند
- تجنب
- خلفية
- في الأساس
- لان
- قبل
- وراء
- اعتقد
- أقل من
- كبير
- أكبر
- قطعة
- اسود
- المدونة
- الأزرق
- شىء ضبابي
- الحدود
- ممل
- صندوق
- استراحة
- علة
- حساب
- لا تستطيع
- حقيبة
- الحالات
- تحدى
- التحقق
- كلاسيكي
- مسار مقطع
- عن كثب
- الكود
- اللون
- مجموعة
- آت
- التعليق
- مشترك
- إكمال
- مجمع
- مفهوم
- الاعداد
- صراع
- نظر
- النظر
- وتعتبر
- محتوى
- سياق الكلام
- مراقبة
- زاوية
- زوايا
- استطاع
- الدورة
- بهيكل
- ويغطي
- خلق
- يخلق
- CSS
- الخدع المغلق
- على
- قطع
- تخفيضات
- صفقة
- تعامل
- قررت
- تخفيض
- الترتيب
- تعريف
- يعرف
- تحديد
- قطعا
- تجربة
- يعتمد
- فعل
- فرق
- مختلف
- اتجاه
- اكتشف
- مسافة
- لا
- فعل
- لا
- عيوب
- كل
- في وقت سابق
- بسهولة
- تأثير
- إما
- في مكان آخر
- كاف
- ضمان
- خاصة
- الأثير (ETH)
- حتى
- كل شىء
- مثال
- أمثلة
- استبعاد
- ممارسة
- متوقع
- تفسير
- اكتشف
- استكشاف
- خارجي
- احتفل على
- الوجه
- الواقع
- بإنصاف
- المفضلة—الحقيبة
- الميزات
- قليل
- الشكل
- تصفية
- العثور على
- الاسم الأول
- حل
- ثابت
- اتباع
- القوة
- مجانًا
- تبدأ من
- العلاجات العامة
- ولدت
- دولار فقط واحصل على خصم XNUMX% على جميع
- منح
- Go
- الذهاب
- خير
- التدرجات
- أخضر
- يحدث
- مساعدة
- هنا
- إخفاء
- كيفية
- كيفية
- HTML
- HTTPS
- سوف
- فكرة
- أهمية
- in
- القيمة الاسمية
- بدلًا من ذلك
- تقديم
- دعا
- قضية
- مسائل
- IT
- احتفظ
- حفظ
- علم
- اسم العائلة
- طبقات
- تعلم
- على الأرجح
- القيود
- حدود
- القليل
- طويل
- يعد
- بحث
- بدا
- تبدو
- الكثير
- سحر
- الرئيسية
- المحافظة
- أغلبية
- جعل
- قناع
- يعني
- طريقة
- ربما
- تعديل
- لحظة
- الأكثر من ذلك
- أكثر
- خطوة
- يتحرك
- موزيلا
- سر
- حاجة
- سلبي
- مع ذلك
- جديد
- التالي
- عوض
- ONE
- online
- مقابل
- الأمثل
- مزيد من الخيارات
- برتقال
- طلب
- أخرى
- أخرى
- وإلا
- الخطوط العريضة
- في الخارج
- تغلب
- المعلمات
- جزء
- خاص
- مسار
- نمط
- ربما
- اختيار
- المكان
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- لعب
- من فضلك
- المزيد
- نقاط
- المضلع
- ان يرتفع المركز
- إمكانيات
- ممكن
- منشور
- محتمل
- جميل
- سابق
- المحتمل
- الملكية
- دفع
- وضع
- سؤال
- الوصول
- التي تم الوصول إليها
- عرض
- واقع
- سبب
- نوصي
- أحمر
- تخفيض
- ذات صلة
- نسبيا
- اعتمد
- تذكر
- إزالة
- متكرر
- تقرير
- نتيجة
- كشف
- طريق
- قاعدة
- قال
- صالح
- نفسه
- القسم
- شادو
- مشاركة
- ينبغي
- إظهار
- مماثل
- الاشارات
- بساطة
- منذ
- صغير
- So
- الصلبة
- حل
- بعض
- شيء
- في مكان ما
- الفضاء
- محدد
- انتشار
- كومة
- التراص
- بداية
- بدأت
- يبدأ
- إقامة
- خطوة
- لا يزال
- قصتنا
- مناسب
- الدعم
- الدعم
- مفاجأة
- أخذ
- المستهدفة
- مهمة
- •
- المنطقة
- شيء
- الأشياء
- اعتقد
- إلى
- سويا
- جدا
- موضوع
- الإجمالي
- تواصل
- تحول
- ترجمه
- خدمات ترجمة
- الشفافية
- شفاف
- حيل
- صحيح
- نموذجي
- فهم
- تحديث
- تحديث
- us
- تستخدم
- قيمنا
- القيم
- مرئي
- طرق
- ابحث عن
- ما هي تفاصيل
- التي
- في حين
- سوف
- بدون
- للعمل
- عامل
- أعمال
- قيمة
- X
- حل متجر العقارات الشامل الخاص بك في جورجيا
- مؤشر z
- زفيرنت
- صفر