مصادر حول تقنية CSS3

مع ظهور الإصدار الثالث لتقنية CSS منذ فترة من قبل منظمة W3c المستخدمة في تنسيق مواقع الويب بجانب تقنيات مثل HTML، XML والتي لازال فريق CSS WG في منظمة W3c يعمل على الإصدارة الثالثة والتي تدعمها بعض متصفحات التي تعتمد على محرك Gecko و Webkit مثل Firefox و Safari بإستثناء المتصفح Internet Explorer، مع دعمها بعض مميزات CSS3 وليست جميعها، يمكنك رؤية إختبار دعم CSS3 للمتصفحات.

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

ملاحظة: يمكنك تحميل أمثلة مميزات CSS3 (جميع الأمثلة) أو عن طريق نهاية كل عنوان من المميزات يتجد رابط تحميل خاص بكل ميزة مذكورة هنا.

مميزات تقنيةCSS3

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

المحددات Selectors

هناك إضافات جديدة بما يتعلق بالمحددات في CSS وهي تفيدك في تحديد عناصر وثيقة HTML أكثر وتنسيقها بما يناسب لمعرفة المزيد عن المحددات هناك مواضيع كثيرة تتحدث عنها منها عربية:

• مُحدِّدات CSS 2.1
• التحكم بتنسيق أجزاء معينة من النص

بالنسبة للمحددات Selectors الجديدة إضافة إلى ما يسمى بالعناصر الزائفة pseudo-elements والأصناف الزائفة pseudo-classes في CSS3 فهي مستخدمة في مكتبة jQuery على سبيل المثال، أعني مستخدمة مسبقاً من قبل المطورين، يمكنك معرفة المزيد عنها وتجربتها عن طريق jQuery Selectors (إذا كنت تريد أن تجربها على المتصفح) ، الأداة السابقة تستطيع من خلالها تجربة المحددات بشكل مباشر ورؤية النتيجة عن طريق الصفحة بواسطة مكتبة jQuery.

مواضيع متعلقة بالمحددات Selectors

• Selectors Level 3
• CSS 3 selectors explained
• Compatibility table: CSS3 Selectors

خلفيات المتعددة Multiple-Backgrounds

تتيح لك CSS3 إضافة خلفيات متعددة في عنصر واحد تريد تنسيقه خلال وثيقة HTML ، مثال على هذه الميزة:

شفرة css كما هي في الصورة:

view sourceprint?

1.#box {

2.background: url(sharp.png) left 1px no-repeat,

3.url(top.png) top no-repeat,

4.url(bottom.png) bottom no-repeat,

5.url(background.png) repeat,

6.}

شفرة html للمثال الموضح في الصورة:

view sourceprint?

1.<div id="box">

2.<h1>عنوان النصh1>

3.<p>تجربة الكتابة في هذه الصفحة.p>

4.div>

مواضيع متعلقة بالخلفيات المتعددة Multiple-Backgrounds:

• CSS Backgrounds and Borders Module Level 3
• CSS3 Multiple Backgrounds Obsoletes Sliding Doors
• Multiple backgrounds with CSS3

ملاحظات على ميزة الخلفيات المتعددة Multiple-Backgrounds:

• تعمل هذه الميزة في المتصفحات التي صممت لمحرك Webkit مثل Apple Safari و Google Crome.
• يجب إضافة فاصلة ” , ” عند نهاية كل خلفية جديدة.

يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.

الحدود Borders

تستطيع إختصار ما كنت تفعله في الإصدارة الثانية إذا كنت تريد عمل حواف دائرية لصندوق عن طريق الحدود في CSS3 أو إستبدال الحدود بصورة من الصور ، سنآخذ خاصيتين متعلقة بالحدود وسنبدأ بهذه الصورة التي تصور لنا عمل خاصية border-image:

تصوير آخر ولكن لخاصية border-radius التي تفيدك في زيادة نصف قطر الزوايا الأربع للصندوق وهي رائعة ومختصرة جداً:

شفرة css كما هي في الصورة (صورة المثال على خاصية border-radius):

view sourceprint?

01.#box {

02.margin: 10px auto;

03.padding: 7px;

04.width: 238px;

05.height: auto;

06.background-color: #e6e9ed;

07.border: 1px solid #666666;

08.border-radius: 10px;

