إخفاء icons بـ CSS

Monday 21 September 2009

هناك طريقة طريفة لإخفاء icons – المستعملة في تطبيقاتك – من أعين الفضوليين، علماً أنه يمكن الوصول إليها من ملف CSS، فعند الضغط بالزر الأيمن للفأرة لحفظ الإيقونة ستظهر صورة بيضاء فارغة.

اضغط هنا للتجربة:

قم بوضع صورة صغيرة بحجم الإيقونات الأصلية:

<img src="spacer.gif" class="icon" alt="" />

واستخدم الكلاس icon لاظهار الصورة الأصلية:

img.icon {
	background: url(folder.png) no-repeat 0 0
}

يمكنك جمع كل الإيقونات في صورة واحدة واستعمال background-position سيكون أفضل بالتأكيد .

10 تعليقات

  1. حركة رائعة فعلاً .. ^^
    شكراً عزيزي ,,

  2. جميل جدا ،،
    سأقوم بتطبيقها على بعض الصور الخاصة فقط :) .
    تحياتي ،،

  3. الحركة جميلة جداً .. نفس الحركة مستخدمة في فليكر ؟

  4. فكرة جميلة وطريقة رائعة لحفظ الحقوق
    مشكور أخي ..

  5. خالد says:

    السلام عليكم.
    طريقة رائعة.

    لكن هناك طريقة أخرى لتحميل الصور، وهي من فارفوكس:
    تدخل options ثم informations sur la page ثم médias وتجد كل الصور.

    المهم ليس كل على علم بهذه الطرق.

  6. cssbit says:

    chababtiznit
    الضغط علة الزر سيجعلك تحصل على صورة كاملة من الصفحة

    أحمد حمودة:
    ربما لم أختبر ذلك من قبل، اكتشفت الطريقة في موقع كنت أحاول الحصول على icons جميلة منه

  7. احمد says:

    شكراً جداً لك ولدروسك المفيدة والتي استفدت منها بشكل كبير ..
    لدي سؤال :
    ملاحظ المواقع الاجنبية تستخدم جمع الصور بـ background-position .. لكن ما اعرف كيف الطريقه بالضبط .. لو ممكن تكتب تدوينة وتشرح الطريقه اكون ممتن وشاكر لك جداً ..

  8. cssbit says:

    احمد:
    على الرحب والسعة
    الهدف من الطريقة هو استعمال صورة واحدة بدل عدة صور وهذه الصورة الواحدة تتكون من باقي الايقونات وباستعمال position تظهر احداثيات الصورة المطلوبة

    سبق ان كتبت موضوعا ابحث في قسم الدروس هنا، واذا لم تصلك الفكرة ساكون على استعداد لشرحها لك خصيصا

    شكرا

  9. لكن أرى أنه نستطيع إستخراجها من source code؟
    أم ما هو رأيك.

  10. سليمان says:

    جميل جدا، اعتقد قوقل تستخذم صورة واحدة وتستخدم position

التعليقات مغلقة.