كيفية تخصيص مؤشر الماوس

Abdo Salem | الخميس, ديسمبر 25, 2014 | 0 تعليقات

تخصيص مؤشر الماوس

إذا كان عندك موقع على الويب, فأكيد تحاول تخصيص العناصر الإفتراضية التي في المتصفح مثل السكرول بار ومؤشر الماوس, ليميز موقعك عن باقي مواقع الويب.

كيفية تخصيص مؤشر الماوس

1 - ضع هذا الكود في ملف الـCSS الخاص بموقعك.

*
{
cursor:url(IMG-URL),default !important;
}

2 - قم بتغيير :
- IMG-URL -> رابط صورة مؤشر الماوس.

كيفية استخدام أيقونات الخطوط

Abdo Salem | الأربعاء, ديسمبر 24, 2014 | 2 تعليقات

استخدام أيقونات الخطوط

أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات الخطوط هي بديل للصور, وهذه هي طريقة استخدام أيقونات الخطوط, سوف نستخدم أيقونات خط Font Awesome, لكن يمكنك استخدام أي خط أيقونات آخر.

كيفية استخدام أيقونات الخطوط

1 - ضع هذا الكود فوق </head>.

<link href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel = "stylesheet"/>

2 - ضع أي كود أيقونة من هذه الأيقونات في أي مكان تريده, مثال :

<i class="fa fa-file-text-o"></i> هذا النص هو مثال لنص يمكن أن يستبدل

- وسيظهر لك هكذا :
هذا النص هو مثال لنص يمكن أن يستبدل

ما هي أيقونات الخطوط ؟

Abdo Salem | الاثنين, ديسمبر 22, 2014 | 2 تعليقات

ما هي أيقونات الخطوط ؟

أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات الخطوط هي بديل للصور.

مميزات أيقونات الخطوط

1 - سهلة الاستخدام.
2 - لا تأخذ مساحة من الإستضافة.
3 - عالية الجودة مهما تم تكبيرها أو تصغيرها.
4 - يمكن تلوينها بسهولة باستخدام الـCSS.

أيقونات الخطوط المتوفرة مجانا

1 - Font Awesome.
2 - Open Iconic.
3 - Entypo.

كيفية تصميم أيقونة مسطحة على الفوتوشوب

Abdo Salem | الأحد, ديسمبر 14, 2014 | 0 تعليقات

كيفية تصميم أيقونة مسطحة على الفوتوشوب

أسهل طريقة لتصميم أيقونة مسطحة على الفوتوشوب, في الدرس سيتم تصميم أيقونة لموقع الفيسبوك.

ما هو التصميم المسطح - Flat Design ؟

Abdo Salem | السبت, ديسمبر 06, 2014 | 0 تعليقات

ما هو التصميم المسطح - Flat Design ؟

التصميم المسطح, هو أسلوب جديد من أساليب التصميم التي أنتشرت مؤخرا على باقي أساليب التصميم, وليس التصميم الجرافيك فقط, وإنما في مجالات أخرى كتصميم مواقع الويب وتطبيقات الهواتف والبرامج...إلخ, هذا التصميم الذي باختصار هو تصميم عرف ببساطته واستخدامه لألوان موحدة وبعده عن الحافات, الظلال, التدرجات في الألوان...إلخ.

مميزات التصميم المسطح

يتميز التصميم المسطح عن باقي أساليب التصميم الأخرى بالبساطة وقلة التفاصيل والعناصر والمؤثرات داخل التصميم, ويتميز يسهولة قراءة التصميم والنظر إليه.

أساسيات التصميم المسطح

الإبتعاد عن التأثيرات.
التصميم البسيط.
عدم استخدام تدريج الالوان.
استخدام الوان مسطحة.
عدم استخدام الظلال, استخدم فقط الظل الطويل.
عدم استخدام الحواف في التصميم.

5 نصائح لتصميم شعار ناجح