09.-moz-border-radius: 10px;

10.-webkit-border-radius: 10px;

11.-o-border-radius: 10px;

12.-opera-border-radius: 10px;

13.}

شفرة html للمثال الموضح في الصورة (صورة المثال على خاصية border-radius):

view sourceprint?

1.<div id="box">

2.<h1>عنوان النصh1>

3.<p>تجربة الكتابة في هذه الصفحة.p>

4.div>

مواضيع متعلقة بالحدود Borders

• Border-image: using images for your border
• Border-radius: create rounded corners with CSS!
• Rounded Corner Boxes the CSS3 Way

ملاحظات على ميزة الحدود Borders:

• الخواص الجديدة للحدود مثل border-radius يجب تأكيد عملها في المتصفحات التي تعمل على محرك Webkit ، Gecho،Presto بكتابة سطور إضافية مثل
  
  “moz-border-radius” ، “webkit-border-radius” ، “o-border-radius” ، “opera-border-radius”.
• خواص الحدود الجديدة في CSS3 هي: border-image ، border-radius ، border-break ، box-shadow

الألوان Colors

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

شفرة css كما هي في الصورة (المثال السابق على صيغة rgb في خاصية background-color):

view sourceprint?

1.#box {

2.margin: 0 auto;

3.padding: 20px 0;

4.width: 100px;

5.height: 60px;

6.background-color: rgb(210, 204, 222);

7.}

شفرة html للمثال الموضح في الصورة (المثال السابق على صيغة rgb في خاصية background-color):

view sourceprint?

1.<div id="box">

2.<h1>Boxh1>

3.div>

وأيضاً هناك صيغة أخرى وهي rgba حيث أن الحرق الأخير إختصار لكلمة alpha ، الفرق بين الصيغة السابقة وهذه أن الأخيرة يمكن تحديد قيمة الشفافية في اللون نفس وظيفة خاصية opacity، مثال على الطريقة:

الحال أيضاً ينطبق على صيغ أخرى مثل:

• CMYK
• HSL
• HSLA

شفرة css كما هي في الصورة (المثال السابق على صيغة rgba في خاصية background-color):

view sourceprint?

01.#box-one {

02.background-color: rgba(210, 204, 222, 1);

03.}

04.#box-two {

05.background-color: rgba(210, 204, 222, 0.5);

06.}

07.#box-three {

08.background-color: rgba(210, 204, 222, 0.2);

09.}

10.

11./* بقية التنسيق */

12.#box {

13.margin: 0 auto;

14.width: 300px;

15.}

16.#box-one, #box-two, #box-three {

17.padding: 20px 0;

18.width: 100px;

19.height: 60px;

20.float: right;

21.}}

شفرة html للمثال الموضح في الصورة (المثال السابق على صيغة rgba في خاصية background-color):

view sourceprint?

1.<div id="box">

2.<h1>Boxh1>

3.div>

مواضيع متعلقة بالألوان Colors

• CSS Color Module Level 3
• CSS3 colors, today (MediaCampAthens session)
• RGBA colors

يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.

الخطوط Fonts

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

• font-family: إسم الخط الذي تريد إستخدامه.
• src: عنوان الخط الذي تريد إستخدامه، يمكنك تحديد نوع الخط أكثر عن طريق format.

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

شفرة css كما هي في الصورة (المثال السابق على font-face في الخطوط):

view sourceprint?

01.@font-face {

02.font-family: "A.C.M.E. Secret Agent";

03.src: url('C:\WINDOWS\Fonts\acmesa.TTF');

04.}

05.

06.h1 {

07.font-family: "A.C.M.E. Secret Agent";

08.color: #3e87f5;

09.}

شفرة html للمثال الموضح في الصورة (المثال السابق على font-face في الخطوط):

view sourceprint?

1.<h1>Lorem Ipsumh1>

2.

3.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper ullamcorper massa et eleifend. Aliquam eget turpis risus. Nulla auctor, odio nec fringilla tempus, tellus turpis sagittis tellus, eget egestas dui sem sit amet risus.p>

مواضيع متعلقة بالخطوط Fonts

• CSS Fonts Module Level 3
• CSS3 Embedding a Font Face
• CSS @ Ten: The Next Big Thing
• Web fonts with @font-face

ملاحظات على ميزة الخطوط Fonts:

