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

السلام عليكم ورحمة

الله وبركاته

 نعود لكم بتدوينة جديدة نقدم لكم فيها تأثير

جد احترافي عبارة كود 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. اذا واجهت اي مشكلة ضعها بتعليق