تأثير تدريجات الالوان علي الخطوط باستخدام css ( تحدي الفوتوشوب )

[linnou]

http://www.dzbatna.com/images/icons/icon18.gif طھط£ط«ظٹط± طھط¯ط±ظٹط¬ط§طھ ط§ظ„ط§ظ„ظˆط§ظ† ط¹ظ„ظٹ ط§ظ„ط®ط·ظˆط· ط¨ط§ط³طھط®ط¯ط§ظ… css ( طھط*ط¯ظٹ ط§ظ„ظپظˆطھظˆط´ظˆط¨ ) (http://www.dzbatna.com/t734909/)





السلام عليكم و رحمة الله و بركاته


كما وعدتكم دائما بالمزيد و المزيد من الدروس العجيبة ان شاء الله

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


الدرس مفصل اصلا باللغة الاجنبية و تم ترجمته بواسطتي و باذن الله الحقوق محفوظة لمدونة blog اسلام شحاته .



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

* امثلة علي الخدعة *

http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen4.gif

http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen5.gif

http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen6.gif

http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen7.gif


http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen8.jpg (http://www.webdesignerwall.com/demo/css-gradient-text/)


:*:

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


http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen1.gif (http://www.webdesignerwall.com/demo/css-gradient-text/)


كود 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: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’gradient.png’, sizingMethod=’scale’);
}
</style>

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


http://www.webdesignerwall.com/wp-content/uploads/2014/01/screen9.gif


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


http://www.sparo.ws/blog/?p=14


http://www.webdesignerwall.com/tutor...t-text-effect/ (http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/)

ارجو عند النقل ذكر الحقوق

السلام عليكم و رحمة الله و بركاته







ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©