أكواد تأثيرات النصوص بإستخدام CSS أجمل من الفوتوشوب لمدونتك أو موقعك

نقدم لكم مجموعة من أكواد تعطي تأثيرات خاصة على النصوص في مدونتك أو موقعك بإستخدام CSS مجموعة باهرة يمكنك من خلالها تصمصم مدونتك أو موقعك او تجميلها،
هذه التأثيرات متعددة يمكنك التعديل عليها كما يحلوا لك بالنسبة للألوان والحجم ولقد أضفت التفاصيل كاملة اسفل الموضوع
سوف تبدو لك انها صور أو أنها مصممة! لكنها مجرد نص عادي تمت إضافة له خصائص CSS الجميل والخفيف

سوف نقوم بإستعراض أكواد تأثيرات النصوص مع CSS ومعرفه html


نص محفور


مداد الجليد

CSS
.medad {
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}
HTML
<span class='medad'>مداد الجليد</span>


نص مع الظل


مداد الجليد

CSS
.medad2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}
HTML
<span class='medad2'>مداد الجليد</span>


نص مع الظل أكثر شدة


مداد الجليد

CSS
.medad3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 80px;
font-family: 'Sancreek', cursive;
}
HTML
<span class='medad3'>مداد الجليد</span>


نص ثلاثي الابعاد ذو لونين


مداد الجليد

CSS
.medad4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}
HTML
<span class='medad4'>مداد الجليد</span>


نص 3D


مداد الجليد

CSS
.medad5 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 90px;
font-family: Impact;
}
HTML
<span class='medad5'>مداد الجليد</span>


نص متلاثي خفيف


مداد الجليد

CSS
.medad6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
}
HTML
<span class='medad6'>مداد الجليد</span>


نص مكرر


مداد الجليد

CSS
.medad7 {
padding-left: 20px;
text-transform: uppercase;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 80px;
font-family: 'Luckiest Guy', cursive;
}
HTML
<span class='medad7'>مداد الجليد</span>


نص كوميدي


مداد الجليد

CSS
.medad8 {
color: #fff;
text-shadow:
-2px -2px 0 #000,
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-size: 100px;
font-family: 'Boogaloo', cursive;
}
HTML
<span class='medad8'>مداد الجليد</span>


النص مع النقش


مداد الجليد

CSS
.medad9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
color: #2A0A12;
font-size: 80px;
font-family: 'Special Elite', cursive;
}
HTML
<span class='medad9'>مداد الجليد</span>


نص مع تأثيرات النار




مداد الجليد

CSS
.medad0 {
color: #DF0101;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
font-size: 90px;
font-family: 'New Rocker', cursive;
}
HTML
<span class='medad0'>مداد الجليد</span>



نص غير واضح


مداد الجليد

CSS
.medad1 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}
HTML
<span class='medad1'>مداد الجليد</span>


نص ثلاثي الابعاد شكل آخر



مداد الجليد

CSS
.medad2 {
color: #fcc90f;
text-shadow:
-2px -2px 0 #29296e,
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e,
17px 17px #29296e,
18px 18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
font-size: 90px;
font-family: 'Henny Penny', cursive;
}
HTML
<span class='medad2'>مداد الجليد</span>


يمكنكم من خلال هذه النصوص تجميل موقعكم أو مدونتكم من خلالها بإستخدام التأثيرات الخاصة على كل نص

يمكن تغيير لون النصوص على سبيل المثال تغيير كود اللون color: #fcc90f من خلال الأداة هنا أو بما يناسبك
يمكن تغيير حجم النص من خلال font-size: 90px أو إذا كنت تريد إضافتها لتجميل نص مضاف مسبقاً بموقعك يمكنك حذفها

كيف تستخدم هذه النصوص في مدونتك لتجميلها؟

على سبيل المثال إذا أردت تجميل عناوين مواضيع مدونتك أختر CSS النص الذي أعجبك ثم قم بالتعيدل عليه كالتالي
عنوان النص الموضوع هنا هكذا .medad2 { لكن عناوين مواضيع مدونات في بلوجر بشكل عام تجتاج هذا الوسام .post h3 {
ببساطة أقوم بتغيير وسام الكود .medad2 { إلى .post h3 { فقط ثم أقوم بإضافة كود  CSS بقالب مدونتك فوق الرمز
 ]]></b:skin> حتى يتغير شكل عناوين مواضيع مدونتك بتأثير النص الذي أخترته
أو مثلاً أريد تغيير عنوان صندوق المتابعين في مدونتي
أقوم بإستبدال وسام النص الذي أخترته .medad1 { إلى الوسام .Followers1 h2 { ثم أضيف كامل الكود CSS في القالب فوق الرمز ]]></b:skin>

أي نص يمكنك التعديل عليه مع تغيير معرف الكود medad0 أو medad4
كما يمكنك إستخدامها داخل مواضيع مدونتك عن طريق أختيار CSS النص المرغوب فيه ثم وضعه داخل الوسامين التاليين
<style>
كود النص هنــــا
</style>
ثم لصقه داخل محرر الموضوع عن طريق النقر على HTML 
بعد ذالك قم بإضافة المعرف الخاص به في نفس المكان 
<span class='medad2'>وضع النص هنــــا</span>

لاحظ لقد قمت بتغيير عنوان هذا الموضوع فقط من خلال هذه الأكواد :) وضعت بدلاً من .medad5 { الوسام .post h1 {

أتمنى ان تكون قد وضحت بالنسبة لكم واتمنى أن تكون مفيدة.

اكواد النصوص تأثيرات خاصة على النصوص لمدونات بلوجر والمواقع






مشاركات أقدم المقال التالي
2 تعليق
  • jamal zayed abuo
    jamal zayed abuo 23‏/12‏/2014، 6:00:00 ص

    رائئئئئئئئئئئئع حدا احسنتم

    • مداد الجليد
      مداد الجليد 30‏/01‏/2016، 11:25:00 م

      شكرًا لك

أضف تعليق
عنوان التعليق