ملحوظة: تفترض هذه المقالة أنك تعرف CSS وتستخدمه :)
في هذه المقالة حاولت أن أرصد جديد CSS3 بطريقة مختصرة بدون الكثير من الشرح، فتكون عناوين للتعرف على تلك الإمكانات الجديدة وتكون مرجعا سريعا في المستقبل. ويتلخص هذا الجديد في الاهتمام بالخواص التالية: تأثيرات الحدود - تأثيرات النصوص - الخلفيات - الأعمدة - الألوان - وأشياء أخرى..
تأثيرات الحدود:
- الأركان الدائرية: ويمكن استخدامها الآن لتشاهدها على فايرفوكس وسفاري، أما بقية المتصفحات لم تطبقها بعد، لذلك نقوم حتى الآن باللجوء للطريقة التلقيدية من خلال الصور ، أو بالطريقة الأكثر حداثة باستخدام JQuery. ولكن يوما ما سيمكنك إضافة كود مثل التالي لتحصل على أركان دائرية:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
- التدرجات اللونية: سيتطلب منك أن تدخل القيم اللونية لكل سطر يدخل في التدرج اللوني فتكتب مثلا:
-moz-border-top-colors:#B8B8B8 #C1C1C1 #D2D2D2 #DEDEDE #EAEAEA;
- الظلال: يمكنك إضافة ظلال لأي عنصر عن طريق كود مثل هذا:
-webkit-box-shadow: 10px 10px 5px #CCC;
- الخلفية المصورة: نعم، يمكنك بدلا من أن تلون الحدود، أن تعطيها صورة كخلفية:
-webkit-border-image: url(image name) 20 20 20 20 round round;
تأثيرات النصوص:
- الظلال: أمر مثل الأمر التالي يعطيك ظلالا للنص:
text-shadow: 3px 3px 3px #CCC;
- إلتفاف الكلمات: أخيراً ستحل العقدة! كنا نستاء كثيراً لأن لم يكن بيداً حيلة لمعالجة مشكلة أن يقوم مستخدم ما بترك تعليقا مثلا ويكتب كلمة طويلة جدا ليس فيها مسافات فيكسر القالب ويشوه المنظر. مع CSS3 ستحل المشكلة بهذا الكود:
word-wrap: break-word;
- استخدام خطوط الوب: وهى أي خط ستقوم أنت بوضعه ضمن ملفاتك واستدعائه بكود بسيطة فيحمله المتصفح تلقائيا:
@font-face {
font-family: 'Name of the new font';
src: url('link to the font');
}
- التحكم في تجاوز النص: وذلك إما بقص النص clip، أو قطعه وإضافة ثلاثة نقاط
text-overflow: clip;
(or) text-overflow: ellipsis;
الخلفيات:
- تحديد حجم صور الخلفية: يمكنك اعطاء ابعاد لتصغير أو تكبير صورة الخلفية:
background-size: 200px 100px;
- أكثر من صورة للخلفية: وهذه خاصية مذهلة أخرى، أن تعطي للعنصر الواحد أكثر من صورة للخلفية:
background: url(image name) left,
url(image name) right,
url(image name) center;
- تحديد تموضع صورة الخلفية: أي أن تتحكم في "من أين يبدأ عمل صورة الخلفية" من المحتوى أم الهوامش أو حتى الحدود.
الأعمدة:
- تقسيم العنصر الواحد إلى عدة أعمدة: مثل الأعمدة في أي محرر نصوص أو أي صحفية مطبوعة. ويشمل ذلك تحديد عرض تلك الأعمدة والمسافات بينها وكذلك الحدود.
الألوان:
- الشفافية: استخدمها مع فايرفوكس منذ زمن، ولكن مع دعم css3 نتمنى أن تطبقها جميع المتصفحات قريبا. والشفافية هى أن تجعل العنصر على درجة ما من الشفافية باستخدام كود مثل:
opacity: 0.4;
- التلوين باستخدام RGBA: وتعني RGB وA ألفا المسئولة عن الشفافية:
background: rgba(255, 0, 0, 0.2);
- فرق الألوان، درجة التشبع والإضاءة: فيمكنك مع CSS3 أن تحدد كل تلك القيم في كود مثل:
background-color: hsl(0,100%, 50%);
وأشياء أخرى:
- إمكانية تغيير المساحة النصية: كما نجد على جوجل كروم الآن إمكانية تغيير مساحة نصية، سوف يتيح لك CSS3 أن تفعل هذا مع أي عنصر آخر بكود بسيط:
resize: both;
- دعم أكبر للحواف الخارجية: وهي ما بعد الحدود. نعرف أن أي عنصر صندوقي هو عبارة عن مساحة المحتوى، الهوامش الداخلية، الحدود، الهوامش الخارجية، بالإضافة إلى الحواف الخارجية. لطالما تواجدت تلك الحواف، ويمكن التعامل معها ليفهمها فايرفوكس مثلا، نتمنى أن تتعامل معها بقية المتصفحات لاحقا:
outline: 2px solid #CCC;
هل ترى معي أن بعض تلك الإضافات تمثل تغيير ثوري كنا نحتاج إليه منذ زمن؟ لنستفيد منه بأقصى درجة إذن. بقى أن تعرف أن CSS3 مازال في المعمل ولم يتم استيعاب جميع تلك الإمكانات بعد في كل المتصفحات.