• المثال يعمل على محرك Webkit و Presto مثل متصفح Apple Safari ، Google Chrome، Opera.

يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.

الظلال Shadows

إضافة جديدة وجميلة تساعد على وضع ظل للنصوص والعناصر أو الصناديق HTML أيضاً ، هذه الظلال يكون تكوينها عن طريق خاصية box-shadow و text-shadow ويمكن حساب قيمها بهذه الطريقة:

مثال على تظليل صندوق بإستخدام خاصية box-shadow:

شفرة css كما هي في الصورة (المثال السابق على خاصية box-shadow):

view sourceprint?

01.#box {

02.padding: 13px;

03.margin: 0 auto;

04.width: 450px;

05.text-align: left;

06.background-color: #e9ecf2;

07.-moz-box-shadow: 7px 7px 10px #9c9c9c;

08.-webkit-box-shadow: 7px 7px 10px #9c9c9c;

09.-o-box-shadow: 7px 7px 10px #9c9c9c;

10.}

شفرة html للمثال الموضح في الصورة (المثال السابق على خاصية box-shadow):

view sourceprint?

1.<div id="box">

2.<h1>Lorem Ipsumh1>

3.

4.<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.p>

5.

6.<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.p>

7.div>

مثال على تظليل نص بإستخدام خاصية text-shadow:

شفرة css كما هي في الصورة (المثال السابق على خاصية text-shadow):

view sourceprint?

1.h1, p {

2.text-shadow: 3px 2px 7px #9f9f9f;

3.}

شفرة html للمثال الموضح في الصورة (المثال السابق على خاصية text-shadow):

view sourceprint?

1.<h1>Lorem Ipsumh1>

2.

3.<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.p>

4.

5.<div id="arabic">

6.<h1>عنوان جديدh1>

7.<p>نصوص عربية، دروس جديدة، مصادر متنوعة ..p>

8.div>

مواضيع متعلقة بالظلال Shadows

• CSS3 Shadows (Border, Images & Text)
• Box-shadow, one of CSS3’s best new features

يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.

تعدد الأعمدة Multi-Column

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

شفرة css كما هي في الصورة (المثال السابق على تعدد الأعمدة Multi-column):

view sourceprint?

1.#text {

2.background-color: #E8ECF0;

3.-moz-column-count: 2;

4.-moz-column-gap: 25px;

5.}

شفرة html للمثال الموضح في الصورة (المثال السابق على تعدد الأعمدة Multi-column):

view sourceprint?

1.<div id="text">

2.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor enim id risus fermentum in auctor dolor venenatis. Maecenas eu elementum odio. Nulla in magna velit, a condimentum arcu.p>

3.

4.<p>Fusce porttitor eleifend nunc quis tristique. Aenean mollis viverra sapien, ac pellentesque purus iaculis quis. Quisque pulvinar, nibh a consectetur sodales, eros felis laoreet ante, non volutpat elit lacus a ante.p>

5.

6.<p>Fusce porttitor eleifend nunc quis tristique. Aenean mollis viverra sapien, ac pellentesque purus iaculis quis. Quisque pulvinar, nibh a consectetur sodales, eros felis laoreet ante, non volutpat elit lacus a ante.p>

7.div>

هناك عدة خصائص لتعدد الأعمدة وهي:

• column-width: حجم العمود ، يمكنك تركه وحساب العمود تلقائياً
• column-count: عدد الأعمدة
• column-gap: المسافدة بين الأعمدة
• column-rule: الحدود الفاصلة بين الأعمدة

يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.

مواضيع متعلقة بتعدد الأعمدة Multi-Column

• Introducing the CSS3 Multi-Column Module
• CSS3 module: Multi-column layout
• CSS3 Multi-Column Thriller

الحركات Animations

ميزة رائعة أيضاً وهي إمكانية تحريك عناصر HTML مباشرة من CSS مع وجود التوقيت وتحديد خواص CSS التي نريد إضافة الحركة فيها، هناك 5 خواص تابعة لهذه الميزة وأولها وهي الرئيسية “transition” وقيم هذه الخاصية هي الأربع خواص المتبقية ، خاصية transition-property تحدد من خلالها خواص CSS الباقية التي تريد عمل التحريك فيها أو وجود التأثير فيها.

