14 تأثير على النصوص لمدونتك او موقعك

بسم الله الرحمان الرحيم

اما بعد متتبعي ومتتبعات مدونة حاسوبي Astuce

في درس جديد حول طريقة عما 14 تاثير على النصوص لتزيين موقعك او مدونتك

نبدأ على بركة الله
الاكواد توضع في الوسم التالي
<style>
هنا ضع الكود
</style>
ولاستدعائها ما عليك سوى اضافة الوسم التالي الى النص
<div class="effect" >My Title</div>
حيث effect هو اسم التاثير الذي ستجده تحت كل كود في الاسفل

التاثير الاول

Simple Shadow

الكود

.hassoubi_simpleshadow {
color:#fff;
background-color:#ece9e9;
text-shadow:#474747 3px 5px 2px;
}  

اسم التاثير في الكود:hassoubi_simpleshadow

التاثير الثاني

inset

الكود

.hassoubi_inset {
color:#616161;
background-color:#bababa;
text-shadow:#e0e0e0 1px 1px 0;
}  

اسم التاثير في الكود: hassoubi_inset

التاثير الثالث

Retro

الكود

.hassoubi_retro {
color:#fff;
background-color:#b8b8b8;
text-shadow:#7a7a7a 4px 3px 0;
}  

اسم التاثير في الكود:hassoubi_retro  

التاثير الرابع

Blur

الكود

.hassoubi_blur {
color:rgba(255,255,255,.3);
background-color:#1a1a1a;
text-shadow:rgba(255,255,255,.5) 0 0 15px, rgba(255,255,255,.5) 0 0 10px;
}  

اسم التاثير في الكود:hassoubi_blur  

التاثير الخامس

Glow

الكود

.hassoubi_glow {
color:#fff;
background-color:#474747;
text-shadow:#fff 0 0 10px;
}  

اسم التاثير في الكود:hassoubi_glow  

التاثير السادس

Neon

الكود

.hassoubi_neon {
color:#fff;
background-color:#232323;
text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18
} 

اسم التاثير في الكود:hassoubi_neon  

التاثير السابع

Fire

الكود

.hassoubi_fire {
color:#fff;
background-color:#333;
text-shadow:#fff 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
}  

اسم التاثير في الكود: hassoubi_fire 

التاثير الثامن

Simple Emboss

الكود

.hassoubi_semboss {
color:rgba(0,0,0,.6);
background-color:#6e6e6e;
text-shadow:rgba(255,255,255,.2) 3px 2px 3px;
}  

اسم التاثير في الكود:hassoubi_semboss  

التاثير التاسع

Realistic Emboss

الكود

.hassoubi_remboss {
color:rgba(0,0,0,.6);
background-color:#dadada;
text-shadow:rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px;
}  

اسم التاثير في الكود: hassoubi_remboss 

التاثير العاشر

Artistic Emboss

الكود

.hassoubi_aemboss {
color:#d9d9d9;
background-color:#e8e8e8; text-shadow:rgba(255,255,255,.1) -1px -1px 1px,rgba(0,0,0,.5) 1px 1px 1px;
} 

اسم التاثير في الكود:hassoubi_aemboss  

التاثير الحادي عشر

Simple  3D

الكود

.hassoubi_s3d {
color:#fff;
background-color:#ffffff;
text-shadow:#969696 1px 3px 0, #aba8a8 1px 13px 5px;
} 

اسم التاثير في الكود:hassoubi_s3d  

التاثير اثنا عشر

Realistic 3D

الكود

.hassoubi_r3d {
color:#fff;
background-color:#696969;
text-shadow:#ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;
} 

اسم التاثير في الكود: hassoubi_r3d 

التاثير ثلاثة عشر

Bold and Sharp

الكود

.hassoubi_boldsharp {
color:#d9d9d9;
background-color:#bababa;
text-shadow:#2e2e2e 0 4px 5px;
} 

اسم التاثير في الكود: hassoubi_boldsharp 

التاثير رابع عشر

Classic Movie

الكود

.hassoubi_classicmovies {
color:#000000;
background-color:#ffffff;
text-shadow:2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
} 

اسم التاثير في الكود: hassoubi_classicmovies

• غرّد
• شارك
• شارك
• شارك
• شارك