أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية الكرام ,,
*-.-**-.-**-.-**-.-**-.-*
اليوم سنقوم بشرح لكيفية إضافة تدرجات ألوان للنصوص عن طريق استخدام CSS3 ,,
من المعروف ان هذه الخاصية موجودة بالفعل ولكن كخلفيات ويطلق عليها اسم Background Gradient ولم اجد احد قد استخدمها فى النصوص من قبل لذلك سيتم شرح لاستخدام هذه الخاصية مع النصوص اليوم ,, وقد قمت بتطبيق الشرح على ايقونة " الانستجرام " مستخدماً ايقونات Font Awesome ! و نص عادى .
*-.-**-.-**-.-**-.-**-.-*
فـ مثالاً على أيقونة الإنستجرام ,,
فلنفترض أننا نمتلك كلاس وليكن اسمه EG-Instagram كما فى المثال الآتى ,,
كود بلغة HTML:
<!-- Text Gradient By http://www.egybasma.com/forum/ & WRONG WAY--> <div class="EG-Instagram"></div>
كود:
.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:
كود:
background:linear-gradient(to right, #9030B8, #DB2265, #FEC053);
كود:
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
اما باقى الخواص الموجودة فى الكلاس فـ هى للتوضيح فقط كحجم الخط و وضع مؤشر الماوس فـ هى غير أساسية .
*-.-**-.-**-.-**-.-**-.-*
وهذه هى النتيجة ,,
*-.-**-.-**-.-**-.-**-.-*
و هذه نتيجة التطبيق على نص عادى !
*-.-**-.-**-.-**-.-**-.-*
* يمكنك تغيير الألوان كما تشاء واضافة تدرجات لونية كما تريد فليس هناك اى مشكلة فى ذلك .
*-.-**-.-**-.-**-.-**-.-*
مثال مباشر ,,
إضغط هنا للذهاب إلى المثال المباشر
*-.-**-.-**-.-**-.-**-.-*
والى هنا نكون قد وصلنا إلى نهاية موضوع اليوم ,,
وفى النهاية ,, هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمنى ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-*
حظاً موفقاً للجميع ,,
دمتم بود ,,
العرض العادي
الانتقال إلى العرض المتطور
الانتقال إلى العرض الشجري
