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

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

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

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

[html] <div id="box">
المحتوى هنا</div>
[/html]

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

[html] #box {

border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}
[/html]

القيمة ١٥ هي مستوى الانحناء في الزاوية
كما يمكننا الحصول على استدارة لزوايا معينة و ترك زوايا أخرى حادة

[html] #box{

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

}
[/html]

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

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

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

[html] #box{

-webkit-box-shadow: 10px 10px 5px #888;

}
[/html]

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

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

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

[html] h2 {

color: red;

text-shadow: 2px 2px 2px black;

}
[/html]

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

[html] h2 {

text-shadow: red 4px 4px 2px,

yellow -4px -4px 2px,

green -4px 4px 2px;

}
[/html]

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

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

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

[html] @font-face {

font-family: fontname;

src: url(‘fontfile.ttf’);

}
[/html]

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

[html] body {

font-family : fontname ;

font-size:0.9em

}
[/html]

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

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

[html] #box {

background:url(‘images.gif’) repeat center top ;

}
[/html]

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

[html] #box {

background: url(example.png) top right no-repeat,

url(example2.png) bottom right no-repeat,

url(example3.png) center center repeat-y;

}
[/html]

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

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

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

مثال

[html] #box {

background: rgba(200, 100, 100, 0.5);

}
[/html]

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

[html] #box {

color: red;

opacity: 0.5;

}
[/html]