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

كيفية كتابة أسم موقعك بطريقة النيون في الفوتر 

طريقة جديدة لعمل اسم موقعك بطريقة NEON وبدون أي اضافات جافا سكربت 
Neon Text

كيفية كتابة اسم موقعك بتأثير NEON

السلام عليكم متابعينا اليوم اضافة بسيطة وتعطي شكل رائع للموقع وهي كتابة اسم موقعك بطريقة النيون وهذه الطريقة لن تؤثر علي  سرعة الموقع لانها خالية من أي اكواد تبطئ الموقع مثل الجافا فقط CSS & HTML 


شرح وضع الاضافة 

كل ماعليك هو الذهاب الي التخطيط ثم اضافة أداة HTML/JavaScript وضع بها هذا الكود 

<div class="logoa"style="text-align: center;" ><b>A<span>ra</span>b<span>k</span>o</b></div>


<style>
@import url(//fonts.googleapis.com/css?family=Vibur);
html,body{
  height:100%
}
body {

  background-size:cover;
  margin:0
}
.logoa a {
  text-align: center;
  width: 65%;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   user-select: none;
}

.logoa b{
  font: 400 19vh "Vibur";
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
.logoa b span{
  animation: blink linear infinite 2s;
}
.logoa b span:nth-of-type(2){
  animation: blink linear infinite 3s;
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #333;
  }
  80% {
   
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

</style>

الحروف الملونة باللون الأحمر هي حروف كلمة ARABKO قم بتبديلها باسم موقعك بالحروف وقم بحفظ الأداة وستعمل معك بدون أي مشاكل ،
وانتهي موضوع اليوم لاتنسي زيارة قسم لغات البرمجة  لمزيد من الشروحات  اذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع

ارسال تعليق

أحدث أقدم