تحتوي قائمة منشورات مدونة LearningjQuery.com على تاريخ رائع على اليسار، مثل هذا:
يمكننا أن نرى من الصورة أن "2009" تم ترتيبه عموديًا على الجانب الأيمن. استخدم Firebug لعرض العنصر. يظهر النص "2009" في بنية html. تقدم هذه المقالة طريقتين لتحقيق هذا التأثير.
1. استخدم تقنية Sprite لتحقيق ذلك
تم تقديم عملية التنفيذ بالتفصيل بواسطة Chris Coyier في المقالة " تقنية عرض التاريخ باستخدام Sprites "، وفيما يلي وصف موجز لعملية التنفيذ. ومن الواضح أننا لا نريد استخدام صورة منفصلة لكل تاريخ، لذلك ندمجها في صورة واحدة ونرتب السنة والشهر واليوم في مناطق مختلفة من الصورة، كما هو موضح في الشكل:
1. أتش تي أم أل
بنية html في الصفحة هي كما يلي:
يونيو
30
2009
تحتوي حاوية .postdate على ثلاث مناطق، تتوافق مع السنة والشهر واليوم، مما يضمن التكامل الدلالي.
في نظام إدارة المحتوى (CMS) مثل ووردبريس، يكون رمز الواجهة الخلفية كما يلي:
2. سي إس إس
CSS هو المكان الذي تلعب فيه النقوش المتحركة دورًا حقيقيًا، وذلك باستخدام سمات الفئة المحددة في HTML للسماح بعرض الصور المقابلة.
أولاً، دع الحاوية التي تحتوي على سمة الفئة .postdate يتم وضعها نسبيًا، بحيث يتم وضع المناطق الثلاثة الموجودة فيها بشكل مطلق واستخدام نفس صورة الخلفية. اضبط العرض والارتفاع الخاصين بهما، ثم انقل النص إلى الخارج للكشف عن صورة الخلفية.
ثم قم بتحديد مواضع خلفية محددة لكل شهر (12)، وكل يوم (31)، وكل سنة (على أساس 10 سنوات) لعرض الصور المقابلة.
تاريخ لاحق {
الموقف: نسبي؛
العرض: 50 بكسل؛
الارتفاع: 50 بكسل؛
تعويم: يسار؛
}
.الشهر، .اليوم، .السنة {
الموقف: مطلق؛
المسافة البادئة للنص: -1000em؛
صورة الخلفية: url(/wp-content/themes/ljq/images/dates.png);
تكرار الخلفية: عدم التكرار؛
}
.الشهر {الأعلى: 2 بكسل؛ اليسار: 0؛ العرض: 32 بكسل؛}
.day {الأعلى: 25 بكسل؛ اليسار: 0؛ العرض: 32 بكسل؛}
.السنة {أسفل: 0؛ اليمين: 0؛ العرض: 17 بكسل؛}
.m-01 { موقف الخلفية: 0 4 بكسل؛}
.m-02 { موقف الخلفية: 0 -28px؛}
.m-03 { موقف الخلفية: 0 -57px؛}
...المزيد من هذا القبيل ...
.d-01 { موقف الخلفية: -50px 0؛}
.d-02 { موقف الخلفية: -50px -31px؛}
.d-03 { موقف الخلفية: -50px -62px؛}
...المزيد من هذا القبيل ...
.y-2006 { موقف الخلفية: -150 بكسل 0؛}
.y-2007 { موقف الخلفية: -150px -50px؛}
.y-2008 { موقف الخلفية: -150px -100px؛}
...المزيد من هذا القبيل ...