تصميم جديد web 2.0

شعار جديد لموقع وهمي 🙂

[css] طرق التحكم بالخط

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

أترككم مع الدرس

أخي المطور..
إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم.. سأتحدث عن كيفية التحكم بالخط بالـ css وسأشرح لك أشهر أوامره
1- نوع الخط

بإمكانك التحكم بنوع الخط بواسطة القيمة font-family ..

مثال:

body { font-family: Arial, Helvetica, Tahoma; }

2- قياس الخط

بإمكانك التحكم بقياس الخط بواسطة القيمة font-size ..
وهناك عدّة طرق للتحكم بقياس الخط، أذكر منها طريقة الكتابة، والتي تحتوي على عدّة قيم..
مثال على جميع القيم :

body {
font-size: xx-small;
font-size: x-small;
font-size: smaller;
font-size: small;
font-size: medium;
font-size: large;
font-size: larger;
font-size: x-large;
font-size: xx-large;
}

3- شكل الخط

بإمكانك التحكم بشكل الخط بواسطة القيمة font-style ..
وله 3 أنواع من القيم هي:

* normal : وهذا لجعل شكل الخط عادي كما هو
* italic : وهذا لجعل الخط مائلاً
* oblique : وهذا لجعل الخط مائلاً أيضاً

مثال على جميع القيم :

 body {
 font-style: normal;
 font-style: italic;
 font-style: oblique;
 }

4- لون الخط

بإمكانك التحكم بلون الخط بواسطة القيمة color ..
وهناك طرقتان للتحكم بلون الخط:

* بالإسم : بحيث تكتب اسم اللون
* بالرمز : بحيث تكتب رمز اللون

مثال على القيمتين :

body {
color: green;
color: #00FF00;
}

5- التباعد بين الأحرف

بإمكانك التحكم بتباعد الأحرف عن بعضها بواسطة القيمة letter-spacing ..

مثال :

body { letter-spacing: 1em; }

6- المسافة بين الكلمات

بإمكانك التحكم بالمسافة بين الكلمات بواسطة القيمة word-spacing ..

مثال :

body { word-spacing: 5em; }

7- تزيين الخط

بإمكانك التحكم بزينة الخط بواسطة القيمة text-decoration ..
وله 5 أنواع من القيم هي:

* none : وهذا لجعل الخط عادي كما هو
* underline : وهذا لإضافة خط أسفل الكلمة
* overline : وهذا لإضافة خط أعلى الكلمة
* line through : وهذا لإضافة خط على الكلمة
* blink : وهذا لجعل الخط يومض (يظهر ويختفي)

مثال على جميع القيم :

body {
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
}

و هذا مثال عن كل هذه الخصائص
http://www.almashroo.com/articles/examples/css/font1/example.html
ويمكنك تحميل الملف من هنا

هذه هي أشهر خصائص الخط في css

photoshop vs gimp

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

علي الابتعاد على الفوتوشوب حتى اشعار آخر.

الموقع الرسمي للـgimp

دروس gimp

عيد مبارك…

عيد مبارك و كل عام وأنتم و الأمة الاسلامية جمعاء بألف خير ان شاء الله