إنشاء قائمة ملاحظات لاصقة في 5 خطوات سهلة باستخدام CSS3 وHTML5

إنشاء تأثير ملاحظات لاصقة في 5 خطوات سهلة باستخدام CSS3 وHTML5

مرتين في الشهر، نعود إلى بعض المنشورات المفضلة للقراء على مدار تاريخ Nettuts+. تم نشر هذا البرنامج التعليمي لأول مرة في شهر [الشهر]. في هذا البرنامج التعليمي، ستتعلم كيفية تحويل قائمة HTML إلى جدار من "الملاحظات اللاصقة" التي تبدو وتعمل كما يلي:

تم بناء هذا التأثير بشكل تدريجي ويعمل على أحدث متصفحات Webkit (Safari، Chrome)، Firefox، وOpera. المتصفحات الأخرى تحصل فقط على مربعات صفراء.

HTML والمربعات الأساسية

لنبدأ بأبسط نسخة تعمل على جميع المتصفحات. نظرًا لأننا نستخدم HTML5 للتأثير، فإن أساس HTML لملاحظاتنا اللاصقة هو قائمة غير مرتبطة تحتوي على روابط بداخلها جميع العناصر الأخرى في كل عنصر من عناصر القائمة:

<ul>
  <li>
    <a href="#">
      <h2>Title #1</h2>
      <p>Text Content #1</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Title #2</h2>
      <p>Text Content #2</p>
    </a>
  </li>
  [...]
</ul>
    

لاحظ أن كل ملاحظة محاطة برابط، وهو دائمًا عنصر جيد للاستخدام لأنه يعني تلقائيًا أن ملاحظاتنا تصبح قابلة للوصول عبر لوحة المفاتيح. إذا كنا نستخدم عناصر القائمة للتأثير، فنحن بحاجة إلى تعيين خاصية tabindex للحصول على نفس الوصول.

CSS لتحويل هذا إلى مربعات صفراء بسيط جدًا:

*{
  margin:0;
  padding:0;
}
body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#666;
  color:#fff;
}
h2,p{
  font-size:100%;
  font-weight:normal;
}
ul,li{
  list-style:none;
}
ul{
  overflow:hidden;
  padding:3em;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
}
ul li{
  margin:1em;
  float:left;
}
    

نقوم بإعادة تعيين الأشياء التي يتم تعيينها عادةً بواسطة المتصفح مثل الهوامش والحشو ونمط القائمة لإزالة النقاط من القائمة.

ثم نعطي عنصر UL بعض الحشو ونعيّن خاصية overflow إلى hidden - وهذا يضمن أنه عندما نعوم عناصر القائمة لاحقًا، يتم احتواؤها داخل القائمة ويتم تنظيف العناصر التالية في المستند تلقائيًا.

نعطي النمط كمربعات صفراء ونعوم جميع عناصر القائمة إلى اليسار. النتيجة هي سلسلة من المربعات الصفراء للقائمة:

هذا يعمل على كل متصفح هناك - بما في ذلك IE6. هذا أيضًا حيث ننهي دعم هذا المتصفح لأننا لا ينبغي أن نعرض التأثيرات المرئية المدعومة بالتكنولوجيا الحديثة للمتصفحات التي تأخرت.

الظل والخط المتعرج

الآن حان الوقت لإضافة ظل إلى الملاحظات لجعلها تبرز واستخدام خط متعرج يدوي كخط للملاحظات. لهذا نستخدم Google Fonts API والخط المقدم لنا، المسمى "Reenie Beanie". أسهل طريقة لاستخدام هذه API هي اللعب بها باستخدام أداة معاينة الخطوط من Google:

ثم نعطي بعض الحشو للعنوان داخل الملاحظات اللاصقة، ونعيّن خط الفقرة إلى الخط الجديد الذي أدرجناه. لاحظ أن Reenie Beanie يحتاج إلى أن يظهر كبيرًا حتى يكون قابلًا للقراءة:

<link  href="http://fonts.googleapis.com/css? 
family=Reenie+Beanie:regular" 
rel="stylesheet" 
type="text/css">
  

لإضافة ظل إلى الملاحظات اللاصقة لجعلها تبرز من الصفحة، نحتاج إلى تطبيق box-shadow. لهذا، يجب أن نضيف سطرًا لكل متصفح نريد دعمه:

ul li a {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 10em;
  width: 10em;
  padding: 1em;
  /* Firefox */
  -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
  /* Opera */
  box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
}
 

