random
أخبار ساخنة

شرح CSS text shadow اضافة ظل للنص وتكرار الظلال والتأثيرات الضوئية

Samouel Ghaly
الصفحة الرئيسية

دَلِيلُ مُحْتَرِفِي CSS لِإِتْقَانِ ظِلِّ النُّصُوصِ Text Shadow

إِضَافَةُ العُمْقِ البَصَرِيِّ إِلَى النُّصُوصِ هِيَ إِحْدَى الأَسَالِيبِ الفَنِّيَّةِ الَّتِي تَنْقُلُ وَاجِهَةَ المَوْقِعِ مِنْ مَظْهَرٍ مُسَطَّحٍ تَقْلِيدِيٍّ إِلَى تَصْمِيمٍ سِينِمَائِيٍّ ثُلَاثِيِّ الأَبْعَادِ. فِي لُغَةِ CSS، تُعْتَبَرُ خَاصِّيَّةُ text-shadow الأَدَاةَ السِّحْرِيَّةَ لِتَحْقِيقِ ذَلِكَ؛ حَيْثُ لَا تَقْتَصِرُ وَظِيفَتُهَا عَلَى صُنْعِ ظِلٍّ نَاعِمٍ خَلْفَ الكَلِمَاتِ فَحَسْبُ، بَلْ تَمْتَدُّ لِتُمَكِّنَنَا مِنْ تِكْرَارِ الظِّلَالِ لِصُنْعِ نُصُوصٍ ثُلَاثِيَّةِ الأَبْعَادِ، أَوْ إِضَافَةِ تَأْثِيرَاتِ الإِضَاءَةِ وَالتَّوَهُّجِ (Neon Effects).

سَنَقُومُ فِي هَذَا الدَّلِيلِ بِتَفْكِيكِ شِفْرَةِ هَذِهِ الخَاصِّيَّةِ، وَمَعْرِفَةِ مَعَايِيرِهَا الرَّقَمِيَّةِ، مَعَ شَرْحٍ دَقِيقٍ لِكَيْفِيَّةِ دَمْجِ ظِلَالٍ مُتَعَدِّدَةٍ لِصُنْعِ لَوْحَاتٍ فَنِّيَّةٍ نَصِّيَّةٍ مُبْهِرَةٍ.

1. البِنْيَةُ الأَسَاسِيَّةُ لِخَاصِّيَّةِ text-shadow

تَقْبَلُ خَاصِّيَّةُ ظِلِّ النَّصِّ أَرْبَعَ قِيَمٍ رَئِيسِيَّةٍ تُكْتَبُ بِالتَّرْتِيبِ التَّالِي: 

text-shadow: [h-shadow] [v-shadow] [blur-radius] [color];

شَرْحُ القِيَمِ بِالتَّفْصِيلِ:

  • h-shadow (الظِّلُّ الأُفُقِيُّ): تُحَدِّدُ مَوْقِعَ الظِّلِّ يَمِينًا أَوْ يَسَارًا. القِيمَةُ المُوجَبَةُ تُزِيحُ الظِّلَّ إِلَى اليَمِينِ، وَالقِيمَةُ السَّالِبَةُ تُزِيحُهُ إِلَى اليَسَارِ.
  • v-shadow (الظِّلُّ الرَّأْسِيُّ): تُحَدِّدُ مَوْقِعَ الظِّلِّ لِلأَعْلَى أَوْ الأَسْفَلِ. القِيمَةُ المُوجَبَةُ تَدْفَعُ الظِّلَّ لِلأَسْفَلِ، وَالسَّالِبَةُ تَرْفَعُهُ لِلأَعْلَى.
  • blur-radius (نِصْفُ قُطْرِ الضَّبَابِيَّةِ): قِيمَةٌ اِخْتِيَارِيَّةٌ تُحَدِّدُ مَدَى نُعُومَةِ الظِّلِّ أَوْ تَمَوُّجِهِ. كُلَّمَا زَادَتْ هَذِهِ القِيمَةُ (مِثْلَ 10px)، أَصْبَحَ الظِّلُّ أَكْثَرَ تَشَتُّتًا وَنُعُومَةً، وَإِذَا كَانَتْ 0 يَكُونُ الظِّلُّ حَادًّا كَأَنَّهُ نُسْخَةٌ أُخْرَى مِنَ النَّصِّ.
  • color (لَوْنُ الظِّلِّ): تُحَدِّدُ لَوْنَ الظِّلِّ، وَيُفَضَّلُ دَائِمًا اسْتِخْدَامُ صِيغَةِ rgba لِتَحْدِيدِ دَرَجَةِ شَفَافِيَّةِ الظِّلِّ لِيَبْدُو واقِعِيًّا.

مِثَالٌ بَسِيطٌ:

