Worled Animy ♥
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


Worled Animy ♥
 
الرئيسيةالبوابةأحدث الصورالتسجيلدخول

 

 ماهي تقنيات css وكيف استخدمها؟

اذهب الى الأسفل 
كاتب الموضوعرسالة
MS.SAMAR
مصممة
مصممة
MS.SAMAR


عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

ماهي تقنيات css وكيف استخدمها؟ Empty
مُساهمةموضوع: ماهي تقنيات css وكيف استخدمها؟   ماهي تقنيات css وكيف استخدمها؟ Emptyالثلاثاء يناير 12, 2016 11:04 am

السلام عليكم ورحمة الله وبركاته
’’
سوف اشرح لكم ماهي تقنية (css) وكيف التعامل معاها
.
تعريف؟ css
تقنية Css مختصره من  Cascading Style Sheets 
وتقنية css ليست بلغة برمجية أنما تقنيه كما يخطئ البعض انها لغة برمجية. 
تهتم بشكل كبير وبشكل أوسع على أشكال تصميم وأنسيابات صفحات الويب,كمثل 
أنماط الصفحه وشكلها من الألوان والخطوط والخلفيات والصور وغيرهم ..

ما الفائدة منها؟
يمكنك من خلاله تشخيص تصميم كامل لمنتداك
تجعل منتداك خفيفا وفي غاية الدقة من الجمالِ
هل تعمل علي جميع المتصفحات؟
للآسف لاتعمل هذه التقنية علي جميع المتصفحات ,, ليس السبب من القنية
السبب ان بعض المتصفحات لاتقبلها ,, تعمل مع اشهر المتصفحات العالمية
اين اجد مكانها في المنتدي الخاص بي؟
احلي منتدي وفرت عليك مجهود كبير ولن تحتاج ان تكون خبير ِلكي تعرف مكانها
لوحة الادارة - مظهر المنتدي -ألوان - ورقة تصميم css
هل استطيع وضع اكواد من نوع html بداخلها؟
لايمكنك وضع اكواد هتميل بداخل هذه الورقة المشخصة
يجب ان تربط بين الاكواد بطريقة صحيحة لكي تعمل بشكل سليم
طريقة وضع css في اكواد html
هناك الكثير ممن يريد انشاء صفحة html وتطبيق كود css فيها ولكنه لا يريد 
استخدام اعلى واسفل المنتدى (اي صفحة فارغة) ولكن اكواد ورقة css المذكورة 
لا تطبق الا على الصفحات المُستخدم فيها أعلى وأسفل المنتدى في هذه الحالة

الحل موجود :
ضع هذا الكود في الصفحة المرادة 


الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
<style type="text/css""> هنا كود css المراد تعميمه على صفحة html</style>

ماذا يحدث لو وضعت كود خطاء بداخلها؟
الخطاء الشائع عندما مثلا تضع كود هتميل بداخلها يظهر لك هذا الخطاء
اقتباس :
لقد تم تجديد ال CSS الخاص بك
ملاحظة:
أكواد ال html قد تسبب أخطاء في أوراق ال CSS
لقد تم القيام بعملية صيانة تم على إثرها حذف أكواد ال html التي قمت بإضافتها في ورقة ال CSS
ليس مشكل كبيرا ِسهل التخطي منه 
كل ماعليك ان تذيل الكود الذي وضعته
في اغلب الحالات الكود يتحذف تلقائي
..
الخطاء الثاني
اقتباس :
تم العثور على خلل
لقد قمنا بإيجاد عدد مختلف من "{" و "}". هذا يعني أن CSS الخاص بك قد لا يعمل و لن يظهر بشكل لائق في منتداك.

ننصحك بمراجعة الكود المستعمل.


ما هذا لاتقلق ِ هذا معناه انك وضعت كود غير كامل
كيف غير كامل ؟ نعم غير كامل تقنية الانسابية يجب ان تغلق وتفتح في نهاية الكود
مثال
اذا وضعت هذا الكود سوف يعمل بدون خطاء
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
.forum {تجريبي ;}