أما خاصية transition-duration وهي تحدد مدة التحويل و خاصية transition-delay وهي تحدد مدة تأخير التحويل والقيمة موحدة بين الخاصيتين وهي الوقت ويمكن حسابها بالثانية أو أجزاء الثانية.

وأخيراً الخاصية transition-timing-function تحدد توقيت الحركة بشكل دقيق أكثر من الدوال السابقة وهي تتكون من عدة قيم وهي:

• ease
  
  
• liner
• ease-in
• ease-out
• ease-in-out
• cubic-bezier: تتكون من أربع قيم وهي x1,y1,x2,y2

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

شفرة css كما هي في الصورة (المثال السابق على تمرير الفأرة على صورة “تجربة”):

view sourceprint?

01.img {

02.margin: 0 auto;

03.opacity: 1;

04.-webkit-transition-property: opacity;

05.-webkit-transition-duration: 1s;

06.-webkit-transition-timing-function: liner;

07.}

08.img:hover {

09.opacity: 0;

10.}

شفرة html للمثال الموضح في الصورة (المثال السابق على تمرير الفأرة على صورة “تجربة”):

view sourceprint?

1.<img src="submit.gif" alt="" />

أما التطبيق الثاني وهو على على صورة تشكل مربع صغير والتأثير يكون عند الضغط على الصورة (إستخدمت الجافاسكربت لظهور التأثير عند الضغط على الصورة) وتتحرك إلى اليسار في كل ضغطه إلى أن تصل إلى 5 ضغطات ونزيد قيمة الخاصية right = 100 في كل ضغطة:

شفرة css كما هي في الصورة (المثال السابق على تحريك الصورة من اليمين إلى اليسار بتوقيت قيمته 1.2 من الثانية):

view sourceprint?

1.img {

2.margin: 0;

3.position: relative;

4.right: 0;

5.-webkit-transition-property: -webkit-transform, right;

6.-webkit-transition-duration: 1.2s;

7.-webkit-transition-timing-function: liner;

8.}

شفرة html للمثال الموضح في الصورة (المثال السابق على تحريك الصورة من اليمين إلى اليسار بتوقيت قيمته 1.2 من الثانية):

view sourceprint?

1.<img src="square.gif" alt="#" />

شفرة Javascript ، سبب إضافة لغة Javascript هي تعديل قيمة خاصية right بعد كل ضغطة لكي تشاهد تحركها بتوقيت قيمته 1.2 من الثانية)

view sourceprint?

01.right = 0;

02.

03.function active_c () {

04.plusRight = right + 100;

05.if(plusRight <>

06.var full = 0;

07.document.getElementById("submit").getElementsByTagName("img")[0].style.right = plusRight+"px";

08.right = plusRight;

09.}

10.

11.}

12.

13.function loading() {

14.var active = document.getElementById("submit").getElementsByTagName("img")[0];

15.active.addEventListener("click",active_c,false);

16.}

مواضيع متعلقة بالحركات Animations

• CSS Transitions Module Level 3
• CSS Animation من Webkit Blog
• Transitions من Apple Developer
• CSS3 Animation Will Rock Your World

ملاحظات على ميزة الحركات Animations:

• جميع خواص هذه الميزة تبدأ بـ “webkit” مثل “webkit-transition-” لأنها مدعومة في محرك webkit وتستطيع تجربتها في متصفح Apple Safari أو Google Chrome.

يمكنك تحميل المثال السابق على الحركات Animation لرؤيته.

دروس تعليمية

أضع هنا دروس شاملة لكافة مميزات CSS3 لمن يريد قراءتها من مصادر أخرى ..

إستخدام CSS3

5 تقنيات تعرفك على CSS3

إبدأ مع CSS3

مقدمة لـCSS3

مقدمة إلى CSS3

Get the best out of CSS3

مواقع متخصصة

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

CSS3.info

CSS3.com

إستخدام الخصائص المذكورة في متصفحات الويب

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

• moz: خاص بمتصفح Mozilla Firefox.
• webkit: خاص متصفح Apple Safari و Google Chrome.
• o: خاص بمتصفح Opera.
• opera: خاص بمتصفح Oprera أيضاً، لست متأكد 100% من وجود الكلمة هذه.

مثال على كتابة خاصية border-radius:

• moz-border-radius-
• webkit-border-radius-
• o-border-radius-
• opera-border-radius-