CSS هي لغة تصميم مواقع ويب معروفة ومستخدمة على نطاق واسع، وقد تمت إضافة بعض الميزات الجديدة التي يمكن أن توفر الوقت في خطة الإصدار 3 (CSS3). على الرغم من أن هذه التأثيرات مدعومة فقط في أحدث إصدارات المتصفح، إلا أنه لا يزال من الضروري والمثير للاهتمام معرفتها. سيعرض لك Bao Fengbinbin 5 تقنيات جديدة مثيرة للاهتمام في CSS في هذه المقالة: الزوايا الدائرية، والزوايا الدائرية الفردية، والعتامة، والظل، وعناصر تغيير الحجم.
1: العلامة الأساسية
قبل أن نبدأ هذا البرنامج التعليمي، دعونا ننشئ الترميز الأساسي الذي سيتم استخدامه خلال البرنامج التعليمي.
يتطلب xHTML الخاص بنا عناصر div التالية:
#round يستخدم كود CSS3 لتحقيق زوايا مستديرة.
#indie، قم بتطبيق عدد قليل من الشرائح الفردية.
#opacity، يوضح طريقة CSS3 الجديدة لتنفيذ العتامة.
#shadow، يوضح كيفية استخدام CSS3 لتحقيق تأثير الظل دون استخدام Photoshop.
#resize، يوضح كيفية استخدام بعض CSS لتحقيق تأثير تغيير الحجم.
لتلخيص ذلك، يجب أن يبدو xHTML الخاص بنا كما يلي:
وفيما يلي المحتوى المقتبس: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
لنقم بإنشاء ملف CSS الأساسي:
وفيما يلي المحتوى المقتبس:
|
كما ترون أعلاه، أعطينا كل عنصر div عرضًا وارتفاعًا يبلغ 300 بكسل وتركناهما يطفوان إلى اليسار، تاركين لنا عناصر div للصفحة بأكملها لتنسيقها لاحقًا.
2: زوايا مستديرة
يوجد حاليًا العديد من الطرق لإنشاء شرائح، لكنها كلها مرهقة. الطريقة الأكثر شيوعًا: أولاً، عليك إنشاء صورة ذات زوايا مستديرة، ثم عليك إنشاء الكثير من عناصر html واستخدام صورة خلفية لعرض الزوايا المستديرة. أنت وأنا نعرف العملية المحددة جيدًا.
سيتم حل هذه المشكلة بسهولة في CSS3 باستخدام خاصية تسمى "border-radius". نقوم أولاً بإنشاء عنصر div أسود ووضع حد أسود له. الحدود هي الشرط الأساسي لتحقيق تأثير سمة "نصف القطر الحدودي".
مثله:
وفيما يلي المحتوى المقتبس: #دائري { |
الآن بعد أن قمت بإنشاء عنصر div، يبدو تمامًا كما توقعت، بطول 300 بكسل وزاوي وأسود. لنقم الآن بإضافة التعليمات البرمجية لتنفيذ الزوايا الدائرية، وهو أمر بسيط للغاية ولا يتطلب سوى سطرين من التعليمات البرمجية.
وفيما يلي المحتوى المقتبس: #دائري { |
أضفنا هنا سطرين متشابهين من التعليمات البرمجية، -moz- لمتصفح Firefox و -webkit- لمتصفح Safari/Chrome.
ملاحظة: حتى الآن، لا يدعم متصفح IE سمة نصف القطر الحدودي، لذلك إذا كنت تريد أن يكون لـ IE تأثير زاوية مستديرة، فأنت بحاجة إلى إضافة زوايا مستديرة بشكل منفصل.
الترجمة الحرفية لخاصية border-radius هي نصف قطر الحدود. تمامًا مثل Photoshop، كلما زادت قيمته، زادت الزوايا المستديرة.
3: زوايا مدورة فردية
إذا اتبعت العادات السابقة، فسوف تضيع الكثير من الوقت، والآن يمكن لـ CSS3 حلها بسرعة!
الآن نريد فقط أن يتم تقريب الزوايا اليمنى العلوية والسفلية اليمنى من div، لذلك نحتاج فقط إلى إجراء تعديلات طفيفة:
وفيما يلي المحتوى المقتبس: #إيندي { |
فقط تخيل ما هي العناصر الموجودة في صفحة الويب التي سيتم استخدام هذا الأسلوب من أجلها؟ نعم، إنه زر التنقل المبوب!
4: تعديل العتامة باستخدام CSS3
يمكنك الآن كتابة بضعة أسطر من التعليمات البرمجية بشكل تقليدي لتنفيذ تأثير العتامة (الاختراق). ومع ذلك، CSS3 يبسط هذه العملية.
من السهل تذكر هذا السطر من التعليمات البرمجية، فقط "Opacity: value;":
وفيما يلي المحتوى المقتبس: #التعتيم { لون الخلفية: #000؛ العتامة: 0.3؛ } |
5: تأثير الظل
هناك طرق عديدة لتحقيق الظلال، وأكثرها شيوعًا هو استخدام Photoshop لإنشاء صورة ظل ثم تطبيقها على خصائص الخلفية. لكن CSS3 يجعل عملك أكثر كفاءة، ولسوء الحظ، يدعم Safari وChrome فقط هذه الميزة الجديدة حاليًا.
يتطلب الأمر سطرًا واحدًا فقط من التعليمات البرمجية، ولكنه يحتوي على 4 قيم مختلفة:
وفيما يلي المحتوى المقتبس: -webkit-box-shadow: 3px 5px 10px #ccc; |
اسمحوا لي أن أشرح ما تمثله هذه القيم الأربع. أول 3 بكسل هو المسافة الأفقية (الأفقية) بين الظل المحدد وعنصر div، والثاني 5 بكسل يشير إلى المسافة الرأسية (الرأسية) بين الظل وdiv. تشير القيمة الثالثة 10 بكسل إلى تمويه الظل (على غرار التدرج في الفوتوشوب)، وكلما كانت القيمة أكبر، كانت أكثر دقة. يعلم الجميع أن القيمة النهائية هي لون الظل.
كود تأثير الظل النهائي الخاص بنا؛
وفيما يلي المحتوى المقتبس: #الظل { لون الخلفية: #fff؛ الحدود: 1 بكسل صلب #000؛ -webkit-box-shadow: 3px 5px 10px #ccc; } |
كما ترون، لدينا div خلفية بيضاء، وحدود سوداء، وظلال رمادية فاتحة.
6: تغيير الحجم
في أحدث إصدار من CSS، من الممكن تغيير حجم العناصر (ولكنها مدعومة حاليًا بواسطة Safari فقط)
بعد استخدام هذا الرمز، سيظهر مثلث صغير في الركن الأيمن السفلي من العنصر الخاص بنا لتذكير المستخدم بإمكانية تغيير حجم هذا العنصر. لا يزال الرمز بسيطًا للغاية، ويمكن القول أنه يتطلب سطرًا واحدًا فقط من التعليمات البرمجية، بالطبع، يمكنك أيضًا استخدام بعض الخصائص التي استخدمتها من قبل، مثل "max-width"، و"max-height"، و" الحد الأدنى للعرض" و"الحد الأدنى للارتفاع".
وفيما يلي المحتوى المقتبس: # تغيير الحجم { لون الخلفية: #fff؛ الحدود: 1 بكسل صلب #000؛ تغيير الحجم: كلاهما؛ الفائض: تلقائي؛ } |
نتحدث هنا بشكل أساسي عن سمات تغيير الحجم والتجاوز: كلاهما يعني أنه يمكن تغيير حجم جميع الجوانب، كما يشير الاسم، فهي أفقية ورأسية. يعمل الفائض مع تغيير الحجم، لذلك يتم استخدام تلقائي هنا.
تلخيص
إذن، هل استفدت أي شيء من هذه المقالة؟ على الرغم من أن عددًا قليلاً فقط من المتصفحات يدعم الآن CSS3، إلا أنه لا يمكن إنكار أن CSS3 سيوفر بالفعل المزيد من الوقت في عملنا. إذا كان لديك بعض المعرفة والفهم للتحسين التدريجي، فأعتقد أنك ستقبل بسهولة هذا الإصدار الجديد القوي من CSS3. لا تقضي كل وقتك في IE6، وإلا ستصبح مجرد مهندس تطوير أمامي عفا عليه الزمن.