السبت، 1 فبراير 2014
9:41 ص

•●| ~ [ المكتبة الشاملة للمصمم العربي ♥ نماذج ودروس وملحقات ] ~ |●•


السلام عليكم إن الحمد لله نحمده ونستعينه ونستغفره
 ونعوذ بالله من شرور أنفسنا ومن سيئات أعمالنا من يهده الله فلا مضل له ومن يضلل فلا هادي له
وأشهد أن لا إله إلا الله وحده لا شريك له وأشهد أن محمدًا عبده ورسوله.. اما بعد....
الإخواني الأعضاء وزوار منتدى تصاميم المواقع أحببت أن أقدم لكم هذه المكتبة
التي تلبي مختلف حاجيات المصمم
  خطوط تصميم design fonts                                                               
هذا الرد فقط
  الأيقونات للمصميمن icon for designer
هذا الرد فقط
  الأزرار سي اس اس 3 buton css3
هذا الرد فقط
  خلفيات وباترن backgroun & patrren
هذا الرد فقط
  مربعات البحث search form css3
هذا الرد فقط
  سلايدرات sliders
هذا الرد فقط
  ناف بارات مكودة جاهزة navbar
هذا الرد فقط
  قوالب فارغة مجهزة لبدأ التصاميم
هذا الرد فقط
  معدات وتقنيات css3 & jquery tools
هذا الرد فقط
  إضافات مهمة جدا للمصميمن extension-pluginهذا الرد فقط
  مشغل ملتمديا HTML5 فيديو والأوديو
هذا الرد فقط
  الإقتراحاتكم واستفسارات والتبليغ عن الروابط الغير شغالة
هذا الرد فقط
01:53 - 2013/10/19: تم تغيير النص بواسطة moad04
moad04
 00:34 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 

أولا بعض الخطوط الشائعة ومستعملة بكثرة

Hacen Fonts
GE_SS_Two_Medium
Droid Kufi-Regular
طرق الأستخدتم :
في ملف css نضع الكود الأتي
نضع أي إسم نريد في فونت فاملي تم نضع رابط ملف الخط
الأن و بعد عناء و إنتظار طويلين أصدرت شركة جوجل عبر خدمتها فى إستضافة الخطوط جوجل فونتس 6
 خطوط عربية تجريبة و ذلك للإستخدام فى المواقع العربية و هم

طريقة إستخدام الخطوط غوغل 
أولا: إستدعاء الخط
هناك طريقتين لإستدعاء الخطوط الأولى عن طريق كود
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Scheherazade”>
و فى هذه الحالة يوضع الكود بعد فتح كود <head>
 فى المواقع الثابتة أما فى الورد بريس فيتم وضعه بعد كود <head>
 فى ملف ال header.php الخاص بالقالب المستخدم
و الثانية عن طريق كود
@import url(htp:/  /fonts.googleapis.....com/earlyaccess/scheherazade......css);
ملحوظة المرجو تصحيح الرابط قبل الإستعماله لأنه يظهر كوصلة ممنوعة لداك قمت بتشويهه
و فى هذه الحاله يوضع الكود داخل ملف الستايل شيت الخاص بالقالب.
ثانيا : إستخدام الخط فى الأماكن المطلوبة مثل ال h1 أو الفقرات
و ذلك عن طريق ملف الستايل حيث توضع عائلة الخط كالتالى font-family: ‘Scheherazade’, serif;
 
مميزات خطوط جوجل للويب عن إستخدام خاصية @font-face المدعومة من css3
1- سهولة الإستخدام و التركيب
2- دعم كل المتصفحات لها
3- الخطوط مستضافة على موقع جوجل ولا تحتاج لإستضافتها فى موقعك
4- دعمها لتأثيرات ال css3 الجديدة على الخطوط
مثل shadow-multiple  و font-effect-3d و المزيد يمكنك زيارة صفحة التأثيرات من هنا
 ( ملحوظة :هذه الخاصية قيد التجربة و ليست مدعومة من قبل جميع المتصفحات )
عيوب إستخدام خطوط جوجل :
- تقوم بعمل حجب للداتا لحين تحميل الخط و تظهر المشكله بوضوح
 عند تحميل أكثر من خط فى نفس الوقت و للتغلب
 على هذه المشكلة أتاحت لنا جوجل تحميل كل الخطوط فى كود واحد
مثال: http :  //fonts.....googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
ملحوظة المرجو تصحيح الرابط قبل الإستعماله لأنه يظهر كوصلة ممنوعة لداك قمت بتشويهه
حيث نستخدم كود الإستدعاء العادى مع الفصل بين أسماء الخطوط أو الفاميلي بحرف “|”
( ملحوظة ضم إستدعاء أكثر من خط فى كود واحد غير مدعوم من قبل كود الإستدعاء @import)
كيفيه جعل الخط عريض أو مائل :
عن طريق إضافة كلمة bold الى اسم العائلة مثال
http    :    //   fonts........googleapis.......com      /    css?family=Tangerine:bold,bolditalic
ملحوظة المرجو تصحيح الرابط قبل الإستعماله لأنه يظهر كوصلة ممنوعة لداك قمت بتشويهه
و هذا هو جدول بالخواص و اكوادها

