مضيفا DropShadow إلى صور عن طريق CSS

آخر توت سريع. هنا هو شيء بسيط وجميل استخدام السلطة من CSS ... ولكن كان من الصعب concieve (وكان بالتأكيد ليست لي) لتبدأ. مضيفا Dropshadow، قد يكون من كعكة peice بالنسبة للكثيرين منا، وذلك باستخدام بعض الأدوات لتحرير الصور مثل فوتوشوب ضبطت الألعاب النارية الخ.
السبب، وأنا اختار شبح الهبوط باستخدام المغلق هو أنه، في حين عادة ما يخلق تصميم صفحات / HTML من تطبيق، ومتطلبات الحفاظ على بالتكرار. ما أعنيه هو، في موقع ويب موجود مع العديد من الصور، مثل تلك التي تعرض فريندز قائمة أو مكتبة الصور، سيكون من الصعب لاعادة معالجة حمولة كاملة من الصور التي تم تفريغها بالفعل إلى إضافة أو إزالة الظلال، لذلك المسألة.
إذا كان الأمر كذلك كنت قد فعلت التفكير قليلا إلى الأمام أثناء إنشاء HTMLS لإضافة هذه الانقسامات إضافية أو عادة الحالة هو أن يكون لديك منطق حلقة توليد هذه الرموز / الصور المصغرة في XSL، PHP. جافا أو أي لغة البرمجة / البرمجة، يمكنك ان تضيف إليها في أي وقت، ومن ثم مجرد مسألة عرض وإخفاء هذه الظلال باستخدام خاصية العرض المغلق، وفقا لمتطلبات العملاء المتغيرة ... وانا havn't القيام به هذا النوع من التفكير إلى الأمام قبل هذا ... ولكن ahev بدأت الآن!

في المثال أدناه، فإن الصورة الأصلية ظل الحرة ويتم تطبيق dropshadows كما هو مطلوب! أيضا، لقد ذهبت قليلا اضافية، وذلك باستخدام الحيل توت بلادي في وقت سابق (Well! هذه هي على الأرجح أقصر متنوعة من البرامج التعليمية، لذلك ما يبرره إلا وصفها بأنها "توت" 'ق) عن طريق CSS الملكية كليب للتباهي فقط

الصورة الأصلية

original_image

النتائج CSS DropShadow
css_dropshadow_results
عرض تجريبي | تحميل sourcefiles


3 ردود على "إضافة إلى صور عن طريق DropShadow CSS"

ترك الرد

NDK الرئيسية | معربا عن تكنولوجيا المعلومات | الحنك تعرب | Penmenship تعرب | الرهبة تعرب | تعرب عن نفسي