بناء الجملة لحسن الحظ هو نفسه لكل منها: الإزاحة، الانتشار، واللون - في هذه الحالة رمادي داكن مع عتامة 70%. مع الخط الجديد، تبدو الملاحظات اللاصقة الآن كما يلي:

إمالة الملاحظات

ملاحظة: كل من الإمالة والتكبير الذي سنضيفه في الخطوة التالية تم شرحهما في الماضي، في هذه المقالة بواسطة Zurb، ولكن مع نقص الدعم للمتصفحات الأخرى، حيث لم تظهر في وقت الكتابة. لذا شكرًا جزيلاً لهم لنشر هذه الحيلة.

لإمالة عنصر، نستخدم خاصية CSS3 transform:rotate، مرة أخرى نضيف البادئة لكل متصفح:

ul li a {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
}
  

هذا يميل جميع الروابط بست درجات إلى اليسار. الآن لجعل الملاحظات اللاصقة تبدو مائلة بشكل عشوائي، يمكننا استخدام خاصية CSS3 nth-child:

ul li:nth-child(even) a {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
}
ul li:nth-child(3n) a {
  -o-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  position: relative;
  top: -5px;
}
ul li:nth-child(5n) a {
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  top: -10px;
}
  

هذا يميل كل رابط أربع درجات إلى اليمين، ويعوض قليلاً بمقدار خمسة بكسل من الأعلى. كل رابط ثالث يميل ثلاث درجات إلى اليسار ويدفع إلى الأعلى خمسة بكسل. وكل رابط خامس يدور خمس درجات إلى اليمين ويعوض عشرة بكسل من الأسفل. بعد النظر في كل هذا، يعطي هذا انطباعًا بالملاحظات اللاصقة العشوائية:

تكبير الملاحظات اللاصقة عند التمرير والتركيز

لجعل ملاحظة لاصقة تبرز، نستخدم ظلًا أكبر وتحويل scale في CSS3. مرة أخرى، نحتاج إلى تحديد هذا لكل متصفح:

ul li a:hover, ul li a:focus {
  -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
  -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
  box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position: relative;
  z-index: 5;
}

نضيف أيضًا z-index أكبر للتأكد من أن الملاحظة اللاصقة المكبرة تغطي الآخرين. عند تطبيق هذا على hover وfocus، فهذا يعني أن تحريك الماوس فوقها أو التبويب على الرابط يجعلها تبرز:

الخطوة 5: إضافة انتقالات سلسة والألوان

الخطوة الأخيرة هي جعل التغييرات من الإمالة إلى التكبير سلسة وجذابة بدلاً من أن تكون مفاجئة. لهذا نستخدم وحدة انتقال CSS3 في تطبيقات المتصفح المختلفة:

ul li a {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 10em;
  width: 10em;
  padding: 1em;
  -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
  box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
  -moz-transition: -moz-transform .15s linear;
  -o-transition: -o-transform .15s linear;
  -webkit-transition: -webkit-transform .15s linear;
}

في الجوهر، هذا يعني: إذا تغير شيء ما على هذا العنصر، لا تنتقل مباشرة إلى التعريف الآخر، ولكن قم بذلك تدريجيًا خلال ربع ثانية. كإضافة إضافية، دعنا نضيف بعض الألوان إلى المزيج عن طريق جعل كل ملاحظة لاصقة ثانية خضراء وكل ثالثة زرقاء فاتحة:

ul li:nth-child(even) a {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
  background: #cfc;
}
ul li:nth-child(3n) a {
  -o-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  position: relative;
  top: -5px;
  background: #ccf;
}

لرؤية الفرق في الخطوة الأخيرة، تحتاج إلى تجربة العرض التوضيحي الأخير في المتصفح.

الخلاصة والتنزيل

هذا كل شيء - ملاحظات لاصقة متحركة بسلاسة ومائلة دون استخدام صور أو JavaScript - مدعومة من Firefox، Opera، Safari، وChrome وتتراجع إلى مربعات صفراء في المتصفحات القديمة. مع الاستخدام الذكي لـ nth-child والتحويلات والانتقالات في CSS، وفرنا بعض البرمجة. علاوة على ذلك، Web Font API من Google جعل من السهل استخدام خطوط مخصصة. استخدام hover وfocus للتأثير يعني أيضًا أن مستخدمي لوحة المفاتيح يمكنهم ملاحظة النتائج أيضًا.

تنزيل مثال الملاحظات اللاصقة كملف مضغوط.