CSS مليء بالخيارات لتحسين مظهر مواقع الويب الخاصة بك ؛ تعتبر ظلال النص والمربع أمثلة رئيسية. أنها توفر نتائج مماثلة للظلال الموجودة في برامج تحرير الصور مثل Photoshop.
لكن كيف تعمل ظلال CSS؟ دعونا نتعمق في الأمر.
كيفية استخدام CSS Box Shadow
يمكنك تطبيق ظل مربع CSS بسطر واحد من CSS يحتوي على نطاق يصل إلى ست قيم. يعد ترتيب القيم أمرًا بالغ الأهمية لكي يعمل ظل مربع CSS الخاص بك ، ويبدو كالتالي:
مربع الظل: offset-x offset-y blur spread color inset ؛دعنا نلقي نظرة على كل من القيم بالترتيب.
CSS Box Shadow Position
تتحكم قيمتا offset-x و offset-y في موضع ظل الصندوق. تمثل قيمة offset-x الوضع الأفقي للظل ، بينما تمثل offset-y الإزاحة الرأسية.
ظل الصندوق: 10 بكسل 10 بكسل ؛القيم الموجبة ينتج عنها ظل أسفل ويمين العنصر.
يمكنك أيضًا استخدام القيم السالبة لـ h-offset و v-offset:
ظل الصندوق: -10 بكسل -10 بكسل ؛يحرك الإزاحة السالبة الظل إلى اليسار ، بينما يحركه الإزاحة السالبة للأعلى:
CSS Box Shadow Blur
كما ترى ، فإن إضافة h-offset و v-offset إلى ظلك يخلق ظلًا خالصًا بدون أي تدرج. تعمل قيمة التمويه على تعتيم ظل مربع CSS الخاص بك وتصبح نافذة المفعول إذا قدمت قيمة ثالثة:
مربع الظل: 10 بكسل 10 بكسل 20 بكسل ؛كلما زاد الرقم الذي تضيفه إلى قيمة التمويه ، كلما كان ظل مربع CSS أكثر تشويشًا. لا يمكن أن تكون هذه القيمة سالبة.
انتشار ظل مربع CSS
تسمح لك قيمة الانتشار بتغيير حجم ظلك دون تغيير موضعه.
مربع الظل: 10 بكسل 10 بكسل 20 بكسل 30 بكسل ؛قيمة الانتشار الموجبة ستجعل ظل مربع CSS أكبر ، بينما القيمة السالبة ستجعله أصغر.
لون ظل مربع CSS
تكون ظلال مربع CSS افتراضيًا على لون نص العنصر ، ولكن يمكنك تجاوز ذلك عن طريق إضافة لون:
ظل الصندوق: 10مقصف 10مقصف 20مقصف 10مقصف # 0000ff ؛يجب أن يكون اللون الذي تستخدمه بتنسيق ألوان CSS قانوني ، مثل رمز سداسي عشري أو رمز RGB أو لون محدد مسبقًا. أنت تستطيع تعرف على الأكواد السداسية وخيارات ألوان CSS القانونية الأخرى قبل أن تبدأ بظلالك.
CSS Box Shadow Inset
ظلال مربع CSS افتراضيًا للسقوط خارج العنصر المخصص لها. بإضافة عنصر داخلي إلى خاصية box-shadow ، يمكنك عرض الظل داخل العنصر.
ظل الصندوق: 10مقصف 10مقصف 20مقصف 10مقصف # 0000ff أقحم ؛هذه قيمة نصية محددة مسبقًا ؛ ببساطة قم بإضافته أو إزالته لتعيين القيمة.
كيفية استخدام CSS Text Shadow
ظلال نص CSS مثل ظلال المربع ، على الرغم من أنها تحتوي على عدد أقل من القيم لتعديلها. تبدو صيغة ظل نص CSS كما يلي:
ظل النص: offset-x offset-y blur-radius ؛لكن كيف تعمل هذه القيم؟
موضع ظل نص CSS
تعمل إزاحات ظل نص CSS بشكل مشابه جدًا لقيم ظل المربع نفسها:
ظل النص: 10 بكسل 10 بكسل ؛القيم الموجبة ستضع الظل أسفل النص ويمينه.
تقوم القيم السالبة بالعكس ، حيث تضع الظل أعلى النص ويساره.
ظل النص: -10 بكسل -10 بكسل ؛يمكنك مزج القيم السالبة والموجبة لوضع ظل نص CSS الخاص بك بشكل مثالي.
CSS Text Shadow Blur Radius
يتيح لك نصف قطر ظل نص CSS طمس الظل خلف النص.
ظل النص: 10 بكسل 10 بكسل 10 بكسل ؛ القيمة الافتراضية لهذه القيمة هي 0 (بدون تمويه).
لون ظل نص CSS
بشكل افتراضي ، تتطابق ظلال نص CSS مع لون النص. يمكنك تغيير لون النص الخاص بك عن طريق إضافته إلى نهاية خاصية ظل النص CSS.
ظل النص: 10مقصف 10مقصف 10مقصف # 0000ff ؛مثل ألوان ظل مربع CSS ، يجب عليك استخدام لون CSS قانوني لهذا الغرض.
أمثلة على مربع CSS وتصميم ظل النص
يمكنك البدء في تجربة استخدامك لمربع CSS وظلال النص بمجرد فهم الأساسيات. يجب أن تلهمك الأفكار أدناه للتوصل إلى طرق إبداعية خاصة بك لاستخدام خصائص CSS هذه.
حدود ثنائية اللون مع ظللين مربعين CSS
يمكنك إضافة أكثر من مربع ظل أو ظل نص إلى عنصر HTML. طالما كانت هناك فواصل بينهما ، يمكنك إضافة ظلال جديدة إلى خاصية واحدة.
مربع الظل: 30مقصف 30مقصف# 0000ff, -30 بكسل-30 بكسل 0مقصف# 00ff00;هذه الحدود ثنائية اللون هي مثال جيد على ذلك. اثنين من ظلال مربع CSS مع مواضع متعارضة مع عدم وجود تمويه / انتشار ينتج عنه حد إبداعي ممتاز.
ظلال نص CSS مزدوجة لتأثير درامي
في سياق مشابه للفكرة أعلاه ، يمكنك إضافة العديد من ظلال النص ووضعها للحصول على نتائج مثيرة للاهتمام.
ظل النص: 35px 20px 4px darkgray ، -35px -20px 4px darkgray ؛يُظهر هذا المثال سطرًا من النص بظل أعلاه وظل أدناه ، وكلاهما له قيم ألوان تستند إلى النص.
خلفيات متعددة الألوان مع ظلال مربع CSS داخلية
CSS قوية بما يكفي لإنشاء أصول فريدة ومثيرة للاهتمام بدون أي ملفات خارجية. يعد استخدام ظل مربع CSS الداخلي كخلفية مثالًا رائعًا على ذلك.
ظل الصندوق: 20مقصف 10مقصف 10مقصف 40مقصف # 000000 داخلي ، -50 بكسل -30 بكسل 8 بكسل 60 بكسل أقحم رمادي ، 30 بكسل 20 بكسل 6 بكسل 90 بكسل lightgray أقحم ؛يحتوي هذا الصندوق على خلفية بيضاء ، إلى جانب ثلاثة ظلال داخلية بألوان مختلفة. تتداخل الظلال مع بعضها البعض لإنشاء خلفية فريدة.
تعزيز هذا التأثير أكثر هو مسألة بسيطة مضيفًا تدرجًا أنيقًا لخلفية CSS إلى عنصرك.
ظلال مربع CSS وظلال النص لتصميم الويب الإبداعي
من السهل استخدام مربع CSS وظلال النص بمجرد معرفة كيفية العمل معهم. لديك الآن الأدوات التي تحتاجها لبدء العمل على تصميماتك الخاصة ، ولكن يجب عليك مواصلة البحث عن CSS لتحسين مهاراتك.