moad04
 00:35 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 
http://im34.gulfup.com/gxci9.png">



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

تحميل 

moad04
 00:49 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 


السلام عليكم الإخواني من جديد أولا فيل وضع أي شيئ أرجو أن تتفضلو بمشاهدة
الشرح لطريقة الأنشاء بوطونات الإحترافية بكل سهولة عن طريق موقع http://www.cssbuttongenerator.com


بعض النماذج
1
CSS Button Styles

2
CSS Button Styles


3
CSS Button Styles


4
CSS Button Styles


5
CSS Button Styles


6
CSS Button Styles


7
CSS Button Styles


8
CSS Button Styles


9
CSS Button Styles


10
CSS Button Styles

moad04
 01:04 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 



السلام عليكم الإخواني من جديد في هذا الرد ستجدون إضافة للفطوتوشوب تصم نحو 260 motif او pattrens
تستخدم كخلفيات متكررة في المواقع بحيث تعطي جمالية و اناقة للموقع

قبل دلك وضعت درس بسيط وسهل لطريقة توظيف باترن كخلفية لموقعك
جانب بسيط من الحزمة
web-design-patterns-small1
moad04
 01:05 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 


السلام عليكم الإخواني في هذا الرد مع درس جديد.
 هذا الدرس أن شاء الله سنتعلم طريقة إنشاء مربع محرك البحث search form ووصفه بالcss



مجموعة مختارة
moad04
 01:14 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 


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



تحميل ملفات العمل
نموذج الأخر


moad04
 01:16 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 


 نماذج بسيطة
CSS3 Animated Dropdown Menu


Dark CSS3 Menu Tutorial


demo_menu


demo_menu










moad04
 01:17 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 
السلام عليكم الإخواني في هذا الرد وضعت لكم فيه منصة عمل جاهزة لبدأ مشروعك بسهولة
 وضعت لكم الأكواد الصحيحة في المكان الصحيح


تحميل الملف
moad04
 01:20 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 
السلام عليكم الإخواني في هذا الرد وضعت لكم تقنيات جميلة وجديدة يمكن الإستعمالها في المواقع .....)
ستكون كالتالي طبعا بعض الدروس للأخ مميز سفيان
دَرْس عَمَلْ Lightbox بَسِيطة بالــ Jquery
‘‘دَرْس عَمَل مَعْرِض Gallery‘‘ بِالــCSS3
درس عمل معرض صور بتأثير CSS3
دَرْس التَّعَامُل معَ الـKeyframes بالـCSS3
إنشاء شريط متحرك متقدم ووصفه بcss + هدية بالداخل
۩••◄ | درس | تغير لون الصفحة دون الإعادة تحميلها style switcher►••۩
[ TUTORIAL ] شَرْحْ عَمَلـــــ وَ تَكْوِيد Accordion بالجِكْوِرِي ،،
طبعا مارأيناه سابقا دروس موضوعة سابقا لكن ما الجديد ؟؟؟ لاتنزعج اخي تفضل 
هذاالدرس حول استخدام موقع jquery user interface

moad04
 01:28 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 


 
إضَآفَةٌ مُهِمةً لِمُصَمِّمِي آلْمَوآقِعْ عَلَى الــ Mozilla firefox
للأخ  Soufianess
السلام عليكم الإخواني في هذا الرد أقدم لكم الإضافات لازم تكون عندكم لتسهيل عملكم في برمجة وتطوير المواقع
1 - FireBug Lite

تمكنكم هذه الإضافة من التحقيق في أكواد وستايلات أي موقع كيفما كان لكنها كأي إضافة لاتعمل على المواقع local

2 - Resolution Test  

تمكنك هذه الإضافة الرائعة من تجريب موقعك على عدة الأحجام resolution دون اللأجوء الى
إعدادت النظام وتغير حجم الشاشة لأن دلك فعلا يكون مزعجا


3 - Aviary Screen Capture
تمكنك هذه الخاصية أخد صور كاملة للموقع من أول عنصر الى اخرعنصر مع العديد من خصائص وثأتير كما هو
موضح في الصورة


4 - Chrome Sniffer
تمكنك هذه اإضافة من معرفة السكريبت أو framwork المستعمل في الموقع الهدف


5 - SEO Site Tools
تمكنك هذه الإضافة من الحصول على معلومات حول ترتيب الموقع والإحصائياته ومعلومات كثيرة


6 - Validity
اكتشف الاخطاء التي ارتكبتها أثناء تكويدك للموقع


7 - Eye Dropper
لن أحتاج للشرح 

8 - MeasureIt!
لمعرفة الاحجام العناصر


9 - whatfont
 A screenshot showing WhatFont in action.
اعرف نوع حجم الإرتفاع ولون الخطوط

  
moad04
 01:30 - 2013/10/19معلومات عن العضورد على الموضوع بإضافة نص هذه المشاركةأضف رد سريع بإقتباس لهذا الرد 

السلام عليكم الإخواني الكرام اليوم سنرى طريقة جديدة وسهلة للحصول على مشغل فيدو واوديو
عن طريق الأوسمة ال html5



تحميل ملفات العمل
حدفت الملف فيديو وصوت يمكنكم إضافة ملفات من عندكم

0 التعليقات: