مؤثرات نصية رائعة باستخدام HTML و CSS

إذا كنت تريد أن تبرز مدونتك أو موقعك الإلكتروني بين المنافسين، فإن كيفية تقديم المحتوى هي كل شيء، ربما ستحتاج أكثر من مجرد النصوص والألوان.

إعتمادا على لغة CSS، يمكنك إنشاء بعض التأثيرات الرائعة على النصوص، وذلك لجعل موقعك جذابا، الشيء الذي يجعل الزوار لا يملون ويرغبون في مواصلة القراءة.

في بعض الأحيان قد تحتاج بعض الأسطر من JavaScript. لكن في هذا المنشور، قمت بانتقاء بعض من أفضل المؤثرات باستخدام لغة CSS فقط، والتي يمكنك استخدامها بسهولة على موقعك.

تنويه: إذا أعجبك أحد هذه المؤثرات النصية ورغبت في استخدامه على موقعك، فيمكنك نسخ الأكواد والتعديل عليها باستخدام الأداة المباشرة لتحرير التعليمات البرمجية الخاصة بنا.

أمثلة لمؤثرات نصية

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@800&family=Roboto+Mono:wght@700&display=swap');
  
body {
    direction: rtl;
    margin: auto;
    width: 100%;
    height: 21rem;
    display: block;
    font-family: 'changa';
    background: #2d2e2f;
}
}
.container {
    width: auto;
    height: auto;
}
.n-glow {
    text-align: center;
}
h1 {
    display: flex;
    width: max-content;
  	margin: auto;
    padding: 25% 0;
}
.n-glow em {
  font-style: initial;
  font-size: 150%;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}
.n-glow span {
  font-family: 'Roboto Mono';
  font-size: 150%;
  -webkit-animation: glowing 2s ease-in-out infinite alternate;
  -moz-animation: glowing 2s ease-in-out infinite alternate;
  animation: glowing 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
     from {
      color: white;
    text-shadow: 0 0 5px #e7ff00, 0 0 10px #ff0081, 0 0 15px #ff0081, 0 0 20px #ff0081, 0 0 25px #ff0081, 0 0 30px #ff0081, 0 0 35px #ff0081, 0 0 40px #ff0081,0 0 45px #ff0081;
  }
  
  to {
     color: #2d2e2f;
    text-shadow: 0 0 10px #e7ff00, 0 0 15px #ff0081, 0 0 20px #ff0081, 0 0 25px #ff0081, 0 0 30px #ff0081, 0 0 35px #ff0081, 0 0 40px #ff0081, 0 1 45px #ff0081;
  }
}
@-webkit-keyframes glowing {
     from {
      color: white;
    text-shadow: 0 0 5px #4A01F4, 0 0 10px #4A01F4, 0 0 15px #4A01F4, 0 0 20px #4A01F4, 0 0 25px #4A01F4,0 0 30px #ff0081, 0 0 35px #4A01F4, 0 0 40px #4A01F4, 0 0 45px #4A01F4;
  }
  
  to {
     color: #2d2e2f;
    text-shadow: 0 0 10px #4A01F4, 0 0 15px #4A01F4, 0 0 20px #4A01F4, 0 0 25px #4A01F4, 0 0 30px #4A01F4, 0 0 35px #4A01F4, 0 0 40px #4A01F4, 0 1 45px #4A01F4;
  }
}

تم إنشاؤه بواسطة صور نت

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
  
body {
  direction:rtl;
  background-color: #000;
}

