تغيير صغير في تصميم الويب مع تأثير كبير
عندما أطلقت موقعًا جديدًا ، أردت إضافة نوع من الميزات إلى المدونة التي من شأنها إبراز الموقع الجديد. ومع ذلك ، لم أرغب في توضيح الأمر بشكل مفرط أو إزالته من المدونة نفسها.
كانت الإجابة صغيرة ، ولكن كان لها تأثير كبير ... إضافة صورة صغيرة جديدة إلى الارتباط في قائمة التنقل. (انقر للوصول إلى نشر لرؤيتها في العمل). ركضت مع الرابط لعدة أيام بمفردها ولم أحصل على أي حركة مرور. لقد أضفت الصورة والآن 8.5٪ من حركة المرور الصادرة تمر عبر هذا الرابط!
بدلاً من تضمين الصورة فعليًا في HTML ، استخدمت CSS حتى أتمكن من استخدامها في ميزات جديدة أخرى في المستقبل. يبدو CSS كما يلي:
span.new {background: url (/mytheme/new.png) بدون تكرار أعلى اليمين ؛ الحشو: 0 بكسل 18 بكسل 0 بكسل 0 بكسل ؛ }
تثبت الخلفية الصورة في الجزء العلوي الأيمن من النص وتمنعها من التكرار. تعمل الحشوة على دفع مسافة 18 بكسل بعد النص بحيث تكون صورتك في عرض واضح. من السهل الآن تضمينها في الصفحة ، ما عليك سوى استخدام علامة span حول النص الخاص بي:
المراجعات
في بعض الأحيان ، لا يتطلب الأمر الكثير لتوجيه القراء في اتجاه جديد!