قديم 2017-03-27, 02:20 PM
المشاركة : ( 1 )
.:: ! HTML PROF ::.
الصورة الرمزية WRONG WAY
WRONG WAY
.:: EGY BASMA ::.
Post شرح لكيفية اضافة الوان تدريجية للنصوص بواسطة css3
شرح لكيفية اضافة الوان تدريجية للنصوص بواسطة css3
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية الكرام ,,
*-.-**-.-**-.-**-.-**-.-*
اليوم سنقوم بشرح لكيفية إضافة تدرجات ألوان للنصوص عن طريق استخدام CSS3 ,,
من المعروف ان هذه الخاصية موجودة بالفعل ولكن كخلفيات ويطلق عليها اسم Background Gradient ولم اجد احد قد استخدمها فى النصوص من قبل لذلك سيتم شرح لاستخدام هذه الخاصية مع النصوص اليوم ,, وقد قمت بتطبيق الشرح على ايقونة " الانستجرام " مستخدماً ايقونات Font Awesome ! و نص عادى .

*-.-**-.-**-.-**-.-**-.-*
فـ مثالاً على أيقونة الإنستجرام ,,
فلنفترض أننا نمتلك كلاس وليكن اسمه EG-Instagram كما فى المثال الآتى ,,
كود بلغة HTML:
<!-- Text Gradient By http://www.egybasma.com/forum/ &amp; 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;
لتطبيق الألوان على النص .
اما باقى الخواص الموجودة فى الكلاس فـ هى للتوضيح فقط كحجم الخط و وضع مؤشر الماوس فـ هى غير أساسية .
*-.-**-.-**-.-**-.-**-.-*
وهذه هى النتيجة ,,
شرح لكيفية اضافة الوان تدريجية للنصوص بواسطة css3
*-.-**-.-**-.-**-.-**-.-*
و هذه نتيجة التطبيق على نص عادى !
شرح لكيفية اضافة الوان تدريجية للنصوص بواسطة css3
*-.-**-.-**-.-**-.-**-.-*
* يمكنك تغيير الألوان كما تشاء واضافة تدرجات لونية كما تريد فليس هناك اى مشكلة فى ذلك .
*-.-**-.-**-.-**-.-**-.-*
مثال مباشر ,,
إضغط هنا للذهاب إلى المثال المباشر
*-.-**-.-**-.-**-.-**-.-*
والى هنا نكون قد وصلنا إلى نهاية موضوع اليوم ,,
وفى النهاية ,, هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمنى ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-*
حظاً موفقاً للجميع ,,
دمتم بود ,,
شرح لكيفية اضافة الوان تدريجية للنصوص بواسطة css3
الـمـصـدر : معهد بسمة مصرية - مـن : قسم الشروحات الخاصة بـ لغات البرمجة - كـاتـب الـمـوضـوع : WRONG WAY

مـن مـواضـيع WRONG WAY
مساحة إعلانية


شرح لكيفية اضافة الوان تدريجية للنصوص بواسطة css3
أدوات الموضوع
انواع عرض الموضوع

الانتقال السريع
المواضيع المتشابهه
الموضوع
جوجل تعلن اضافة تغريدات تويتر لمحرك البحث
إنفجار برج كهربائي بقوة 220 ألف فولت بطريق كفر محفوظ بواسطة مجهولون
إنفجار برج كهرباء بمحافظة البحيرة بواسطة مجهولون
[ شـرح ] شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome
تحميل نسخة الـ vBulletin 3.8.7 منزوعة كود التبليغ بواسطة فريق vBSmart