إخفاء icons بـ CSS

الإثنين 21 سبتمبر 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. خالد قال:

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

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

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

  6. cssbit قال:

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

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

  7. احمد قال:

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

  8. cssbit قال:

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

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

    شكرا

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

  10. سليمان قال:

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

أضف تعليقا

لن يظهر بريدك لأحد آخر

إن أردت