SUBSWISS

بعض من تقنييات الـ CSS لإعطاء شكل أجمل الى المواقع

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

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

1-  CSS Rounded Corners – الزوايا الغير حادة .

هذه التقنية تظهر في متصفح الفايرفوكس و سفاري  (لا تعمل على  الأكسبلورار)

• -moz-border-radius-topleft / -webkit-border-top-left-radius

• -moz-border-radius-topright / -webkit-border-top-right-radius

• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius

• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

• moz-border-radius / -webkit-border-radius

كما تلاحظون ان الزوايا غير حادة في الأشكال الأعلاه و كل شكل و زاوية لها كودها الخاص .

المصدر : CSS3.info

2- CSS Text Shadow – تظليل النصوص :

تظليل النصوص

text-shadow : #555 0px 2px 2px

تعمل على فايفوكس و سفاري و أوبرا (لا تعمل على الأكسبلورار)

توضيح : الكود أعلى يوضح إستخدام التظليل حيث #555 هو اللون , 0px هو الإزاحة الأفقية , 2px الإزاحة العامودية , 2px نسبة التضبيب (Blur)

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

المصدر : Line25.com

3- Text Rotation with CSS – تدوير النص

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

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

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

المصدر : Snook.ca

4-@font-face-Attribute إستيراد الخط

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

على سبيل المثال : كمصصم عربي تستخدم خطوط الـ Arial و Tahoma في النصوص و العناوين , على إعتبار ان هذه الخطوط موجودة في جهاز المتصفح , لكن لو أردت إستخدام خط بدلا من هذه الخطوط , بواسطة هذه التقنية تسمح لك بأختيار الخط الموفوع على الموقع و إستيراده بدلا من الخطوط الأفتراضية .

لأستخدام هذه التقنية تحتاج الى خط بأمتداد TTF.  الخطوط الصحيحة true font مثلا خط قناة العربية , تحتاج الى إضافة الكود في بداية ملف الـ CSS

@font-face{
 font-family: 'Al-Arabia';
 src: url('../fonts/Al-Arabia.ttf') format('truetype');
 }

الأن كل ما عليك فعله هو إسخدام إسم الخط المستورد بدلا من الخطوط الأفتراضية مثال :

.post h2 {
 font-family : 'Al-Arabia' , arial , tahoma;
}

لاحظ المثال إدناه (هذا نص و ليس صورة. يمكنك تحديد النص للتأكد)

لمواقع أجمل إستخدم التقنيقات الحديثة

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

كرار العبادي

CSS