h2.sub-title {
    /* إِزَاحَة 2 بكسل يَمِين، 2 بكسل أَسْفَل، ضَبَابِيَّة 4 بكسل، لَوْن أَسْوَد شَفَّاف */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

2. سِرُّ تِكْرَارِ الظِّلَالِ (Multiple Shadows)

مِنْ أَقْوَى مِيزَاتِ text-shadow هِيَ إِمْكَانِيَّةُ إِضَافَةِ أَكْثَرَ مِنْ ظِلٍّ وَاحِدٍ عَلَى نَفْسِ النَّصِّ. يَتِمُّ ذَلِكَ بِبَسَاطَةٍ عَنْ طَرِيقِ كِتَابَةِ مَجْمُوعَةِ الظِّلَالِ وَالفَصْلِ بَيْنَهَا بِوَاسِطَةِ عَلَامَةِ الفَاصِلَةِ (,). يَقُومُ المُتَصَفِّحُ بِرَسْمِ الظِّلِّ الأَوَّلِ فِي الأَعْلَى، ثُمَّ الَّذِي يَلِيهِ تَحْتَهُ، وَهَكَذَا.

تَقْنِيَّةُ النَّصِّ ثُلَاثِيِّ الأَبْعَادِ (3D Text Effect):

لِصُنْعِ نَصٍّ يَبْدُو بَارِزًا مِنَ الشَّاشَةِ، نَقُومُ بِإِضَافَةِ ظِلَالٍ مُتَعَدِّدَةٍ بِإِزَاحَاتٍ رَقَمِيَّةٍ تَتَصَاعَدُ تَدْرِيجِيًّا بِمِقْدَارِ 1 بِكْسِل مَعَ تَغْيِيرِ دَرَجَةِ اللَّوْنِ لِإِعْطَاءِ عُمْقٍ طَبِيعِيٍّ.

مِثَالٌ كُودِيٌّ لِلـ 3D:

.text-3d-effect {
    color: #ffffff;
    text-shadow: 
        1px 1px 0px #ccc,
        2px 2px 0px #bbb,
        3px 3px 0px #aaa,
        4px 4px 0px #999,
        5px 5px 0px #888,
        6px 6px 1px rgba(0,0,0,0.1),
        0px 0px 5px rgba(0,0,0,0.3);
}

3. التَّأْثِيرَاتُ الضَّوْئِيَّةُ وَالتَّوَهُّجُ (Neon Glow Effects)

إِذَا أَرَدْنَا صُنْعَ نَصٍّ مُشِعٍّ أَوْ مُتَوَهِّجٍ مِثْلَ مَصَابِيحِ النِّيُونِ، فَلَنْ نَحْتَاجَ إِلَى إِزَاحَةِ الظِّلِّ أُفُقِيًّا أَوْ رَأْسِيًّا؛ بَلْ نَجْعَلُ الإِزَاحَةَ 0، وَنَعْتَمِدُ الكُلِّيَّةَ عَلَى زِيَادَةِ نِصْفِ قُطْرِ الضَّبَابِيَّةِ (Blur) مَعَ تِكْرَارِ الأَلْوَانِ الزَّاهِيَةِ.

مِثَالٌ كُودِيٌّ لِتَأْثِيرِ النِّيُونِ (التَّوَهُّجِ الأَخْضَرِ):

.neon-glow {
    color: #fff; /* النَّصُّ الأَسَاسِيُّ أَبْيَض */
    text-shadow: 
        0 0 5px #fff,        /* تَوَهُّجٌ دَاخِلِيٌّ خَفِيفٌ */
        0 0 10px #fff,       /* زِيَادَةُ كَثَافَةِ الأَبْيَضِ */
        0 0 20px #2ecc71,    /* بِدَايَةُ انْتِشَارِ اللَّوْنِ الأَخْضَرِ */
        0 0 30px #2ecc71,    /* تَوَسُّعُ نِطَاقِ الإِشْعَاعِ */
        0 0 40px #2ecc71;    /* هَالَةٌ ضَوْئِيَّةٌ خَارِجِيَّةٌ كَبِيرَةٌ */
}

مُعَايَنَةٌ حَيَّةٌ لِلتَّأْثِيرَاتِ (Live Demo)

إِلَيْكَ كَيْفَ تَبْدُو هَذِهِ التَّأْثِيرَاتُ عِنْدَ تَطْبِيقِهَا دَاخِلَ صُنْدُوقٍ ذِي خَلْفِيَّةٍ دَاكِنَةٍ:

تَأْثِيرُ النِّيُونِ المُمَيَّزِ

نَصٌّ ثُلَاثِيُّ الأَبْعَادِ باحْتِرَافِيَّةٍ

💡 نَصِيحَةُ خُبَرَاءِ تَجْرِبَةِ المُسْتَخْدِمِ (UX): رَغْمَ جَاذِبِيَّةِ جَمَالِيَّاتِ text-shadow، اِحْرِصْ دَائِمًا عَلَى أَنْ يَكُونَ هُنَاكَ تَبَايُنٌ عَالٍ (Contrast) بَيْنَ لَوْنِ النَّصِّ وَلَوْنِ الخَلْفِيَّةِ. لَا تَجْعَلِ الظِّلَالِ الكَثِيفَةِ تُعِيقُ قِرَاءَةَ الكَلِمَاتِ، بَلِ اسْتَخْدِمْهَا فَقَطْ فِي العَنَاوِينِ الكَبِيرَةِ والشِّعَارَاتِ (Headings) لِإِبْرَازِهَا، وَتَجَنَّبْ تَمَامًا وَضْعَهَا عَلَى نُصُوصِ المَقَالَاتِ الصَّغِيرَةِ لِأَنَّهَا سَتُسَبِّبُ إِرْهَاقًا لِعَيْنِ القَارِئِ.
google-playkhamsatmostaqltradent