تأثير الاضائة على النصوص



السلام عليكم ورحمة
الله وبركاته


 نعود لكم بتدوينة جديدة نقدم لكم فيها تأثير
جد احترافي عبارة كود css يضفي اضاءة على
الحروف أو النصوص





طريقة التركيب:

    1. توجه الى التخطيط ثم اضف اداة html/javascript (بالسايد بار)
    2. ضع كود التالي داخل الاداة


      <style>
      .neon {
        font-family: 'toyor-aljanah';
        color: #FB4264;
        font-size: 15vw;
        line-height: 16vw;
        text-shadow: 0 0 3vw #F40A35;
      }
      
      .flux {
        font-family: neon;
        color: #426DFB;
        font-size: 9vw;
        line-height: 9vw;
        text-shadow: 0 0 3vw #2356FF;
      }
      
      .neon {
        animation: neon 1s ease infinite;
        -moz-animation: neon 1s ease infinite;
        -webkit-animation: neon 1s ease infinite;
      }
      
      @keyframes neon {
        0%,
        100% {
          text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
          color: #FED128;
        }
        50% {
          text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
          color: #806914;
        }
      }
      
      .flux {
        animation: flux 2s linear infinite;
        -moz-animation: flux 2s linear infinite;
        -webkit-animation: flux 2s linear infinite;
        -o-animation: flux 2s linear infinite;
      }
      
      @keyframes flux {
        0%,
        100% {
          text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
          color: #28D7FE;
        }
        50% {
          text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
          color: #146C80;
        }
      }
      
      </style>
      <div class="neon">عصام </div>
        <div class="flux">WEEB </div>


        1. ثم قم بتغيير ما يلي                                                 
        2. عصام WEEB بما يناسبك
        3. كما يمكنك اضافة التأثير على أي نص بمدونتك فقط بالتعديل على أكواد CSS


        1. اذا واجهت اي مشكلة ضعها بتعليق


      هناك تعليق واحد


      EmoticonEmoticon