CSS 3 + HTML 5 هما مستقبل الويب، ولم يصلا رسميًا بعد، على الرغم من أن العديد من المتصفحات بدأت في تقديم الدعم الجزئي لها. تقدم هذه المقالة 5 تقنيات CSS3 يمكنها مساعدتك في تحقيق مستقبل الويب. في الوقت الحالي، لا ينبغي استخدام هذه التقنيات في مشاريع العملاء الرسمية؛ فهي أكثر ملاءمة لموقع مدونتك الشخصية، أو مجتمع تصميم الويب، أو المواقف التي لن يشتكي فيها العملاء إليك.
1. تأثير الزوايا الدائرية
إحدى الميزات الجديدة الأكثر استخدامًا في CSS3 هي تأثير الزاوية المستديرة. يحتوي كائن HTML القياسي على زوايا مربعة تبلغ 90 درجة ويمكن أن يساعدك في تحقيق زوايا مستديرة.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
حتى زاوية واحدة يمكن تقريبها، ولكن بناء جملة Mozilla وWebkit مختلف قليلاً.
-moz-border-radius-topleft: 20px;
-moz-border
-radius-topright: 20px;
-moz-border-radius-bottomleft
: 10px; -moz-border-radius-bottomright: 10px;
-نصف القطر الأيمن والأيسر: 20 بكسل ؛
-نصف القطر العلوي الأيسر للويب: 20 بكسل ؛
-نصف القطر السفلي لليسار webkit: 10 بكسل
؛ -نصف القطر الأيمن السفلي للويبكيت: 10 بكسل
؛ فايرفوكس، سفاري، كروم
2. الحدود الرسومية
كما يوحي الاسم، الحد الرسومي هو الحد الذي يسمح باستخدام الصور ككائنات. بناء الجملة كما يلي:
border: 5px Solid #cccccc;
-webkit-border-image: url(/images/border-image.png ) 5 تكرار؛
-moz-border- image: url(/images/border-image.png) 5 تكرار؛
border-image: url(/images/border-image.png) 5 تكرار
هنا، الحدود: 5px عرض الحد، ثم كل تعريف صورة الحدود يخبر المتصفح بمقدار مساحة الصورة التي سيتم استخدامها كحدود. يمكن أيضًا تعيين صورة الحدود بشكل فردي لكل حافة:
حد-أسفل-يمين-يمين
-صورة حد
-أسفل-صورة حد-أسفل-يسار
-صورة-يسار-حدود الصورة
-أعلى-يسار-
حدود الصورة-أعلى-
حدود
الصورة-أعلى -يمين-صورة
الحدود-يمين-
المتصفحات المدعومة: Firefox 3.1، Safari، Chrome
3. حظر الظل وظل النص
كانت تأثيرات الظل في يوم من الأيام أمرًا يحبه مصممو الويب ويكرهونه. الآن، مع CSS3، لم تعد بحاجة إلى Photoshop. توجد بالفعل مواقع ويب تستخدم هذه الميزة، مثل موقع 24 Ways
-webkit-box-shadow: 10px 10px 25px ;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
تحدد الخاصيتان الأوليان إزاحة الظل X / Y، وهما هنا 10px، وتحدد الخاصية الثالثة تمويه درجة الظل، والأخيرة تحدد لون الظل. يمكن أيضًا تعيين ظل النص على النحو التالي:
text-shadow: 2px 2px 5px #ccc؛
المتصفحات المدعومة: Firefox 3.1 وSafari وChrome (يدعم Box Shadow فقط)، وOpera (يدعم ظل النص فقط). أخضر القيمة الأخيرة من الألوان الثلاثة الزرقاء تمثل الشفافية بالإضافة إلى ذلك، يمكننا أيضًا استخدام العتامة لتحقيق الشفافية (حاليًا، تُستخدم هذه التقنية في الغالب لتأثيرات مربع الضوء - المترجم)
4. استخدم RGBA لتحقيق تأثيرات الشفافية.
في الوقت الحاضر، يتم تحقيق تأثير الشفافية في تصميم الويب بشكل أساسي من خلال صور PNG (لكنه غير مدعوم جيدًا في متصفح IE - المترجم، في CSS3، يمكن تحقيق تأثير الشفافية مباشرة).
rgba(200, 54, 54, 0.5);
الخلفية: rgba(200, 54, 54, 0.5);
اللون
:
rgba(200, 54, 54, 0.5)
;
وSafari وChrome وOpera (التعتيم) وIE7 (التعتيم مع الإصلاحات)
5. استخدم @Font-Face لتنفيذ الخطوط المخصصة
هناك العديد من الخطوط الآمنة نسبيًا في تصميم الويب، مثل Arial وHelvetica وVerdana وGeorgia وComic Sans (الصينية، بشكل عام، Song Dynasty هي الخطوط الآمنة الوحيدة الآن، باستخدام @font-face الخاص بـ CSS3). هل يمكنني تحديد الخطوط بنفسي، ولكن بسبب مشكلات حقوق الطبع والنشر، فإن الخطوط الفعلية التي يمكن استخدامها محدودة (بالإضافة إلى ذلك، تعد الخطوط الصينية الضخمة أيضًا مشكلة يصعب حلها - مترجم).
بناء الجملة كما يلي:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype')
}
المتصفحات المدعومة: Firefox 3.1، Safari، Opera 10 و IE7 (يتطلب الأمر بعض المتاعب، إذا لم تكن خائفًا من المتاعب، يمكنك تنفيذ هذه الوظيفة في IE، يرجى الرجوع إلى: جعل عمل Font-face في IE)
على الرغم من أن CSS3 لا يزال قيد التطوير، إلا أن هذه الوظائف المذكورة أعلاه متاحة بالفعل في بعض المتصفحات المستخدمة وخاصة سفاري. لسوء الحظ، Safari ليس متصفحًا رئيسيًا.
يتمتع Firefox حاليًا بقاعدة مستخدمين كبيرة، بالإضافة إلى ذلك، يدعم الإصدار 3.1 القادم من Firefox العديد من تأثيرات CSS3 نظرًا لأن مستخدمي Firefox متحمسون للغاية للترقية، فيمكن للعديد من المستخدمين تجربة الميزات الجديدة لـ CSS3 مسبقًا.
تم إصدار Google Chrome للتو هذا العام، وهو يعتمد على محرك Webkit، لذا فهو مشابه جدًا لـ Safari نظرًا لاستخدام Safari بشكل أساسي في سوق Mac، ويمكن لمتصفح Chrome فقط سد الفجوة في سوق Windows.
وفقًا للإحصاءات، اعتبارًا من نوفمبر 2008، استخدم 44.2% من المستخدمين Firefox، و3.1% استخدموا Chrome، و2.7% استخدموا Safari، مما يعني أن بعض وظائف CSS3 يمكنها بالفعل دعم ما يقرب من نصف مستخدمي الإنترنت في دائرة تصميم الويب قد تكون النسبة أعلى، حوالي 73.6% (البيانات مقدمة من Blog.SpoonGraphics)
6. العوامل السلبية
ستجلب ميزات CSS3 الموضحة أعلاه نتائج ممتازة لموقع الويب الخاص بك، ولكن لا تزال هناك بعض العوامل السلبية التي يجب أخذها في الاعتبار:
Internet Explorer: 46% من لا يمكن للإنترنت رؤية هذه التأثيرات، لذا لا تستخدم هذه الأشياء للتصميمات المهمة. تأكد أيضًا من توفر تصميمات بديلة في حالة عدم نجاح هذه التأثيرات.
مشكلات التحقق من صحة CSS: ميزات CSS3 هذه ليست الإصدار النهائي حاليًا، تستخدم المتصفحات المختلفة علامات مختلفة لتنفيذ هذه الميزات، مما قد يسبب مشكلات في التحقق من صحة ورقة الأنماط الخاصة بك.
التعليمات البرمجية المتضخمة: لأن المتصفحات المختلفة تستخدم صيغة تعريف مختلفة، ستصبح تعليمات برمجية CSS الخاصة بك في النهاية متضخمة للغاية.
الاستخدام غير السليم: الاستخدام غير السليم لهذه التأثيرات قد يؤدي إلى بعض العواقب السلبية، خاصة بالنسبة لتأثيرات الظل.
المصدر الدولي لهذه المقالة: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
مصدر الترجمة الصينية: الموقع الرسمي لـ COMSHARP CMS (35 كم) ترجمة )