Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

درس بسيط: دمج التلميحات بسمات البيانات لـHTML5

by
Length:ShortLanguages:
This post is part of a series called Design and Build a Static Admin Bar .
Building a Static Admin Bar for the Browser

Arabic (العربية/عربي) translation by Ali Atwa (you can also view the original English article)

عمل التلميحات بسيط نسبيا بإضافة قليلاً من كود HTML واستخدام بعض الجماليات من الـ CSS. ومع ذلك، إذا كنت قد سمعت عن سمات بيانات HTML5، فربما ترغب بمراجعة بعض الامثلة البديلة (وايضا اوضح بكثير).


شاهد الدرس مصور

إذا كنت تتابع سلسلة Admin Bar، هذا الفيديو يجب ان يوضح لك كل شيء. لا تقلق إذا لم تكن قد شاهدته؛ هذا الفيديو سوف يوضح شيء يمكنك استخدامه مع جميع أنواع الحالات. سنلقي نظرة على بعض الخيارات لجعل التلميحات تظهر اثناء استخدامها.

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


كود Tooltip: أضاف كود HTML

يستخدم المثال الأول علامات إضافية <span> بالرابط. فهو يعمل على ما يرام، مما يسمح لنا بإضافة 'نقطة' جمالية للأداة لدينا، وهو حاليا خيار أكثر أماناً عندما يتعلق الأمر بتوافق المتصفحات.

HTML:

CSS:


Tooltip كود: سمات البيانات بالـHTML5

هنا هو المثال الذي يوضح الكود، يستخدم سمات البيانات للـHTML5 لمنح اللمحات البيانات المرادة، باضافة عنصر ::before في css يجعل المظهر أكثر جمالا.

HTML:

CSS:


مصادر مفيدة:

  • John Resig سمات بيانات للـ HTML5
  • W3.org مرجع لسمات البيانات في HTML5
  • Dan Eden يستخدم سمات البيانات في HTML5 للملاحة
  • Chris Coyier يتحدث عن الانتقالات في css المكتوبة باداة
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.