Abdo Salem | الأحد, نوفمبر 16, 2014 | 4 تعليقات

5 نصائح لتصميم شعار ناجح

إن تصميم شعار لا يتطلب خيال واسع وحس فني وبراعة في الرسم فقط.. بل هو يتطلب السير على خطواط صحيحة حتى يخرج الشعار بالشكل السليم والمعبر, حتى يوصل رسالة واضحة عن محتوى الموقع أو المدونة التي تم تصميم الشعار لها.

1. البساطة في الألوان

ليس غريبا أن تجد أغلب شعارات المواقع الكبيرة تستخدم لون أو لونين فقط, الإكثار من الألوان في الشعار يشوش على الناظر وقد يجعل رؤيته وفهمه صعبا.. لذلك عليك أن تحرص أن يكون الشعار بلون أو لونين أو ثلاث ألوان فقط.

2. جودة الشعار

إن أفضل الشعارات هي التي يمكن رؤيتها بحجم صغير أو كبير وتكون بنفس الدقة والوضوح, أي يجب أن يكون الشعار مرن, يمكن تصغيره أو تكبيره بكل سهولة دون أن تختفي معالم الشعار.

3. سهولة القراءة

إن صعوبة قراءة وفهم مضمون الشعار لا يعطي للشعار الناجح التميز والإحترافية.. بل يعطيه الفشل, إن الشعارات الناجحة هي الشعارات التي يمكنك فهمها وقراءة النص المكتوب فيها مباشرة من أول نظرة.. كما في شعار جوجل المثل العملي للبساطة وسهولة القراءة والتميز.

4. فريد ومميز

كي يتذكر الناس شعارك وينطبع في مخيلتهم من أول نظرة, إجعله بارزا ومميزا ومصمم بإبداع ومعروض بطريقة مبتكرة.

5. بساطة التصميم

البساطة في تفاصيل التصميم, فكلما زاد تعقيد الشعار كلما كان مبهما للناظر أكثر, والشعارات الناجحة هي الشعارات البسيطة.

كيفية جعل موقعك متوافق مع جميع الأجهزة - Responsive

Abdo Salem | السبت, أكتوبر 04, 2014 | 3 تعليقات

جعل موقعك متوافق مع جميع الأجهزة - Responsive

إذا كنت تمتلك موقع فأكيد زوارك يدخلون موقعك بالهاتف أو الأجهزة اللوحية, يعني يجب أن يكون موقعك متوافق مع جميع الأجهزة - Responsive ليظهر جيدا في الهاتف والأجهزة اللوحية.
بعض الأشخاص يظنون أن جعل مواقعهم متوافقة مع جميع الأجهزة - Responsive صعب, لكنه سهل جدا لكن يحتاج بعض الجهد لأنك كل ما ستقوم به هو إنشاء نسخة لكل نوع من أجهزة التصفح عن طريق التعديل على ملف الـCSS الخاص بموقعك.

كيفية جعل موقعك متوافق مع جميع الأجهزة - Responsive

1 - ضع هذا الكود فوق </head>.

<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/>

2 - ضع هذا الكود في ملف الـCSS الخاص بموقعك.

@media screen and (max-width:1024px) { CSS FOR Max WIDTH 1024Px }
@media screen and (max-width:768px) { CSS FOR Max WIDTH 768Px }
@media screen and (max-width:640px) { CSS FOR Max WIDTH 640Px }
@media screen and (max-width:480px) { CSS FOR Max WIDTH 480Px }
@media screen and (max-width:320px) { CSS FOR Max WIDTH 320Px }

3 - قم بتغيير :
- CSS FOR Max WIDTH 1024Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 1024Px.
- CSS FOR Max WIDTH 768Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 768Px.
- CSS FOR Max WIDTH 640Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 640Px.
- CSS FOR Max WIDTH 480Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 480Px.
- CSS FOR Max WIDTH 320Px -> الـCSS الخاص بالشاشات التي عرضها أقل من 320Px.