CSS3 – Introduction

متابعى مدونة فريق ديف ميكس الأعزاء .. بعد التحية .. نقدم لكم مجموعة من المقالات فى  السي اس اس 3 متابعة لسلسلة الويب والتى تم الاعلان عنها منذ فترة وقررنا الكتابة فى هذا الجزء باللغة العربية تقديرا لرغبة القراء واثراءا لمحتوى اللغة العربية على الانترنت ونتمنى ان تنال اعجابكم

Top


مقدمة
الى الجحيم بهذه المتصفحات .. كلمة قالها جيفيري زيلدمان سنة 2001 ومن بعدها بدأت ثورة التطوير الحقيقي لمتصفحات الويب والسبب فى ذلك هو تحول مصممي صفحات الويب لاستخدام السي اس اس 1 فى اشياء اكثر من الالوان والخطوط واصبحت المتصفحات فقيرة لدعم الخصائص التى يرديها المصممون.
فى 2006 بدأ الكلام عن دعم السي اس اس يقل حيث ان معظم المشكلات التى كانت تظهر ، تم حلها من قبل المتصفحات واصبحت المتصفحات تتطور بشكل اسرع خصوصا فايرفوكس وسفاري ، وفى نهاية الامر .. المتصفحات تتطور بتطور لغات الويب الخاصة بالديزاين مثلا السي اس اس  والاتش تي ام ال.
Top


بعض الاحصائيات عن دعم المتصفحات للسي اس س 3
لم تدعم كل المتصفحات السي اس اس 3 بشكل كامل وهناك ما يدعم بعض الخصائص ولا يدغم بعضها واليكم جدول بدعم المتصفحات لبعض الخصائص الجديدة فى سي اس اس 3
اذن لا يزال الدعم مستمر فى الاصدارات القادمة من المتصفحات
Top


ما الجديد فى السي اس اس 3 ؟

Borders

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

ففى الاصدار الثانى كنا نستخدم اربع صور مختلفة للحواف الاربعة داخل صندوق ملون عادي ولكن فى الاصار الجديد تستطيع ببساطة ان تفعل نفس الموضوع وبكفاءة اكبر عن طريق ميزة
border-radius
واللى تمكنك من عمل حواف دائرية بسهولة جرب لكود التالي

HTML code

</pre>
<div id="Box">
<h1>عنوان</h1>
نص مكتوب للتجربة</div>
<pre>

CSS code

#box{
text-align:right;
margin: 10px auto;
padding: 7px;
width: 238px;
height: auto;
background-color: #e6e9ed;
border: 1px solid #666666;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-opera-border-radius: 10px;
}

RGB Color system
RGB  بالتأكيد أسهل بكثير مما سبق ومن الجديد ايضا خاصية تغيير الالوان بصيغة ال
انظر المثال التالى


ايضا ينطبق نفس الشكل فى الانظمة الاخرى مثل
(CMYK,HSL,HSLA)

Fonts
من الاشياء الجديدة والمفيدة جدا استخدام فونتس جديدة باستخدام ميزة جديدة اسمها
@font-face
وتستخدمها بالشكل التالى
CSS code

@font-face {
font-family: "devmixfont";
src: url('atlandsketchesbb_reg.TTF');
}
h1 {
font-family: "devmixfont";
color: #3e87f5;
font-size:100px;
}

HTML code

<h1>DevMix Team</h1>
<p>
DevMix Team was founded in February 2011 and it is the best
teamwork in Mansoura Universty collected by students, we are the best
</p>

فتكون النتيجة كالتالى


ملحوظة: تقدر تنزل اى فونت من هنا

Shadow

إضافة جديدة وجميلة تساعد على وضع ظل للنصوص والعناصر أو الصناديق الاتش تي ام ال أيضاً ، هذه الظلال يكون تكوينها عن طريق خاصية

box-shadow و text-shadow

ويمكن حساب قيمها بهذه الطريقة:

مصدر الصورة

هيا بنا نرى مثال ونتيجة له ، جرب الكود التالى
HTML code

<div id="Box">
<h1>فريق ديف ميكس</h1>
فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات
 .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه</div>

CSS code

#box {
padding: 13px;
margin: 0 auto;
width: 450px;
text-align: left;
background-color: #e9ecf2;
-moz-box-shadow: 7px 7px 10px #9c9c9c;
-webkit-box-shadow: 7px 7px 10px #9c9c9c;
-o-box-shadow: 7px 7px 10px #9c9c9c;
}

وتكون النتيجة عمل ظل للصندوق كما فى الصورة التالية

اما عن عمل ظل للكلام والذي يعطى تنسيقا متميز للكلام انظرالكود والنتيحجة التاليين
CSS code

h1, p {
text-shadow: 3px 2px 7px #9f9f9f;
}

HTML code

<h1>فريق ديف ميكس</h1>
<pre>
فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات
 .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه

فتكون نتيجة هذا الكود كالتالى
يوجد الكثير من الخصائص الجديدة الاخرى والتى سوف يثم مناقشتها فى الدروس والمقالات القادمة باذن لله مثل

  • Transitions
  • opacity
  • Multiple Backgrounds
  • Animation
  • and more …

Top


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

border-radius   ومثال على خاصية الحدود الدائرية

-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-ms-border-radius:10px;
-chrome-border-radius:10px;

وفى النهاية اتمنى ان اكون قد اوصلتك لبعض خصائص السي اس اس 3 المهمة وعرضت عليك مقدمة تجعلك تستخدم السي اس اس 3 اليوم قبل غدا وانتظروا باقى مقالاتنا فى القريب العاجل باذن الله ننتظر تعليقاتكم ومقترحاتكم .. بالتوفيق:)

, ,

  1. 9 articles in CSS/CSS3 from devmix « DevelopersMix's Blog
  2. Introduction To CSS3 [my article on devmix] « Medhat Dawoud

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: