مع ظهور الإصدار الثالث لتقنية CSS منذ فترة من قبل منظمة W3c المستخدمة في تنسيق مواقع الويب بجانب تقنيات مثل HTML، XML والتي لازال فريق CSS WG في منظمة W3c يعمل على الإصدارة الثالثة والتي تدعمها بعض متصفحات التي تعتمد على محرك Gecko و Webkit مثل Firefox و Safari بإستثناء المتصفح Internet Explorer، مع دعمها بعض مميزات CSS3 وليست جميعها، يمكنك رؤية إختبار دعم CSS3 للمتصفحات.
سأعرض مميزات ومصادر الإصدارة الثالثة من تقنية CSS للإستفادة منها وخاصة أنها معتمدة ومستخدمة حالياً في عدة متصفحات ومواقع وبها مميزات يمكن أن توفر عليك والوقت وتضيف المزيد من الجودة والمرونة إلى عملك.
ملاحظة: يمكنك تحميل أمثلة مميزات CSS3 (جميع الأمثلة) أو عن طريق نهاية كل عنوان من المميزات يتجد رابط تحميل خاص بكل ميزة مذكورة هنا.
مميزات تقنيةCSS3
بالنسبة للمميزات الجديدة في الإصدار الثالث والتي إستخدمت من قبل الكثير من المدونات والمواقع في الوقت الحالي إضافةً إلى وجودها مسبقاً في عدة أماكن أو مستخدمة في مكتبات أخرى مثل المحددات الجديدة Selectors في مكتبة jQuery على سبيل المثال، دعونا نعرض أهم المميزات إضافةً إلى مقالات ومصادر تتحدث عنها.
المحددات Selectors
هناك إضافات جديدة بما يتعلق بالمحددات في CSS وهي تفيدك في تحديد عناصر وثيقة HTML أكثر وتنسيقها بما يناسب لمعرفة المزيد عن المحددات هناك مواضيع كثيرة تتحدث عنها منها عربية:
بالنسبة للمحددات Selectors الجديدة إضافة إلى ما يسمى بالعناصر الزائفة pseudo-elements والأصناف الزائفة pseudo-classes في CSS3 فهي مستخدمة في مكتبة jQuery على سبيل المثال، أعني مستخدمة مسبقاً من قبل المطورين، يمكنك معرفة المزيد عنها وتجربتها عن طريق jQuery Selectors (إذا كنت تريد أن تجربها على المتصفح) ، الأداة السابقة تستطيع من خلالها تجربة المحددات بشكل مباشر ورؤية النتيجة عن طريق الصفحة بواسطة مكتبة jQuery.
مواضيع متعلقة بالمحددات Selectors
خلفيات المتعددة Multiple-Backgrounds
تتيح لك CSS3 إضافة خلفيات متعددة في عنصر واحد تريد تنسيقه خلال وثيقة HTML ، مثال على هذه الميزة:
شفرة css كما هي في الصورة:
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 للمثال الموضح في الصورة:
1.<div id="box">
2.<h1>عنوان النصh1>
3.<p>تجربة الكتابة في هذه الصفحة.p>
4.div>
مواضيع متعلقة بالخلفيات المتعددة Multiple-Backgrounds:
ملاحظات على ميزة الخلفيات المتعددة Multiple-Backgrounds:
- تعمل هذه الميزة في المتصفحات التي صممت لمحرك Webkit مثل Apple Safari و Google Crome.
- يجب إضافة فاصلة ” , ” عند نهاية كل خلفية جديدة.
يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.
الحدود Borders
تستطيع إختصار ما كنت تفعله في الإصدارة الثانية إذا كنت تريد عمل حواف دائرية لصندوق عن طريق الحدود في CSS3 أو إستبدال الحدود بصورة من الصور ، سنآخذ خاصيتين متعلقة بالحدود وسنبدأ بهذه الصورة التي تصور لنا عمل خاصية border-image:
تصوير آخر ولكن لخاصية border-radius التي تفيدك في زيادة نصف قطر الزوايا الأربع للصندوق وهي رائعة ومختصرة جداً:
شفرة css كما هي في الصورة (صورة المثال على خاصية border-radius):
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):
1.<div id="box">
2.<h1>عنوان النصh1>
3.<p>تجربة الكتابة في هذه الصفحة.p>
4.div>
مواضيع متعلقة بالحدود Borders
ملاحظات على ميزة الحدود 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):
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):
1.<div id="box">
2.<h1>Boxh1>
3.div>
وأيضاً هناك صيغة أخرى وهي rgba حيث أن الحرق الأخير إختصار لكلمة alpha ، الفرق بين الصيغة السابقة وهذه أن الأخيرة يمكن تحديد قيمة الشفافية في اللون نفس وظيفة خاصية opacity، مثال على الطريقة:
الحال أيضاً ينطبق على صيغ أخرى مثل:
شفرة css كما هي في الصورة (المثال السابق على صيغة rgba في خاصية background-color):
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):
1.<div id="box">
2.<h1>Boxh1>
3.div>
مواضيع متعلقة بالألوان Colors
يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.
الخطوط Fonts
بالنسبة للخطوط يتم تحسين ظهور النص بشكل واضح إضافةً إلى إختيار خط خارجي لإستخدامه في عنوان أو فقرة، يتم ذلك عن طريق font-face@ وتتكون من خاصيتين:
- font-family: إسم الخط الذي تريد إستخدامه.
- src: عنوان الخط الذي تريد إستخدامه، يمكنك تحديد نوع الخط أكثر عن طريق format.
مثال على إستخدام هذه الخواص، إستخدمت خط أجنبي ونص باللغة الإنجليزية كذلك (جربت كتابة نص بالعربي ولكن لم أفلح في إيجاد نتيجة مرضية ولم يعمل معي بالشكل المطلوب):
شفرة css كما هي في الصورة (المثال السابق على font-face في الخطوط):
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 في الخطوط):
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
ملاحظات على ميزة الخطوط Fonts:
- المثال يعمل على محرك Webkit و Presto مثل متصفح Apple Safari ، Google Chrome، Opera.
يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.
الظلال Shadows
إضافة جديدة وجميلة تساعد على وضع ظل للنصوص والعناصر أو الصناديق HTML أيضاً ، هذه الظلال يكون تكوينها عن طريق خاصية box-shadow و text-shadow ويمكن حساب قيمها بهذه الطريقة:
مثال على تظليل صندوق بإستخدام خاصية box-shadow:
شفرة css كما هي في الصورة (المثال السابق على خاصية box-shadow):
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):
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):
1.h1, p {
2.text-shadow: 3px 2px 7px #9f9f9f;
3.}
شفرة html للمثال الموضح في الصورة (المثال السابق على خاصية text-shadow):
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
يمكنك تحميل المثال السابق على الخلفيات المتعددة لرؤيته.
تعدد الأعمدة Multi-Column
تقوم هذه خواص هذه الميزة بتنسيق العناصر على أكثر من عمود، مثل تقسيم فقرات متتالية على عمودين بدلاً من الوضع الطبيعي على عمود واحد في صفحة الويب، مثال على تقسيم فقرتين:
شفرة css كما هي في الصورة (المثال السابق على تعدد الأعمدة Multi-column):
1.#text {
2.background-color: #E8ECF0;
3.-moz-column-count: 2;
4.-moz-column-gap: 25px;
5.}
شفرة html للمثال الموضح في الصورة (المثال السابق على تعدد الأعمدة Multi-column):
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
الحركات 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 كما هي في الصورة (المثال السابق على تمرير الفأرة على صورة “تجربة”):
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 للمثال الموضح في الصورة (المثال السابق على تمرير الفأرة على صورة “تجربة”):
1.<img src="submit.gif" alt="" />
أما التطبيق الثاني وهو على على صورة تشكل مربع صغير والتأثير يكون عند الضغط على الصورة (إستخدمت الجافاسكربت لظهور التأثير عند الضغط على الصورة) وتتحرك إلى اليسار في كل ضغطه إلى أن تصل إلى 5 ضغطات ونزيد قيمة الخاصية right = 100 في كل ضغطة:
شفرة css كما هي في الصورة (المثال السابق على تحريك الصورة من اليمين إلى اليسار بتوقيت قيمته 1.2 من الثانية):
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 من الثانية):
1.<img src="square.gif" alt="#" />
شفرة Javascript ، سبب إضافة لغة Javascript هي تعديل قيمة خاصية right بعد كل ضغطة لكي تشاهد تحركها بتوقيت قيمته 1.2 من الثانية)
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
ملاحظات على ميزة الحركات Animations:
- جميع خواص هذه الميزة تبدأ بـ “webkit” مثل “webkit-transition-” لأنها مدعومة في محرك webkit وتستطيع تجربتها في متصفح Apple Safari أو Google Chrome.
يمكنك تحميل المثال السابق على الحركات Animation لرؤيته.
دروس تعليمية
أضع هنا دروس شاملة لكافة مميزات CSS3 لمن يريد قراءتها من مصادر أخرى ..
إستخدام CSS3
5 تقنيات تعرفك على CSS3
إبدأ مع CSS3
مقدمة لـCSS3
مقدمة إلى CSS3
Get the best out of CSS3
مواقع متخصصة
إلى الآن لا توجد مواقع متخصصة كثيرة أجنبية ولا عربية أيضاً وجدت موقعين ممكن الإستفادة منهما ..
إستخدام الخصائص المذكورة في متصفحات الويب
خصائص 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-
) إذ تحتاج إلى 
