Archive for the ‘web 2.0’ Category

نصائح لتصميم شعارات web 2.0

مارس 25, 2009

السلام عليكم

لتصميم شعار web 2.0 لا نقول سهل او صعب فيلزمك الكثير من التفكير و التخطيط لتصل الى شعار ترضي به عميلك

نصائح:

-استمع الى عميلك جيدا حاول أن ترى الشعار كما يراه هو و أطلب منه أن يعطيك أمثلة لما يريد اذا أمكن .

-ابدأ التخطيط على ورقة وقلم (أرسم و عدل)

-لا تتسرع خذ كل وقتك في التخطيط.

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

-لا تستعمل الكثير من الألوان(لا تجعل التصميم قوس قزح) .

-استعمل ألوان قوية أو ضعيفة فأنت حر .

-طالع أعمال المصممين الآخرين و قلد التصاميم التي تعجبك(للتعلم فقط).

-وازن الشعار جيدا.

-اختر خطوط مناسبة.

-استعمل كحد أقصى خطين في الشعار الواحد.

Advertisements

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

ديسمبر 15, 2008

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

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

أخي المطور..
إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم.. سأتحدث عن كيفية التحكم بالخط بالـ 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