3 تقنيات في الـ CSS3 يجب عليك معرفتها

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

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

تقنية الخلفيات المتعددة

هذه التقنية تسمح لك بوضع أكثر من خلفية لصفحتك وذلك بشكل طبقات (خلفية فوق خلفية) ولتتمكن من فعل هذا يجب عليك التقيد بالصيغة الصحيحة مثل :

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;;
background-color:#ffffff
}

تقنية الخطوط المخصصة

أكثر الخطوط المستخدمة في المواقع هي Arial, Helvetica, Verdana وذلك لأنها موجودة في أغلب حواسيب العالم ولكن ماذا لو أردت إستعمال خط خاص لموقعك ؟ سيبدوا ذلك صعباً  لوهلة ولكن مع الـ هذه التقنية تستطيع الإبتعاد عن هذه الخطوط واستعمال خطك الخاص مثال :

@font-face { font-family: SketchRockwell; src: url('http://example.com/fonts/SketchRockwell.ttf');}
h1 { font-family: SketchRockwell; }
لاتنسى تغيير مسار الخط وإسمه فهذا مجرد مثال فقط .

ظلال النص

أحد أكثر تقينات الـ CSS3 إستخداماً فهذه التقنية تسمح لك بوضع ظل خاص للنص بل تستطيع تحديد لونه ، حجمه وموضعه ببساطة لرؤية مثال على التقنية:

h1 { text-shadow: #003471 2px 5px 2px; }
انتهينا الان من شرح بعض التقنيات في الـ CSS3 و ما زال هناك الكثير من التقنيات التي سأشرحها لاحقاً

13 رأي حول “3 تقنيات في الـ CSS3 يجب عليك معرفتها”

  1. تقنية رائعة بحق .. ولكن متصفح اكسبلورر 8 للأسف لايدعمها بشكل كامل في بعض الخصائص مثل moz وغيرها ..

  2. جزاك الله خيرا على الإفادة اخي الفاضل ،، لكن كيف يمكن أن تضع الحواف منحنية ،، لأني سمعت بتوفر هذه الخاصية بهذه النسخة الجديدة من css
    ،
    ،
    ،
    احييك بشدة يآ طيف الابداع

  3. السلام عليكم
    أشكرك أخي الكريم
    التقنية ستساعد عن الاستغناء على الفلاش و حتى الفوتوشب
    لكن بكل اسف Internet Explorer بجميع اصداراته حتى الاصدار الثامن لا يدعم هذه التقنية
    مما سوف يحرم مستخدمي هذا المتصفح جمالية تقنية css3
    لكن اخواني ليكن في علمكم انه جائت لنا مكتبة الجافاسكريبت الاوهي selectivizr
    لتجعل موقعك او مدونتك تتوافق مع جميع الاستعلامات
    Query, MooTools, YUI, Dojo, Prototype و المزيد
    و بكل تأكيد لتجعل ال تتوافق مع المتصفحات IE6,7,8
    يمكنكم مشاهدة الموضوع في مدونتي..

  4. اه ه ه
    كم اعشق ال css3

    ولكن دائما اعمل حساب للزوار من كل المتصفحات

    فما زالت اصدارات الانترنت اكسبلورر لا يدعمها الا في الاصدار 9 الجديد…
    شكرا لك حبيبي علي طرح الموضوع الجميل

اترك رد