طھط£ط«ظٹط± طھط¯ط±ظٹط¬ط§طھ ط§ظ„ط§ظ„ظˆط§ظ† ط¹ظ„ظٹ ط§ظ„ط®ط·ظˆط· ط¨ط§ط³طھط®ط¯ط§ظ… css ( طھط*ط¯ظٹ ط§ظ„ظپظˆطھظˆط´ظˆط¨ )



السلام عليكم و رحمة الله و بركاته
كما وعدتكم دائما بالمزيد و المزيد من الدروس العجيبة ان شاء الله
اليوم اقدم لكم درس مفصل يشهد بتاريخ ال css و يدل علي مدي قوته و الدرس مفصل يقوم بما يفعله الفوتوشوب و لكن بطريقة css و هو اضافة تدريجات علي الخطوط
CSS Gradient Text Effect


الدرس مفصل اصلا باللغة الاجنبية و تم ترجمته بواسطتي و باذن الله الحقوق محفوظة لمدونة blog اسلام شحاته .
بسم الله الرحمن الرحيم
هل تريد ان تقوم بعمل نصوص رائعة و مبهرة و بالوان مختلفة لكل عنوان دون ان تستخدم الفوتوشوب علي الخطوط ؟
هنا خدعة بسيطة بالcss تعلمك كيف تقوم بصناعة هذه العناوين الملونة و هذه الحركة تطبق علي الخطوط .
و ايضا بدون جافا سكربت او فلاش , فقط css .
كل ما تحتاج اليه هو وسم <span> فارغ , يتم وضعه في ال head , و تحتاج ايضا الي صورة تكون خلفية للخط ( ممكن تصممها بالفوتوشوب ) * صورة تدرج اللون .
* هذه الخدعة تم تجريها علي معظم المتصفحات .
* امثلة علي الخدعة *


:*:
:> كيفية عمل الخدعة <:


كود code html

<h1><span></span>CSS Gradient Text</h1>
كود code css

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;



height: 31px;
}
اجعلها تعمل علي ie6

<!--[if lt IE 7]>

<style>
h1 span {
background: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader (src=’gradient.png’, sizingMethod=’scale’);
}
</style>

<![endif]–>
مثال اخر علي الحركة


الدرس مفصل الاصلي


http://www.sparo.ws/blog/?p=14
ارجو عند النقل ذكر الحقوق
السلام عليكم و رحمة الله و بركاته









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©