romaissa
11-01-2013, بتوقيت غرينيتش 03:37 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„طµظˆط±ط© ط§ظ„ط´ظپط§ظپط© 2 (ظگ Css ) (http://www.dzbatna.com/t1394756/)
السلام عليكم
شفنا في درس مفصل سابق طريقة عمل صور شفافة
بالجافا سكريت
رابط الموضوع :
درس مفصل بسيط : الصورة الشفافة ( j a v a s c r i p t ) (http://www.flyarb.com/f.asp?t=32688)
سنرى في هذا الدرس مفصل طريقة الحصول على نفس النتيجة تماما
باستعمال ال Css فقط
باسم الله نفتح عمل جديد بأي محرر نصوص
انا سأستعمل الفرونت بيج
http://dzbatna.net/vb/icon.aspx?m=blank (http://www14.0zz0.com/2014/11/20/13/192675486.png)
ثم نضع علامتي الستايل style قبل انتهاء ال head
لنضع بينهما كود code ال Css
هكذا
http://www14.0zz0.com/2014/11/20/13/234667905.png (http://www14.0zz0.com/2014/11/20/13/234667905.png)
الأن نضيف الجزء الأول من الكود code
رمز Code:
شرح طريقةه: هنا عملنا كلاس للصور
و استخدمنا فيلتر يجعل الصورة شفافة بحيث العدد 40 هو درجة الشفافية .
النتيجة :
http://www13.0zz0.com/2014/11/21/12/140695020.png (http://www13.0zz0.com/2014/11/21/12/140695020.png)
ثم نضيف بعده الجزء الثاني من الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> [LEFT].flykitopacity:hover img[
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=100);
]
[/LEFT]
[CENTER][/CENTER]
</code> </code>
و شرح طريقةه: لو لاحظتم هنا استخدمنا نفس الكلاس
و تقريبا عكسنا الجزء الأول من الكود code بحيث استخدمنا القيمة
hover و تعني عند مرور الماوس على الصورة .
ثم في السطر الثاني استخدمنا نفس الفيلتر الأول
لكن غيرنا القيمة من 40 الى 100 .
و بهذا ستكون الصورة التي نريد شفافة لأن هذا عمل الجزء الأول من الكود code
و عند مرور الماوس عليها تصبح عادية و هذا عمل الجزء الثاني من الكود code
بعد إضافة الكود code تصبح النتيجة :
http://www14.0zz0.com/2014/11/21/12/409539723.png (http://www14.0zz0.com/2014/11/21/12/409539723.png)
اذن كما توضح الصورة الاختلاف بين الجزء الأول و الثاني من الكود code
هو أن الجزء الأول يساوي الحالة الافتراضية للصورة
التي سنضيف لها الكلاس الذي هو flykitopacity
بحيث درجة الشفافية هي 40
اما الجزء الثاني يقول انه عند مرور الماوس على الصورة
التي تستخدم الكلاس flykitopacity
تكون درجة الشفافية 100 و بهذا ستعود الصورة لحالتها عند مرور الماوس .
لتحميل الكود code :
Clique Here (http://www.flyarb.com/user.aspx?id=22&f=flyarb-Csszoom.txt)
الأن ننتقل لمنطقة ال body
ثم
http://www.flyarb.com/file.aspx?id=22&f=ChAoUki~zoomcss3.png
مكان # نضع الرابط الذي ينتقل اليه المتصفح بعد الظغط على الصورة.
مكان myimage.gif نضع رابط الصورة .
الأن لنجعل الصورة شفافة ما علينا الا أن نضيف اليها الكلاس
الذي عملناه في كود code ال Css أعلاه .
يعني نضيف class باسم flykitopacity
كما في الصورة:
http://www.flyarb.com/file.aspx?id=22&f=ChAoUki~zoomcss4.png
لمشاهدة نتيجة الدرس مفصل :
Clique Here (http://www.flyarb.com/star/csszoom.htm)
في انتظار تطبيقاتكم
و الى اللقاء في موضوع اخر
الموضوع الأصلي
http://www.flyarb.com/f.asp?t=33376
ألعاب الأندرويد مجانا و حصريا (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)©
السلام عليكم
شفنا في درس مفصل سابق طريقة عمل صور شفافة
بالجافا سكريت
رابط الموضوع :
درس مفصل بسيط : الصورة الشفافة ( j a v a s c r i p t ) (http://www.flyarb.com/f.asp?t=32688)
سنرى في هذا الدرس مفصل طريقة الحصول على نفس النتيجة تماما
باستعمال ال Css فقط
باسم الله نفتح عمل جديد بأي محرر نصوص
انا سأستعمل الفرونت بيج
http://dzbatna.net/vb/icon.aspx?m=blank (http://www14.0zz0.com/2014/11/20/13/192675486.png)
ثم نضع علامتي الستايل style قبل انتهاء ال head
لنضع بينهما كود code ال Css
هكذا
http://www14.0zz0.com/2014/11/20/13/234667905.png (http://www14.0zz0.com/2014/11/20/13/234667905.png)
الأن نضيف الجزء الأول من الكود code
رمز Code:
شرح طريقةه: هنا عملنا كلاس للصور
و استخدمنا فيلتر يجعل الصورة شفافة بحيث العدد 40 هو درجة الشفافية .
النتيجة :
http://www13.0zz0.com/2014/11/21/12/140695020.png (http://www13.0zz0.com/2014/11/21/12/140695020.png)
ثم نضيف بعده الجزء الثاني من الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> [LEFT].flykitopacity:hover img[
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=100);
]
[/LEFT]
[CENTER][/CENTER]
</code> </code>
و شرح طريقةه: لو لاحظتم هنا استخدمنا نفس الكلاس
و تقريبا عكسنا الجزء الأول من الكود code بحيث استخدمنا القيمة
hover و تعني عند مرور الماوس على الصورة .
ثم في السطر الثاني استخدمنا نفس الفيلتر الأول
لكن غيرنا القيمة من 40 الى 100 .
و بهذا ستكون الصورة التي نريد شفافة لأن هذا عمل الجزء الأول من الكود code
و عند مرور الماوس عليها تصبح عادية و هذا عمل الجزء الثاني من الكود code
بعد إضافة الكود code تصبح النتيجة :
http://www14.0zz0.com/2014/11/21/12/409539723.png (http://www14.0zz0.com/2014/11/21/12/409539723.png)
اذن كما توضح الصورة الاختلاف بين الجزء الأول و الثاني من الكود code
هو أن الجزء الأول يساوي الحالة الافتراضية للصورة
التي سنضيف لها الكلاس الذي هو flykitopacity
بحيث درجة الشفافية هي 40
اما الجزء الثاني يقول انه عند مرور الماوس على الصورة
التي تستخدم الكلاس flykitopacity
تكون درجة الشفافية 100 و بهذا ستعود الصورة لحالتها عند مرور الماوس .
لتحميل الكود code :
Clique Here (http://www.flyarb.com/user.aspx?id=22&f=flyarb-Csszoom.txt)
الأن ننتقل لمنطقة ال body
ثم
http://www.flyarb.com/file.aspx?id=22&f=ChAoUki~zoomcss3.png
مكان # نضع الرابط الذي ينتقل اليه المتصفح بعد الظغط على الصورة.
مكان myimage.gif نضع رابط الصورة .
الأن لنجعل الصورة شفافة ما علينا الا أن نضيف اليها الكلاس
الذي عملناه في كود code ال Css أعلاه .
يعني نضيف class باسم flykitopacity
كما في الصورة:
http://www.flyarb.com/file.aspx?id=22&f=ChAoUki~zoomcss4.png
لمشاهدة نتيجة الدرس مفصل :
Clique Here (http://www.flyarb.com/star/csszoom.htm)
في انتظار تطبيقاتكم
و الى اللقاء في موضوع اخر
الموضوع الأصلي
http://www.flyarb.com/f.asp?t=33376
ألعاب الأندرويد مجانا و حصريا (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)©