.night {
  	font-family: "Lalezar";
  	font-size: 6rem;
    font-weight: bolder;
    text-transform: uppercase;
    white-space: pre;
    position: absolute;
    display: flex;
    width: 50%;
    height: 50%;
  	left: 50%;
    top: 50%;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient( ellipse 40% 45% at 50% 50%, #244c52, transparent );
    transform: translate(-50%, -50%);
    color: transparent;
    text-shadow: 0 0 10px transparent, 0 0 24px #8cedfc, -3px 1.5px 16px #8cedfc, 3px 1.5px 16px #8cedfc, 0 -8px 32px #0cdbfc, 0 8px 48px #0cdbfc;
    animation: shine 2s forwards, flicker 3s infinite;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #f2f2f2;
}
span.speed-flash {
	font-family: ui-monospace;
    font-weight: bolder;}
@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: transparent;
    text-shadow: 0 0 10px transparent, 0 0 24px #8cedfc,
      -3px 1.5px 16px #8cedfc, 3px 1.5px 16px #8cedfc,
      0 -8px 32px #0cdbfc, 0 8px 48px #0cdbfc;
  }
  28%,
  33% {
    color: #8cedfc;
    text-shadow: none;
  }
  82%,
  97% {
    color: #0cdbfc;
    text-shadow: none;
  }
}

