بدأ العمل على تطوير الcss للإصدار الثالث , وهناك الكثير من المميزات الجديدة التي سوف تكون ثورة في عالم تصميم الويب , وستسهل عمل الكثير من المصممين !
لحد الآن , لا يعرف الكثير ان هناك اصدار ثالث من الcss , ولا يستخدمه الكثير !
فقط قرأت امنيات حول النسخة القامة من الcss , واعتقد ان الكثير قد يتحقق …
منه ما كتبته احسان في قائمة الأمنيات .. الخاصة بالـ CSS او ما كتبه الاستاذ احمد في اماني css
ولم اسمع أي كلام يذكر حول الcss وهذا ما دفعني لأكتب في هذا الموضوع …
وهذه خمسة من التقنيات المستقبلية التي يمكننا استخدامها في تصميم مواقعنا الآن !
1- الحافة المدورة للعناصر (border radias )
ربما هي الاكثر شيوعاً واستخداماً في الcss3 نظراً لإستخدامها في الووردبريس بشكل اساسي , وايضا في التويتر وكثير من المواقع الاخرى ! …
انا حقيقة استخدمها في كثير من الاحيان !!
يدعمها كل من فايرفوكس وكروم وسفاري
يكتب الكود كالتالي :
- -moz-border-radius: 20px;
- -webkit-border-radius: 20px;
- border-radius: 20px;
يتحدد درجة دوران الحافة من خلال قيمة الpixels في الكود … وتزيد وتنقص حسب الدوران ! …
سوف تتعرفون اكثر عليها عند استخدامها …
انظر ايضاً …
2-حدود الصورة (Border Image)
كما يظهر من العنوان , يمكننا الآن استخدام صورة كإطار لعنصر او جسم ما في الموقع
سوف تريحنا هذه الخاصية من استخدام الكثير من محررات الصور وتختصر الطريق على الكثير من المصممين في اعطاء افضل شكل نهائي للموقع …
يكتب الكود كالتالي :
- border: 5px solid #cccccc;
- -webkit-border-image: url(/images/border-image.png) 5 repeat;
- -moz-border-image: url(/images/border-image.png) 5 repeat;
- border-image: url(/images/border-image.png) 5 repeat;
المتغير الاول .. يحدد العرض العام للإطار , وهو هنا 5px … ولكن كود “border-image” سوف يستخدم الصورة في الاطار !
قد يكون هذا الامر من الخيال ! , لكنه ممكن الآن …
ويمكن ايضاً استخدام هذه الخاصية في الاطار الجانبي ( احترت كيف اصوغ هذه العبارة , ولكن المقصود بها per-side border .. ترجموا :22: ) مثل :
- border-bottom-rightright-image
- border-bottom-image
- border-bottom-left-image
- border-left-image
- border-top-left-image
- border-top-image
- border-top-rightright-image
- border-right-image
وتكتب بعدها موقع الصورة وعدد التكرار , اعتقد ان الصورة واضحة الآن “^^ !!
يدعم لهذه الخاصية كل من فايرفوكس وسفاري وكروم
ويمكنك ايضاً زيارة
3-ظل الصندوق أو ظل النص (Box Shadow and Text Shadow)
تقريباً هذا اكثر ما اعجبني صمن هذه الخواص ! , وهي امكانية وضع ظل للنص او الصندوق بكل سهولة ومن غير استخدام محررات الصور !
هذا المثال يظهر جلياً في الصورة في الاعلى .. ويمكن استخدامه في الكود التالي …
- -webkit-box-shadow: 10px 10px 25px #ccc;
- -moz-box-shadow: 10px 10px 25px #ccc;
- box-shadow: 10px 10px 25px #ccc;
دعوني اشرح قليلاً … تلاحظون ان هنالك ثلاث محددات .. الاول والثاني (اقصد 10px الاول والثاني ) لتحديد المدى الافقي والعمودي للظل ,
والمحددة الثالثة تحدد مدى ضبابية الظل او ما نعرفه بالblur (بلا بلا بلا بلا … ) , وتحديد اللون في الاخير !
وايضاً ظل النص ممكن كالمثال التالي :
1.text-shadow: 2px 2px 5px #ccc;
تظهر هذه الخاصية في كل من فايرفوكس , سفاري , كروم(ظل الصندوق فقط) , واوبرا (ظل الصندوق فقط ايضاً ) …
ويمكنك المعرفة اكثر حول الخاصية من زيارة
4-شفافية الاجسام والاشكال بكل سهولة (Opacity)
كما يظهر في الصورة اعلاه , فإن التحكم في شفافية العناصر لم يكن يوماً اسهل !! …
ويمكننا تحديد قيمة الشفافية من خلال الcss3 الآن !! …
ومثال على الاستخدام مثلاً مع كود color وبعده opacity بكل بساطة !! :22:
- color: #000;
- opacity: 0.5;
ويمكنك تقليل او زيادة قيمة الopacity وكأنك تستخدم الفوتوشوب ! :18:
يدعم لهذه الخاصية كل من سفاري , اوبرا , فايرفوكس , كروم (اغلب المتصفحات ! )
وايضاً يمكنك قراءة المزيد في
الآن … ننتقل الى التقنية الاكثر تطوراً , والاروع في هذا الموضوع :12:
5-خطوط ويب متغيرة (@font-face )
عندما يعجبك خط تستخدمه في الكومبيوتر ! , تتذكر دائماً انه موجود عندك فقط , ولا تستطيع استخدامه في تصميم الويب لأنه غير موجود عند الآخرين ! , صح ؟ …
لذلك نرى اغلب المصممين يستخدمون المنطقة الخضراء من الخطوط (Arial, Helvetica, Verdana, Georgia, Comic Sans , الخ … ) ولا غيرها !!! …
ومن هنا ظهرت ضرورة هذه التقنية ! , حيث يمكنك تخصيص خط ترفعه في موقعك لتظهر به بعض النصوص في الموقع !
مثال :
- @font-face {
- font-family:‘Anivers’;
- src: url(‘/images/Anivers.otf’) format(‘opentype’);
- }
اعتقد ان المثال واضح “^^ ! , تحدد نوع الخط , وموقع ملف الخط ليحمله الكومبيوتر ويظهر النصوص كما يريد المصمم !
ويمكنك تحديد نوع الخط في عائلة الخط في الكود … مثل (تكملة لكود السابق)
- 5.h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;
يدعم هذه التقنية كل من فايرفوكس , سفاري , اوبرا 10 …
ويمكنك ايضاً قرائة المقالات التالية
See also:
- Fonts available for font-face embedding
- Font-face in IE, making Web fonts work
- Web fonts, the next big thing – A List Apart
———————————————————-
بالرغم من ان css3 في طور الانشاء والتطوير لكن بعض المتصفحات تتابع تقدمه وتطور قواعد بياناتها بآخر المستجدات .. منها Safariالمتفرد بالدعم المطلق للcss3 , واستخدام آخر تقنياته ضمن محاولاته ليكون في قمة متصفحات الانترنت ! , لكن بسبب قلة مستخدمي البرنامج فإن الكثير من العمل الجاد من قبل المنتجين سيبذل لزيادة شعبيته …
Firefox ومن الناحية الاخرى هذا البرنامج يتمتع بقاعدة كبيرة جداً من المستخدمين , ومع تطوير البرنامج الى النسخة 3.1 تم دعم اغلب تقنيات الcss3 , بإفتراض ان المستخدمين سيحدثون البرنامج الى الاصدار الاخير , فإن الكثير من التقنيات سوف تكون مدعومة من قبل الكثير من رواد الانترنت …
Google Chrome تم اطلاقه هذه السنة ! , وبما انه مبني على محرك WebKit فإن اغلب خصائصه ستكون مماثلة لسفاري (Apple) … وبما ان سفاري له نسبة كبيرة ضمن مستخدمي الماكنتوش , الكروم سيتفجر في الساحة وستكون له نسبة معتبرة من مستخدمي الويندوز !!
على كلِ , ما زال العمل متقدماً في تطوير الcss3 والعمل وصل الى مرحلة متقدمة (73% ) وسيتم اطلاقه بشكل رسمي قريباً (بالنسبة الى كلام Blog.SpoonGraphics).
~ الناحية السلبية :
اذا استخدمت التقنيات الجديدة سيمتلك موقعك نسبة من الخيال والجاذبية الكبيرة , ولكن !
- الانترنت اكسبلورر : بما ان دعم الانترنت اكسبلورر بطيء جداً للcs3 فإن 48% من متصفحي الانترنت لن يروا التقنيات الجديدة , ما لم تجعل مايكروسوفت تحديث البرنامج اسهل وبشكل اسرع !!
- عدم صلاحية ورقة الاستايل (style sheet invalid) : بما ان التقنيات ما زالت في طور الانشاء , كما رأينا فإنها تأخذ اكثر من تسمية في كل متصفح , هذا قد يفسد الملف !!
- امكانية الاستخدام المروع للتقنيات : كما هو الحال في فلاتر الفوتوشوب , فإن استخدام هذه الخصائص لا يصلح لجميع التصاميم في جميع المواقع , اذ قد يفسد رونق التصميم وترتيبه وعمليته !!
اعتقد ان هذا ما اعرفه حول الcss3 القادمة … بالرغم من ان كثير من الامنيات لم تتحقق ! , لكن الكثير منها سيتحقق اذا ما اصررنا على المشاركة في تطوير هذه اللغة … كيف , لا اعرف “^^ !!!
اي امنيات تريدونا ان تتحقق في الاصدار القادم من CSS ؟
شكراً لكم smashing ! "^^
كتبوا هنا