عندما ننسه ونترك هذه العلامة
} هذا معناه ان الكود ماذا مفتوح وليس مغلق
ونضع الكود هكذا

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
.forum {تجريبي;

هكذا يظهر لنا الخطاء ِكل ماعليك ان تعيد النظر في الكود
وتحاول ان تضع الناقص .. اذا لم تعرف اكتب موضوع يوضح طلبك
وان شاء الله خبرئنا لم يتئخروا عليكم بشئ
هل استطيع اكتب بجوار الكود اسمه عربي او انجليزي؟ 
نعم بالتاكد تسطيع ان تكتب فوق الكود اسمه لكي لاتنساه لكن بشروط
ان تعطية الامر كومنت ِ مثال
عندي كود ِلحذف عبارة عدل سابقا من قبل ِالخ
هذا هواه الكود

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
tr.post span.gensmall { display: none; }

انا عايز دلوك احط اسم الكود ازاي بهذا الامر يارفاق تضع او الكود

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
/*اسم الكود*/

يعني هيكون كده

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
/*اكود ِلحذف عبارة عدل سابقا من قبل*/    tr.post span.gensmall { display: none; }

وهكذا تستطيع ان تكتب اسماء جميع الاكواد في ورقة الانسابية




كيف احول الكود من صورة الي رمز لون؟
لم نفهمك !وضح اكتر لو سمحت
مثال ِ علي كود :[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
هذا هواه الكود

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
body{background-image:url('رابط الصوره');}

انا دلوك مش مش عايز احط صورة
عايز احول الكود ده تاني الي رمز لون
هتقولي ازاي دا كود ماتقدرش تعدل عليه ِلاء تقدر تعدل عليه
لكن تقدر بطرق الرابط والا اومر
background اخذت امر image : url
يعني هنحط صورة ِ
انا عايز اعطيها امر تاني ِينفع هنعطيها الامر لون
color:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
يعني الكود هيكون كده

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
body{background-color: #FF33CC;}


هما هما الكودين زي بعض ونفس العمل
بس الاول تقدر تحط صورة 
التاني تقدر تحط رمز كاخلفية بدل الصورة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
وهذا موقع يتح لكم اختيار اكواد الالوان [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
..




بعض الاومر الهامة يمكنكم استخدامها
.........
bodyline : هواه يستخدم في محاذة الصفحة وعمل لها حدود
body : هواه المتحكم في الصفحة مثل لون خلفية للصفحة
a img : امر هام يستخدم لعمل امر للصور
forumline: يستخدم في اعطاء اومر للفئات
cattitle : يتحكم في حجم اسم الفئات
forumlink : خاص بروابط الفئات
topictitle,h1,h2 : يتحكم في اسماء المواضيع
quote : خاص اقتبسات
copyright : خصاص بحقوق الملكية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] : االوجهة
postbody : في المواضيع والمشاركات
postdetails.poster-profile a img : صور البيانات الشخصية للاعضاء
table.forumline : لعمل اي شئ فوق الفئات
postbody img : يستخدم في عمل اي شئ للصور في المواضيع
.post-entry : المواضيع للنسخة invision
tr.post td : المواضيع للنسخة phpbb2
.post : المواضيع للنسخة phpbb3
........
ما هي الفائدة من معرفتي هذه الاومر؟
هذه الاومر تمكنك في التحكم بها 
وهذا شئ اساسيا في منتداك لايمكن تغير
مسار الاومر 

كيف استعمل هذه الاومر؟
مثلا نستخدم الامر body
يجب ان افتح واقفل الكود برموز
مثال

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
     اسم الامر{الامر    }

مثال علي الكود
هنعطية الامر صورة خلية
background
ثم نحدد الخلفية
اذا اردنا ان تعطي امر الخلفية صورة نعطيها الامر 
-image:url('رابط الصورة')
لكي تكون هكذا
background-image:url('رابط الصورة)
ثم نغلق الامر بهذا الرمز
;
تكون هكذا
background-image:url('رابط الصورة');
هكذا يسمي امر كامل مغلق
ثم نضع الامر الاقواس
ثم يبدو هكذ

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
body    {    background-image:url('رابط الصورة');     }


يمكنك تطبيق الامر علي جميع الاومر الاخري
وهكذا نكون حصلنا علي كود خلفية




الاومر التي يمكن استعمالها

Background- لعمل خلفية
يمكن اعطائعا اي امر من الاومر التالية
Color او image
لتكون هكذا مثلا
background-image:url('url imag');
او
background-Color:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط];
.............

text-align: محاذة النصوص 
يمكن اعطائعا اي امر من الاومر التالية
Center او Right او Left
توسيط ويمين وشمال مثال
text-aligncenter;
text-alignRight ;
text-alignLeft ;
مثال مثلا علي كود توسيط جميع المشاركات
هذا هواه الكود للنسخة الثانية

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
    tr.post td {         text-align: center;     }

يمكنك اعطائة اي امر مثلا تعطية الامر
Left يبدوا هكذا
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
    tr.post td {         text-align: Left;     }

اذا وضعنا تصبح جميع المشاركات علي اليسار

..........
ارجو أن يكون الشرح ومفيد ونال أعجابكم
والحمد الله الشرح من عملي احمد
مع التحية 


   التعديل الأخير من طرف
   [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
MS.SAMAR
مصممة
مصممة
MS.SAMAR


عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

ماهي تقنيات css وكيف استخدمها؟ Empty
مُساهمةموضوع: رد: ماهي تقنيات css وكيف استخدمها؟   ماهي تقنيات css وكيف استخدمها؟ Emptyالثلاثاء يناير 12, 2016 11:05 am

السلام عليكم ورحمة الله وبركاته 




سنشرح اليوم خصية {Position}
Position هو أحد الخصائص المثيرة في تقنية CSS ومن أهمها برأيي فمن خلالها يمكنك تقسيم وتوزيع الموقع وتتحكم فيه كالوحة الشطرنج!، خاصية أفضل وسيلة لتعلمها هي التطبيق والتجربة أكثر من مرة، والخاصية كما اسمها وظيفتها تحديد الموضع لأي عنصر موجود داخل صفحة العرض بنافذة المتصفح عن طريق إحداثيات خاصة لذلك في الإتجاهات top, right, bottom, left وهذه الخاصية لها 4 قيم فرعية أو مواضع للتحكم في العنصر ! 
آلخآصية = شرح لها ! .. 

static = إعتيادي ـ وفيه لا يمكن تحديد الموضع عن طريق إحداثيات التموضع ولا تؤثر أو تشاهد تأثيرها في حالة وضعها.
relative = يحدد فيه الموضع بالنسبه للعنصر الإعتيادي السابق ـ أي أن موضعه يُحَدَد نسبه الى الوضع الإعتيادي فهو تابع دائما ومتناسب مع أقرب العناصر له ويسمح بإستخدام إحداثيات التموضع.
absolute = وفيه يتم تعيين موضع العنصر بشكل مستقل عن أي عنصر آخر بالصفحة.
fixed = وهو نفس الموضع السابق absolute ولكن المضاف فيه إنه يكون ثابت في مكانه بحسب الإحداثيات المحددة له ـ بمعنى أنه لو حركت شريط التمرير بالمتصفح سيظل ثابت في مكانه مع تحرك العناصر الأخرى.
أما إحداثيات التموضع فهي كما قلنا حتى تتمكن من التحكم في كل عنصر وتحديد مكانة بالصفحة كما تريد وذلك عن طريق إتجاهين أو إتجاة واحد فقط حسب مايقتضيه التوزيع بإدخال قيمة التباعد بين كل جهه بوحدات القياس العادية أو بنسبة مئوية % ومثال على ذلك لو أخذنا عنصر بالصفحة بالمعرّف box# بالوضع absolute


top: مدى التباعد بين الحافة العليا وجسم العنصر.
right: مدى التباعد بين الجهه اليمنى وجسم العنصر.
bottom: مدى التباعد بين الحافة السفلى وجسم العنصر.
left: مدى التباعد بين الجهه اليسرى وجسم العنصر.



الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
#box {
 position: absolute;
 top: 50px;
 left: 120px;
}

الخاصية position هامة لعمل تصاميم أو توزيعات متقدمة ومنها الخدع مثل تداخل أكثر من عنصر في الصفحة وغيرها.. ولمزيد من التفصيل تابع معي شرح للقيم المختلفة وكيف تظهر كل حالة، وبالمثال هنا لدي 4 صناديق 
 تمثل المواضع كل منها يأخذ فئة class خاصة به ويشترك الجميع في نفس الأبعاد طول وإرتفاع مع تمييز كل منهم بلون للخلفية وحدود متقطعة. ثم مع كل صندوق وبواسطة خواص التموضع سوف أحدد موضع مختلف لكل منهم مع الإستعانة بإحداثيات خاصة ونبدأ بالحالة الأولي -تابع الصور التالية مع إفتراض أن خلفية الصناديق البيضاء هي نافذة المتصفح


static الوضع الإعتيادى ولم أحدد له إحداثيات للتموضع فتأثيرها لا يظهر كما قلنا، والعنصر مكانه الطبيعي جهة اليسار وفي حالة عكس إتجاه الصفحة للمواقع العربية كما أعتدنا يتحول جهة اليمين ’’بإختصار أي عنصر داخل الصفحة هو static‘‘

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

relative يحدد ويحسب فيه الموضع نسبه للعناصر الأخرى ـ أي أن موضعه يُحَدَد نسبه الى الوضع الإعتيادي فهو تابع دائما ومتناسب مع أقرب العناصر له ويسمح بإستخدام إحداثيات التموضع ’’يعني يحدد فيه مكان العنصر عن طريق قربه وبعده عن بقيه العناصر الأخرى‘‘

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

absolute الوضع الحر وفيه العنصر لا يتأثر بالعناصر الأخرى ويحدد مكانة بالصفحة بشكل مستقل، وفي هذه الحالة فهو يتعامل مع الشاشة أو نافذة المتصفح كلها ويبدأ الإحداثيات من عندها بأبعاد حقيقية.. لاحظ في الصورة كيف أصبح مكانة وظهر أعلى العنصر الإفتراضي وكأنه غير موجود ’’لا يتاثر بالعناصر الأخرى ويحدد مكانه بإحداثيات نافذة المتصفح الحقيقة‘‘ في حال وضعك إياه داخل عنصر آخر يأخذ الوضع relative يتغير حينها نظام الإحدثيات، وبدلاً من النافذة المفتوحة كاملة تصبح الإحداثيات تابعة لهذا العنصر الجديد فقط وتحدد تبعاً له -أشبه بوضعك للعنصر داخل صندوق محكم ومن ثم حددت مكانه داخل هذا الصندوق!

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

fixed نفس الموضع السابق والمختلف إنه ثابت في مكانه بحسب الإحداثيات المحددة له، كبرت أو صغرت نافذة المتصفح أو تداخلت مع عناصر أخرى ثابتة، فمع تحريك شريط التمرير الجانبي دائماً تشاهد ذلك العنصر مكانه -غير مدعوم من متصفح IE6- ’’عنصر ثابت دائماً لا يتحرك مع شريط التمرير الجانبي أو تداخل عناصر أخرى معه‘‘

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

مثآل حى ! .. 

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


اتمنى الشرح وآضح .. بالتوفيق ! ..
الرجوع الى أعلى الصفحة اذهب الى الأسفل
MS.SAMAR
مصممة
مصممة
MS.SAMAR


عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

ماهي تقنيات css وكيف استخدمها؟ Empty
مُساهمةموضوع: رد: ماهي تقنيات css وكيف استخدمها؟   ماهي تقنيات css وكيف استخدمها؟ Emptyالثلاثاء يناير 12, 2016 11:05 am

السلام عليكم ورحمة الله وبركاته 




سنشرح اليوم خصائص  margin, padding, border



Layout وتعنى التخطيط او تقسيم الصفحات، وقبل ان نبدأ لابد من تذكر كيف كان يتم التخطيط في html .. فعندما كنا نريد تخطيط الموقع كنا نعتمد إعتماد كلي على الجدوال في ذلك وبالشكل الذى نراه مناسب، ولكن بعد أن ظهرت المتصفحات التى تدعم المعايير القياسيه مثل Firefox بشكل سليم ومتوافق مع منظمة الويب التى تدعو للإستغناء عن الجداول في التصميم والتحول الىcss الى جانب الكثير من المواقع والمنظمات التى تدعو لإتباع المعايير القياسية في التصميم، كانت الحاجه للإستخدام طريقه جديدة في التخطيط اكثر مرونه وسهوله توافق المعايير القياسية وتظهر بشكل سليم على كافه المتصفحات.
ولمعلوماتك الجداول عندما ظهرت أول مرة في html كانت لغرض واحد فقط هو عرض البيانات المجدولة كالإحصائيات، ثم بعدها ظهرت خاصيه إخفاء الحدود  وإستعان بذلك المصممون وإستخدمت الجداول بشكل جديد وادرج فيها الصور والرسوم...الخ ولازالت حتى اليوم تستخدم الجدول بشكل كبير في التخطيط وبالمواقع التى تستخدم الصور بشكل كبير.

لن أفرد أكثر من ذلك حول عيوب التصميم عن طريق الجدوال ومزيا الطرق الحديثه لنعطي المجال أكثر حول التطبيق. حديثنا اليوم يتلخص في الصورة التاليه :

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وهو تخطيط يوضح شكل الصفحه وحدودها
 content edge: المحتوى وهو كل ماتحويه الصفحه من نصوص او صور ...الخ وتحيط بها البطانة من كافة الجوانب.

padding edge: وهى البطانة وتحيط بها الحدود من كامل الجهات ، لتترك مسافة بين الجسم والمحتوى الداخلي ـ وإذا تم تعينها الى 0 سوف يلتصق محتوى الصندوق بالحافة ( وهو بدايه الهامش ) بدون اى فرغات.
border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.
margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.
وبالامثلة سنوضح الان الـ margin و padding .


الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
in-top: <length> إدخل قيمة الهامش العلوي.
margin-right: <length> إدخل قيمة الهامش الإيمن.
margin-bottom: <length> إدخل قيمة الهامش السفلي.
margin-left: <length> إدخل قيمة الهامش الإيسر.
margin: <top><right><bottom><left> يتم تحديد الأبعاد مرة واحدة بنفس الأمر.
margin: <all directions> في حالة كانت القيمة واحده لجميع الإتجاهات تختصر وتكتب مرة واحده فقط.
margin: <top/bottom><right/left> إختصار إذا كان يشترك إتجاهين بنفس القيمة أفقي أو رأسي.
margin: <top><left/right><bottom> إختصار إذا كان يشترك 3 إتجاهات بنفس القيمة.
[size]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

كما شاهدت فالـ margin إذا حُددت لأحد عناصر الصفحه ستكون هى المساحه التى تحيط بالصندوق من كافة الجهات وتفصلها عن بقيه العناصر الأخرى ـ ويعرّف داخل css و يكتب بالشكل التالي :

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
[/size]
الكود:
#new { margin: 10px 10px 5px 10px; }
/* OR */
#new {
 margin-top: 10px;
 margin-right: 10px;
 margin-bottom: 5px;
 margin-left: 10px;
}
/* OR */
#new { margin: 10px 10px 5px; }

/*******************************************/

#new2 { margin: 10px 10px 10px 10px; }
/* OR */
#new2 { margin: 10px; }
[size]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وتعرّف الخاصية داخل css و تكتب بالشكل التالي :
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
[/size]
الكود:



padding-top: <length> إدخل قيمة الهامش العلوي.
padding-right: <length> إدخل قيمة الهامش الإيمن.
padding-bottom: <length> إدخل قيمة الهامش السفلي.
padding-left: <length> إدخل قيمة الهامش الإيسر.
padding: <top><right><bottom><left> يتم تحديد الأبعاد مرة واحدة بنفس الأمر.
padding: <all directions> في حالة كانت القيمة واحده لجميع الإتجاهات تختصر وتكتب مرة واحده فقط.
padding: <top/bottom><right/left> إختصار إذا كان يشترك إتجاهين بنفس القيمة أفقي أو رأسي.
padding: <top><left/right><bottom> إختصار إذا كان يشترك 3 إتجاهات بنفس القيمة.
[size]


الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
[/size]
الكود:
ew { padding: 10px 10px 5px 10px; }
/* OR */
#new {
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
}
/* OR */
#new { padding: 10px 10px 5px; }

/*******************************************/

#new2 { padding: 10px 10px 10px 10px; }
/* OR */
#new2 { padding: 10px; }
[size]

نأتي الأن الى الـ border وهى الحدود ـ وتعيين عن طريق 3 خواص فرعية لها 
(السمك ـ النمط او شكل الحد ـ اللون)
 border-width السمك ويعين بالشكل التالي:


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

ويعرّف داخل css ويكتب هكذا:

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
[/size]
الكود:
border-width: thin سمك الحدود الإفتراضي رفيع ، متوسط ، سميك وذلك لجميع الإتجاهات
border-width: medium
border-width: thick
border-top-width: <length> إدخل سمك الحد العلوي
border-right-width: <length> إدخل سمك الحد الأيمن
border-bottom-width: <length> إدخل سمك الحد السفلي
border-left-width: <length> إدخل سمك الحد الإيسر
border-width: <length all directions> إدخل سمك الحدود مختصر لجميع الإتجاهات
border-width: <top><right><bottom><left> إدخل سمك الحدود، مفصل لجميع الإتجاهات
border-width: <top/bottom><right/left> مختصر عندما يشترك إتجاهين في القيمة
[size]


الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
[/size]
الكود:

#new { border-width: 10px 10px 5px 10px; }
/* OR */
#new {
 border-top-width: 10px;
 border-right-width: 10px;
 border-bottom-width: 5px;
 border-left-width: 10px;
}
/* OR */
#new { border-width: 10px 10px 5px; }