.flash {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.speed-flash {
  animation: shine 5s forwards, blink 2s 1s infinite;
}
  
@keyframes shine {
  0% {
    color: #244c52;
    text-shadow: none;
  }
  100% {
    color: transparent;
    text-shadow: 0 0 10px transparent, 0 0 24px #8cedfc,
      -3px 1.5px 16px #8cedfc, 3px 1.5px 16px #8cedfc,
      0 -8px 32px #0cdbfc, 0 8px 48px #0cdbfc;
  }
}

@keyframes flash {
  from {
    opacity: 0.9;
  }

4% {
    opacity: 0.81;
  }

6% {
    opacity: 0.765;
  }

8% {
    opacity: 0.855;
  }

10% {
    opacity: 0.81;
  }

11% {
    opacity: 0.830;
  }

12% {
    opacity: 0.81;
  }

14% {
    opacity: 0.855;
  }

16% {
    opacity: 0.882;
  }

17% {
    opacity: 0.81;
  }

19% {
    opacity: 0.84;
  }

20% {
    opacity: 0.890;
  }

24% {
    opacity: 0.9;
  }

26% {
    opacity: 0.845;
  }

28% {
    opacity: 0.882;
  }

37% {
    opacity: 0.84;
  }

38% {
    opacity: 0.45;
  }

39% {
    opacity: 0.864;
  }

42% {
    opacity: 0.9;
  }

44% {
    opacity: 0.873;
  }

46% {
    opacity: 0.845;
  }

56% {
    opacity: 0.81;
  }

58% {
    opacity: 0.81;
  }

60% {
    opacity: 0.9;
  }

68% {
    opacity: 0.9;
  }

70% {
    opacity: 0.81;
  }

72% {
    opacity: 0.855;
  }

93% {
    opacity: 0.84;
  }

95% {
    opacity: 0.855;
  }

97% {
    opacity: 0.84;
  }

to {
    opacity: 0.9;
  }
}

تم إنشاؤه بواسطة صور نت

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Harmattan:wght@700&family=Rakkas&display=swap');
  
body {
  margin: 0;
  padding: 0;
  direction: rtl;
}

.container {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.box {
  width: 50%;
  height: auto;
  position: relative;
  margin: 25% auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.title {
  width: 15rem;
  position: relative;
  display: flex;
  align-items: center;
  height: 5rem;
}
.block {
  width: 0%;
  height: inherit;
  background: #0d5287;
  position: absolute;
  animation: mainBlock 1.5s cubic-bezier(.74, .06, .4, .92) forwards;
  display: flex;
}

h1 {
  font-family: 'Rakkas';
  color: #0d5287;
  font-size:5rem;
  -webkit-animation: mainFadeIn 1.5s forwards;
  -o-animation: mainFadeIn 1.5s forwards;
  animation: mainFadeIn 1.5s forwards;
  animation-delay: 1.3s;
  opacity: 0;
  display: flex;
  align-items: baseline;
  position: relative;
 }
.container h1 span {
  width:0;
  height:0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #ee1c1c;
  -webkit-animation: load 0.6s cubic-bezier(.74, .06, .4, .92) forwards;
  animation: popIn 1.5s cubic-bezier(.74, .06, .4, .92) forwards;
  animation-delay: 2s;
  margin-right: 5px;
  margin-top: -10px;
  position: absolute;
  bottom: 13px;
  left: -12px;
}
.sub-title {
  width: 15rem;
  position: relative;
  display: flex;
  align-items: center;
  height: 2rem;
  margin-top:0;
}
.desc {
  width: 0%;
  height: inherit;
  background: #7f7f7f;
  position: absolute;
  animation: secBlock 1.5s cubic-bezier(.74, .06, .4, .92) forwards;
  animation-delay: 1.3s;
  display: flex;
}
.container p {
  animation: secFadeIn 1.5s forwards;
  animation-delay: 2.4s;
  opacity: 0;
  font-weight: 400;
  font-family: 'Harmattan';
  color: #000;
  font-size: 1.5rem;
  text-transform: uppercase;
}

@keyframes mainBlock {
  0% {
    width: 0%;
    right: 0;

}
  50% {
    width: 100%;
    right: 0;

}
  100% {
    width: 0;
    right: 100%;
  }
}

@keyframes secBlock {
  0% {
    width: 0%;
    right: 0;

}
  50% {
    width: 100%;
    right: 0;

}
  100% {
    width: 0;
    right: 100%;
  }
}

@keyframes mainFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    width: 0px;
    height: 0px;
    background: #ee1c1c;
    border: 0px solid #ddd;
    opacity: 0;
  }
  50% {
    width: 13px;
    height: 13px;
    background: #ee1c1c;
    opacity: 1;
    bottom: 40px;
  }
   65% {
      width: 10px;
    height: 10px;
      bottom: 0px;
      width: 15px
   }
   80% {
      width: 13px;
    height: 13px;
      bottom: 20px
   }
  100% {
    width: 10px;
    height: 10px;
    background: #ee1c1c;
    border: 0px solid #222;
    bottom: 73px;
    left: 17px;

}
}

@keyframes secFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
  
@keyframes top {
  0% {
    opacity: 0;
     bottom: -80px
  }
  100% {
    opacity: 1;
     bottom: 0px

}
}

@keyframes icon {
  0% {
    opacity: 0;
     transform: scale(0.0);
  }
   50% {
      opacity: 1;
     transform: scale(1.3) rotate(-02deg);
   }
  100% {
    opacity: 1;
     bottom: 0px;
  }
}

تم إنشاؤه بواسطة صور نت

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Tajawal:wght@500&display=swap');
  
body{
  direction:rtl;
  background: white;
}
.animated-title {
  height: 85vh;
  width: 85vh;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.animation-top{
  color: #ff6400;
  font-family: 'Lalezar';
  font-size: 5.75rem;
}
.animation-bottom{
  font-family: 'Tajawal';
  font-size: 1.75rem;
  color: #000;
}
.animated-title > div {
  height: 50%;
  overflow: hidden;
  position: absolute;
  width: 19rem;
}
.animated-title > div div {
  padding: 2vh 0;
  position: absolute;
}
.animated-title > div div span {
  display: inline-flex;
}
.animated-title > div.animation-top {
  top: 0;
  border-bottom: 0.4rem solid #000;
}
.animated-title > div.animation-top div {
  animation: showTopText 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  bottom: -20px;
  transform: translate(0, 100%);
}
.animated-title > div.text-top div span:first-child {
  color: #767676;
}
.animated-title > div.animation-bottom {
  bottom: 0;
}
.animated-title > div.animation-bottom div {
  animation: showBottomText 0.5s;
  animation-delay: 1.75s;
  animation-fill-mode: forwards;
  top: 0;
  transform: translate(0, -100%);
}
  
@keyframes showTopText {
  0% { transform: translate3d(0, 100%, 0); }
  40%, 60% { transform: translate3d(0, 50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes showBottomText {
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

تم إنشاؤه بواسطة صور نت

HTML

CSS

تم إنشاؤه بواسطة صور نت

محمد أيت بريك

أنا محمد، مالك مدونة صور نت للمعلوميات والرقمنة، أمتلك خبرة واسعة في تحسين محركات البحث (السيو)، ومهتم بشكل خاص بمجالات التسويق الرقمي والتكنولوجيا المالية الرقمية.