تكويد

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

كتبه : محمد ماهر

2 فبراير 2014

مؤشر التحميل وكيف يمكن وضع عدد من الاكواد تضيف مؤثرات حركية جديدة له. واليوم سنتناول عدد من الافكار المميزة في التحكم النقطي او كما يعرف ساريكم بعض تنسيقات التحكم النقطي المميزة (DOT NAVIGATION STYLES) . [button type=”bd_button btn_large” url=”http://files.fwasl.com/demo/DotNavigationStyles/” target=”” button_color_fon=”#fa8078″ button_text_color=”#ffffff” ]مثال حي[/button] [button type=”bd_button btn_large” url=”http://files.fwasl.com/webdesign/DotNavigationStyles.zip” target=”on” button_color_fon=”#fa8078″ button_text_color=”#ffffff” ]التحميل[/button] عناصر القائمة الصغيرة عادة لا نعطيها اي اهتمام في التصميم الابداعي . فإنها غالبا ما تكون مهملة بسبب حجمها ولكن لدينا الفرصة لجعلها أفضل باضافة تأثيرات جديدة ومنوعة . اليوم نريد أن نعرض مجموعة ملهمة من تنسيقات التحكم النقطي (DOT NAVIGATION STYLES) مع تاثيرات رقيقة عندنا نمر بمؤشر الماوس أو نضغط عليها .وبالنسبة للتأثيرات نحن إستخدمنا تأثيرات متعددة مثل التحولات(transitions ) في التأثير , perspective , SVG

ملاحظة :

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

بنية الكود:

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

[codepen_embed height=”249″ theme_id=”4025″ slug_hash=”bEcBx” default_tab=”html”] <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 <a href=’http://codepen.io/fwasl/pen/bEcBx’>bEcBx</a> by mohamed maher (<a href=’http://codepen.io/fwasl’>@fwasl</a>) on <a href=’http://codepen.io’>CodePen</a>. [/codepen_embed] وفي النهاية اامل أن تستمتع بهذه التنسيقات والتأثيرات وتجدهم ملهمين لك.

[button type=”bd_button btn_large” url=”http://files.fwasl.com/demo/DotNavigationStyles/” target=”” button_color_fon=”#fa8078″ button_text_color=”#ffffff” ]مثال حي[/button] [button type=”bd_button btn_large” url=”http://files.fwasl.com/webdesign/DotNavigationStyles.zip” target=”on” button_color_fon=”#fa8078″ button_text_color=”#ffffff” ]التحميل[/button]

]]>