«
»

4 تقنيات يمكنك البدء باستعمالها ب CSS3 (درس للمبتدئين)

الإثنين 28 يونيو 2010

Radius

الاشكال الدائرية التي كنا نحصل عليها باستخدام صور دائرية كخلفية، الان وبفضل CSS3 يمكنك ليس فقط الحصول على هذه الدوائر في 3 ثواني، بل يمكنك التحكم ايضا في شدة الانحناء وشكله، أو إن كنت ترغب به في زواية معينة دون أخرى:

#main {
    -moz-border-radius:10px
}

ملاحظة: دائما ان كانت خاصية في CSS3 تبدأ ب -moz- فستحتاج الى كتابة ما يقابلها للمتصفحات الأخرى:
ل Chrome و Safari التي تعتمد على Webkit نكتب -webkit- بدل -moz- وبالنسبة ل Opera وباقي المتصفحات، فبدون هذا الرمز: اي border-radius سأكتفي في هذه الأمثلة بسطر واحد.

أمثلة:

radius

radius

Rotate

لقلب نص أو صندوق ونستعمل القيم الموجبة أو السالبة للاتجاهات (أسفل وأعلى):

#main {
    -moz-transform:rotate(2deg);
}

أمثلة:
rotate
rotate

Text-Shadow

أو تاثير الظل على النصوص:

h2 {
  text-shadow:1px 1px 1px #fff
}

دائما يمكنك استعمال قيم موجبة أو سالبة للاتجاهات، جرب ذلك:

text-shadow

Box-Shadow

هذه الخاصية ستعوض استعمال الصور لصنع ظل كخلفية:

#main {
    -moz-box-shadow:1px 1px 1px #999
}

أو:

#main {
    -moz-box-shadow:1px 1px 1px #999, -1px -1px 1px #ddd
}

أمثلة:

box-shadow

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

4 تعليقات

  1. Tweets that mention 4 تقنيات يمكنك البدء باستعمالها ب CSS3 (درس للمبتدئين) « Cssbit 2.0 -- Topsy.com قال:
    يونيو 28, 2010 عند 2:36 م

    [...] This post was mentioned on Twitter by Fouad Ouaggad and Just a Crazy Guy !, عبد الرحمن جميعي. عبد الرحمن جميعي said: ٤ تقنيات CSS3 يمكنك استخدامها الآن – http://bit.ly/dkVIx9 (من @cssbit) [...]

  2. عبد الهادي قال:
    يوليو 6, 2010 عند 9:30 ص

    السلام عليكم ورحمة الله وبركاته.
    تلميحات جميلة ومفيدة أخي نعيم، شكرا لك.
    لكنني لم أحب أبدا الاختلاف القائم بحسب محرك البحث، برأيي كان يجب أن يكون الوسم موحدا وعلى مطوري المتصفحات جعل متصفحاتهم تترجمه، حتى لا نعود للزمن الماضي حينما كان كل متصفح يغني لليلاه..
    فمثلا بالنسبة للحواف الدائرية الوسم المنطقي برأيي هو:
    border-radius
    والأمر نفسه لباقي الخواص، من غير الإشارة لا إلى webkit أو غيره..
    في الواقع أراه عيبا من وجهة نظري، وأرجو أن الفكرة قد وصلت، ولو أنه ليس هنا مجال مناقشتها..
    مني لك أرق تحية..

  3. مختارات من تويتر #10 | الخلاصات العربية قال:
    يوليو 6, 2010 عند 7:41 م

    [...] 4 تقنيات يمكنك البدء باستعمالها ب CSS3 [...]

  4. admin قال:
    يوليو 6, 2010 عند 8:10 م

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

التعليقات مغلقة.