#new2 { border-width: 10px 10px 10px 10px; }
/* OR */
#new2 { border-width: 10px; }
[size]

- border-color اللون ولن يختلف في طريقة الكتابة عما سبق راجع فقط الدرس السابق لتتذكر خواص الألوان في css
- border-style وهو شكل الحد نفسه وما يلي جميع الأشكال التى يمكن ان تجدها في css2

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


[/size]
اتمنى الشرح وآضح .. بالتوفيق ! ..
الرجوع الى أعلى الصفحة اذهب الى الأسفل
MS.SAMAR
مصممة
مصممة
MS.SAMAR


عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

ماهي تقنيات css وكيف استخدمها؟ Empty
مُساهمةموضوع: رد: ماهي تقنيات css وكيف استخدمها؟   ماهي تقنيات css وكيف استخدمها؟ Emptyالثلاثاء يناير 12, 2016 11:06 am


نبدأ اليوم على بركة الله عز وجل بشرح خاصية في css
الخاصية ربما يعرفها الكثير، ولكن لها عدة مزايا، ويواجه البعض مشاكل عدة فيها، سيتم شرح الخاصية بالكامل، من مميزات وخصائص ومشاكل يواجهها البعض في هذه الخاصية، وهي خاصية z-index

تستخدم خاصية z-index لترتيب الطبقات فوق بعضها البعض، 
ولكن لا قيمة ولا نتيجة لها في حال عدم استخدام خاصية position مع العنصر المراد إعطائه خاصية z-index، سيتم شرحها بالتفصيل

