تنسيقات التحكم النقطي (DOT NAVIGATION STYLES)

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

واليوم سنتناول عدد من الافكار المميزة في التحكم النقطي او كما يعرف ساريكم بعض تنسيقات التحكم النقطي المميزة (DOT NAVIGATION STYLES) .

تنسيقات التحكم النقطي -  DotNavigationStyles

 

مثال حي     التحميل

 

عناصر القائمة الصغيرة عادة لا نعطيها اي اهتمام في التصميم الابداعي . فإنها غالبا ما تكون مهملة بسبب حجمها ولكن لدينا الفرصة لجعلها أفضل  باضافة تأثيرات جديدة ومنوعة . اليوم نريد أن نعرض مجموعة ملهمة من تنسيقات التحكم النقطي (DOT NAVIGATION STYLES) مع تاثيرات رقيقة عندنا نمر بمؤشر الماوس أو نضغط عليها .وبالنسبة للتأثيرات نحن إستخدمنا تأثيرات متعددة مثل التحولات(transitions ) في التأثير , perspective , SVG

 

ملاحظة :

التأثيرات قد لا تعمل في بعض المتصفحات القديمة
 

بنية الكود:

نستخدم قائمة غير مرقمة مع روابط (unordered list with links) :

<div class="dotstyle dotstyle-fillup"> <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div>See the Pen bEcBx by mohamed maher (@fwasl) on CodePen. 4025

      وفي النهاية اامل أن تستمتع بهذه التنسيقات والتأثيرات وتجدهم ملهمين لك.

مثال حي     التحميل

مقالات ذات صلة

اضف رد