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

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

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

نص محفور

Globale Toure

CSS

.medad {
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}

HTML

Globale Toure

نص مع الظل

Globale Toure

CSS

.medad2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}

HTML

Globale Toure

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

Globale Toure

CSS

.medad3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 80px;
font-family: 'Sancreek', cursive;
}

HTML

Globale Toure

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

Globale Toure

CSS

.medad4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}

HTML

Globale Toure

نص 3D

Globale Toure

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

Globale Toure

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

Globale Toure

CSS

.medad6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
}

HTML

Globale Toure

نص مكرر

Globale Toure

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

Globale Toure

نص كوميدي

Globale Toure

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

Globale Toure

النص مع النقش

Globale Toure

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

Globale Toure

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

Globale Toure

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

Globale Toure

نص غير واضح

Globale Toure

CSS

.medad1 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}

HTML

Globale Toure

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

Globale Toure

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

Globale Toure

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

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

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

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

أي نص يمكنك التعديل عليه مع تغيير معرف الكود medad0 أو medad4
كما يمكنك إستخدامها داخل مواضيع مدونتك عن طريق أختيار CSS النص المرغوب فيه ثم وضعه داخل الوسامين التاليين

ثم لصقه داخل محرر الموضوع عن طريق النقر على HTML 

بعد ذالك قم بإضافة المعرف الخاص به في نفس المكان 

وضع النص هنــــا

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

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