سنقوم بإنشاء div عدد 2 بالشكل التالي:

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
<div class="box1"></div>
<div class="box2"></div>

خصائص css:
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
div{
  width: 200px;
  height: 200px;
}
div.box1{
  background-color: #d50000;
}
div.box2{
  background-color: #4a148c;
}

ستكون النتيجة بالشكل التالي:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الآن سنعطي خاصية z-index للعنصرين، بحيث يكون الـ div.box2 فوق الـ div.box1، وسنلاحظ النتيجة:
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
div.box1{
  z-index: 1;
}
div.box2{
  z-index: 2;
}


في الكود السابق، من المفترض أن يصبح العنصر div.box2 فوق العنصر div.box1، ولكن عندما نشاهد النتيجة فلن يتغير أي شيء عن السابق، لماذا؟
لأن العناصر لا تحمل خاصية position، أي كما ذكرنا في السابق، أن خاصية z-index لا تعمل إلا مع خاصية position

لذا سنعطيها الخصائص التالية:

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
div{
  position: absolute;
}

ستكون النتيجة كالتالي:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الآن لتوضيح الخصائص السابقة، ينغير مكان كل عنصر، 
كود css:

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
div.box1{
  left: 100px;
  top: 100px;
}
div.box2{
  left: 200px;
  top: 200px;
}

