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

نص محفور

مداد الجليد

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>