WRONG WAY
2017-03-27, 03:20 PM
http://b.top4top.net/p_3420gfcf1.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum/) الكرام ,,
*-.-**-.-**-.-**-.-**-.-*
اليوم سنقوم بشرح لكيفية إضافة تدرجات ألوان للنصوص عن طريق استخدام CSS3 ,,
من المعروف ان هذه الخاصية موجودة بالفعل ولكن كخلفيات ويطلق عليها اسم Background Gradient ولم اجد احد قد استخدمها فى النصوص من قبل لذلك سيتم شرح لاستخدام هذه الخاصية مع النصوص اليوم ,, وقد قمت بتطبيق الشرح على ايقونة " الانستجرام " مستخدماً ايقونات Font Awesome (http://fontawesome.io/icons/) ! و نص عادى .
*-.-**-.-**-.-**-.-**-.-*
فـ مثالاً على أيقونة الإنستجرام ,,
فلنفترض أننا نمتلك كلاس وليكن اسمه EG-Instagram كما فى المثال الآتى ,,
<!-- Text Gradient By http://www.egybasma.com/forum/ & WRONG WAY-->
<div class="EG-Instagram"></div>
سنبدأ بإضافة الألوان الخاصة بالانستجرام بواسطة خاصية الـ Gradient الموجودة فى CSS بهذا الشكل ,,
.EG-Instagram:before{background:linear-gradient(to right, #9030B8, #DB2265, #FEC053);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:100px;cursor:pointer;}
شرح الكود المستخدم :-
before:
غير أساسية هى فقط لأننى استخدم فى المثال Font Awesome .
background:linear-gradient(to right, #9030B8, #DB2265, #FEC053);
أما الكود السابق فهو الخاص بتدريج الألوان من اليسار الى اليمين وهذا يعتبر درسنا اليوم .
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
لتطبيق الألوان على النص .
اما باقى الخواص الموجودة فى الكلاس فـ هى للتوضيح فقط كحجم الخط و وضع مؤشر الماوس فـ هى غير أساسية .
*-.-**-.-**-.-**-.-**-.-*
وهذه هى النتيجة ,,
https://b.top4top.net/p_451vtq7o1.png
*-.-**-.-**-.-**-.-**-.-*
و هذه نتيجة التطبيق على نص عادى !
https://c.top4top.net/p_45133k341.png
*-.-**-.-**-.-**-.-**-.-*
* يمكنك تغيير الألوان كما تشاء واضافة تدرجات لونية كما تريد فليس هناك اى مشكلة فى ذلك .
*-.-**-.-**-.-**-.-**-.-*
مثال مباشر ,,
إضغط هنا للذهاب إلى المثال المباشر (http://sa.ae/65ac5f5/)
*-.-**-.-**-.-**-.-**-.-*
والى هنا نكون قد وصلنا إلى نهاية موضوع اليوم ,,
وفى النهاية ,, هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمنى ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-*
حظاً موفقاً للجميع ,,
دمتم بود ,,
http://c.top4top.net/p_3429vifo2.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum/) الكرام ,,
*-.-**-.-**-.-**-.-**-.-*
اليوم سنقوم بشرح لكيفية إضافة تدرجات ألوان للنصوص عن طريق استخدام CSS3 ,,
من المعروف ان هذه الخاصية موجودة بالفعل ولكن كخلفيات ويطلق عليها اسم Background Gradient ولم اجد احد قد استخدمها فى النصوص من قبل لذلك سيتم شرح لاستخدام هذه الخاصية مع النصوص اليوم ,, وقد قمت بتطبيق الشرح على ايقونة " الانستجرام " مستخدماً ايقونات Font Awesome (http://fontawesome.io/icons/) ! و نص عادى .
*-.-**-.-**-.-**-.-**-.-*
فـ مثالاً على أيقونة الإنستجرام ,,
فلنفترض أننا نمتلك كلاس وليكن اسمه EG-Instagram كما فى المثال الآتى ,,
<!-- Text Gradient By http://www.egybasma.com/forum/ & WRONG WAY-->
<div class="EG-Instagram"></div>
سنبدأ بإضافة الألوان الخاصة بالانستجرام بواسطة خاصية الـ Gradient الموجودة فى CSS بهذا الشكل ,,
.EG-Instagram:before{background:linear-gradient(to right, #9030B8, #DB2265, #FEC053);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:100px;cursor:pointer;}
شرح الكود المستخدم :-
before:
غير أساسية هى فقط لأننى استخدم فى المثال Font Awesome .
background:linear-gradient(to right, #9030B8, #DB2265, #FEC053);
أما الكود السابق فهو الخاص بتدريج الألوان من اليسار الى اليمين وهذا يعتبر درسنا اليوم .
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
لتطبيق الألوان على النص .
اما باقى الخواص الموجودة فى الكلاس فـ هى للتوضيح فقط كحجم الخط و وضع مؤشر الماوس فـ هى غير أساسية .
*-.-**-.-**-.-**-.-**-.-*
وهذه هى النتيجة ,,
https://b.top4top.net/p_451vtq7o1.png
*-.-**-.-**-.-**-.-**-.-*
و هذه نتيجة التطبيق على نص عادى !
https://c.top4top.net/p_45133k341.png
*-.-**-.-**-.-**-.-**-.-*
* يمكنك تغيير الألوان كما تشاء واضافة تدرجات لونية كما تريد فليس هناك اى مشكلة فى ذلك .
*-.-**-.-**-.-**-.-**-.-*
مثال مباشر ,,
إضغط هنا للذهاب إلى المثال المباشر (http://sa.ae/65ac5f5/)
*-.-**-.-**-.-**-.-**-.-*
والى هنا نكون قد وصلنا إلى نهاية موضوع اليوم ,,
وفى النهاية ,, هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمنى ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-*
حظاً موفقاً للجميع ,,
دمتم بود ,,
http://c.top4top.net/p_3429vifo2.png