ستكون النتيجة كالتالي:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
إلى هنا وصلنا لعمل خاصية z-index.

الآن سنشرح الجزء الأهم، والذي يواجه الجميع مشكلة فيه، سنشرحها بتطبيق عملي، 
الآن سنضيف عنصر جديد div.box1-2 داخل العنصر الأب div.box1

ليصبح الكود كالتالي:


الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
<div class="box1">
  <div class="box1-2"></div>
</div>
<div class="box2"></div>
[size]

كود css الخاص به سيكون بالشكل التالي:

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
[/size]
الكود:
div.box1-2{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: #00bfa5;
}
[size]

ستكون النتيجة بالشكل التالي:[/size]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
الآن المشكلة التي تواجه البعض، هو أنه يريد إن يجعل العنصر 
div.box1-2 فوق كل شيء، فيعطيه الخاصية بالشكل التالي:
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
div.box1-2{
  z-index: 9999;
}

رغم أننا أعطينا الخاصية z-index أعلى قيمة، أي من المفترض أن تكون فوق كل العناصر، ولكن سنلاحظ أن النتيجة أن الترتيب بقي كما هو 
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
للتوضيح أكثر
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



الترتيب النهائي الذي سيظهر لنا على المتصفح كالتالي:
1- div.box1
2- div.box1-2
3- div.box2

