قبل البدء بعرض هذه الأفكار يجب أن نتذكر أن دعم css3  في المتصفحات مازال محدود و متفاوت . لذلك لا تستخدمها حاليا كجزء أساسي في التصميم مثلا أنا استخدم الفكرة الأولى على عدد من العناصر في الصفحة لكنك لو كنت من مستخدمي انترنت اكسبلورر فأنك للأسف لن تشاهد هذه التأثيرات لكنك لن تحس بفرق شاسع أو تواجه صعوبة في الأستخدام لذلك و قبل استخدام أي فكرة راجع الملاحظة  في آخر الفكرة  و التي  يوضح مدى دعم كل فكرة في عدد من المتصفحات حتى كتابة هذا الموضوع مع الأخذ في الأعتبار أن هذا  قد يتغير مع ظهور نسخ جديدة ( هناك وصلة أسفل كل فكرة للتأكد ) كما يمكنك الاطلاع على جدول بكل ما يقدمه css3 و مدى دعمه .  كما انك لن تكون متوافق مع معايير w3c ( لكن من يهتم )

أولا : الأطراف الدائرية

idea01

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

لو كان لدينا المعرف box

1 <div id="box">
2  
3 المحتوى هنا
4  
5 </div>

سيكون الcss بالشكل التالي

1 #box {
2  
3 border-radius: 15px;
4  
5 -moz-border-radius: 15px;
6  
7 -webkit-border-radius: 15px;
8  
9 }

القيمة ١٥ هي مستوى الانحناء في الزاوية

كما يمكننا الحصول على استدارة لزوايا معينة و ترك زوايا أخرى حادة

01 #box{
02  
03 -moz-border-radius-topleft: 15px;
04  
05 -moz-border-radius-topright: 0px;
06  
07 -moz-border-radius-bottomright: 15px;
08  
09 -moz-border-radius-bottomleft: 0px;
10  
11 -webkit-border-top-left-radius: 15px;
12  
13 -webkit-border-top-right-radius: 0px;
14  
15 -webkit-border-bottom-left-radius: 0px;
16  
17 -webkit-border-bottom-right-radius: 15px;
18  
19 }
مدعوم في : فايرفوكس 3.5 , متصفح جوجل (1.0.154.36),سفاري (3.2.1, وندوز)
غير مدعوم في : انترنت اكسبلورر و اوبرا

تأكد من الدعم

ثانيا :الظلال( للعناصر و الصناديق)

idea01

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

لو طبقنا على المثال السابق box

1 #box{
2  
3 -webkit-box-shadow: 10px 10px 5px #888;
4  
5 }

القيمة الأولى هي مكان الظل بالنسبة للمحور السيني x و الثانية بالنسبة للمحور الصادي y و القيمة الثالثة درجة التشتيت blur و آخر قيمة هي اللون .

مدعوم في : سفاري   3.2.1 على وندوز .

غير مدعوم : فايرفوكس و انترنت اكسبلورر و متصفح جوجل و اوبرا و نسخ سفاري تحت ٣ .

تأكد من الدعم

ثالثا : ظلال للنصوص

idea03

في css3 وجدت الخاصية text-shadow لإعطاء النص ظلال لو كان لدينا عنوان من نوع h2 و نريد إعطاء العناوين من هذا النوع ظلال يمكن القيام بذلك بواسطة

1 h2 {
2  
3 color: red;
4  
5 text-shadow: 2px 2px 2px black;
6  
7 }

كما يمكنك استخدام أكثر من ظل بأكثر من لون للنص الواحد

1 h2 {
2  
3 text-shadow: red 4px 4px 2px,
4  
5 yellow -4px -4px 2px,
6  
7 green -4px 4px 2px;
8  
9 }

مدعوم في :  سفاري ٣ و أكثر  و اوبرا 9.5  و فايرفوكس 3.1

غير مدعوم : متصفح جوجل .

تأكد من الدعم

رابعا : استخدام خطوطك الخاصة

idea04

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

علينا اولا تعريف declare الخطوط التي نريد استخدامها بواسطة @font-face

1 @font-face {
2  
3 font-family: fontname;
4  
5 src: url(‘fontfile.ttf’);
6  
7 }

حيث علينا استبدال fontname باسم نخصصة للخط . و استبدال   fontfile   باسم ملف الخط .

و الآن لدينا خط جديد يمكننا استخدامه اسميناه fontname

1 body {
2  
3 font-family : fontname ;
4  
5 font-size:0.9em
6  
7 }
مدعوم في :فايرفوكس 3.5 ,سفاري 3.2.1 و انترنت اكسيلورر ٧ و٨ و لكن باستخدام خطوط .eot .
غير مدعوم في : فايرفروكس ٣و متصفح جوجل و أوبرا

تأكد من الدعم

خامسا : استخدام أكثر من صورة في الخلفية

idea05

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

1 #box {
2  
3 background:url('images.gif') repeat center top ;
4  
5 }

مع css 3 يمكنك القيام بأمور اكثر تعقيدا

1 #box {
2  
3 background: url(example.png) top right no-repeat,
4  
5 url(example2.png) bottom right no-repeat,
6  
7 url(example3.png) center center repeat-y;
8  
9 }
مدعوم في : اوبرا 9.6 و سفاري 3.2.1
غير مدعوم في : قايرفوكس و جوجل و انترنت اكسبلورر .

تأكد من الدعم

سادسا : rgba و الشفافية

idea06

ما قدمته png من امكانيات للوصول إلى تصاميم و أفكار ابداعية يمكن الوصول إليه بواسطة rgba. ببساطة rgba يأخذ ٤ قيم اول ٣ قيم تمثل درجات الألوان

  • r= red احمر
  • g =green  أخضر
  • b=blue أزرق
  • أما آخر قيمة فهي تمثل درجة الشفافية لهذا العنصر .

مثال

1 #box {
2  
3 background: rgba(200, 100, 100, 0.5);
4  
5 }

كما يمكنك تحديد اللون بالطريقة المعتادة و استخدام opacity  كمثال

1 #box {
2  
3 color: red;
4  
5 opacity: 0.5;
6  
7 }
مدعوم في : فايرفوكس ٣ و متصفح جوجل و سفاري 3.2.1.
غير مدعوم : انترنت اكسبلورر و اوبرا .

تأكد من الدعم

بقلم : فاطمة العمادي