ما السبب أن العنصر div.box1-2 لم يكن أعلى العناصر من حيث الترتيب، رغم حصوله على أعلى قيمة؟
السبب واضح، لأن العنصر div.box1-2 موجود داخل أب وهو div.box1 له ترتيب أقل من العنصر الآخر الموجود فوق كل شيء وهو div.box2

النتيجة النهائية للعمل من خلال الرابط التالي: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]




[size=16]تم الشرح بواسطتى
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
المتطوع المساعد

ارجوا ان اكون قد افدتكم
انتهي الموضوع

[/size]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
MS.SAMAR
مصممة
مصممة
MS.SAMAR


عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

ماهي تقنيات css وكيف استخدمها؟ Empty
مُساهمةموضوع: رد: ماهي تقنيات css وكيف استخدمها؟   ماهي تقنيات css وكيف استخدمها؟ Emptyالثلاثاء يناير 12, 2016 11:06 am


السلام عليكم ..
كيف حالكم جميعاً , ان شاء الله الجمـيع بخــير ..
اليوم حبيت اشرح طريقة استخدام الـ Long Shadow ( الظل الطويل ) بطريقة css ..

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

المـوقع المستخدم في الشرح :: 
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
عند فتح الموقع سنلاحظ على اليسار قائمة تساعدنا على تصميم الظل المناسب لنا ..

1. لون الخلفية 
2. حجم الظل 
3. حجم الشفافية 
4. حجم التلاشئ
5.لون المربع 
6.حجم ظل النص الي بداخل المربع
7.حجم شفافية ظل خط الي بداخل المربع
8. حجم تلاشئ النص في المربع 
9. لأختيار المربع بدون خلفية 
10. يظهر لنا الكود لنستخدمه 

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

نضغط على اظهار الكود Show Code لنرئ كيف يعمل 
1. التعريف الخاص بالخلفية
2. التعريف الخاص بالمربع


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان لو جربنا نختار النص فقط سنلاحظ بأن المربع اصبح كبيراً واختفت الخلفية 

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

نشأهد الكود الخاص بالنص فقط بدون خلفية 
اضغط على اظهار الكود Show code 
1. ستلاحظ بأن هناك التعريف الخاص بالمربع فقط 


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

غيرت الاعدادت على اليسار ولاحظ كيف تغير الظل في المربع 
1. غيرت حجم الظل الخاص بالنص
2. غيرت الشفافية الخاصة بظل النص 
3. غيرت التلاشئ 


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان نجرب نغير لون الخلفية ..
1. نضع اللون المناسب لنا 
2. ستلاحظ التغيير على الخلفية على اليمين


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان نجرب تغير الخلفية 

1. نلغي خاصية النص فقط ليظهر لنا خيارات الخلفية 
2. نغير لون الخلفية ونلاحظ التغيير 


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان دعونا نأخذ الكود الى الدريم ويفر ( يمكنك استخدام المحرر المفضل لك ) 
ونبداً باستخدامه لتصاميمنا 


نضغط على اظهار الكود Show code 
1. ننسخ التعريف الخاص بالمربع بدون نسخ .shape{} لاننا سنستخدم الديف الخاص بنا 


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان نذهب الى الدريم ويفر ونضيف ديف جديد ونربطه بكلاس .. 

1. اضفت الكلاس الخاص بالهيدر 
2. اضفت الديف في منطقة Body 
3. نلاحظ بظهور النص بدون تأثير 


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان نضيف التعريف الي نسخناه من الموقع ونضعه في تعريف الهيدر 

1. نلصق الكود 
2. نلاحظ التغيير


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



ملاحظة 1 : يمكنك التعديل على الالوان وحجم النص كما تريد 
ملاحظة 2: يمكنك التعديل على الكود في الموقع ليتناسب مع تصميمك وتقوم بنسخه الى تعريف الكلاس المطلوب ..

صورة مثال حى 

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


الكود المستعمل فى تلك الاشكال ؟
يعمل على : ( phpBB2-PunBB-Invision)

الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
.postbody{
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }




تم الشرح بواسطتى
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
المتطوع المساعد







ارجوا ان اكون قد افدتكم
انتهي الموضوع


الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
ماهي تقنيات css وكيف استخدمها؟
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
Worled Animy ♥ :: المنتديات التَقنية والتَطويريه ♫ :: طَوري مُنتدَاك ↓✿-
انتقل الى: