العديد من نصائح CSS3 التي يجب أن تعرفها

ربما سمع الكثير منكم الكثير من الشائعات حول CSS3، ولكن ما هي بعض تقنيات CSS3 التي يمكننا استخدامها فعليًا اليوم؟ سأعرض لك في هذه المقالة بعض تقنيات CSS3 المميزة التي تعمل بشكل جيد في بعض المتصفحات الرئيسية (مثل متصفحات Firefox وChrome وSafari وOpera). ستؤدي هذه التأثيرات إلى تقليل العرض في المتصفحات غير المدعومة (مثل Internet Explorer). يمكن استخدام العديد من أنماط CSS3 المقترحة خارج الصندوق باستخدام إعلانات خاصة بالمتصفح.

إذا كنت لا تعرف ما هي الإعلانات الخاصة بالمتصفح، فكل ما عليك فعله هو أن تتذكر أنها كلها بادئات محددة قبل خصائص نمط CSS المتعلقة بموفر النواة. نظرًا لأن CSS3 لم يتم دعمه بشكل كامل بعد، فنحن بحاجة إلى استخدام هذه الإعلانات المحددة. النموذج المحدد هو كما يلي:

* بادئة متصفح Mozilla/Firefox/Gecko: -moz-
* بادئة متصفح Webkit (Safari/Chrome): -webkit- (ملاحظة: لا يمكن استخدام بعض بادئات Wbkit إلا ضمن Safari ولا يدعمها Chrome.)

كما رأيت، أحد عيوب استخدام هذه الإعلانات هو أننا إذا أردنا الحصول على تأثيرات CSS3 في Firefox وSafari وChrome، فإننا بحاجة إلى استخدام جميع البادئات المذكورة أعلاه. ليس من المستغرب أن Internet Explorer لا يدعم CSS3 وبالتالي لا يحتوي على إعلان بادئة محدد مثل المتصفحات الرئيسية الأخرى.

حسنًا، يكفي هذا، فلنحاول ذلك على الفور. ملحوظة: إعلانات الأنماط التي لا تحتوي على هذه البادئات هي مقترحات المواصفات الفعلية لمعيار W3.

وصف تجريبي (مثال) حول هذه الصفحة

كل هذه الأمثلة موجودة في هذه الصفحة. إذا لم تتمكن من عرض تأثيرات الأمثلة بشكل طبيعي (أو يمكنك عرض جزء منها فقط)، فهذا يعني أن المتصفح الذي تستخدمه لا يدعم تأثيرات CSS3 هذه.

تأثير الظل

تقبل تأثيرات الظل قيم معلمات متعددة. الأول هو لون الظل، والذي يقبل أيضًا أربع قيم أخرى للطول (الطول) أول قيمتين للطول هما إزاحة X (أفقية) وإزاحة Y (عمودية). المعلمة التالية هي القيمة التي تعكس الغموض. يتم استخدام القيمة الرابعة والأخيرة لتحديد مدى انتشار التمويه.

ظل الصندوق: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

مظاهرة تأثير الظل

تأثير التدرج

يمكن أن تكون أنماط التدرج في CSS3 مربكة في البداية، خاصة الاختلافات بين تدرجات -moz و-webkit. في -moz، تحتاج أولاً إلى تحديد اتجاه التدرج، ثم تحديد ألوان البداية والنهاية. التدرج اللوني لـ -webkit أكثر تعقيدًا بعض الشيء، تحتاج أولاً إلى تحديد نوع التدرج، ثم تحدد القيمتان التاليتان الاتجاه، وتحدد القيمتان الأخيرتان لون البداية ولون النهاية. من التدرج.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear، أعلى اليسار، أسفل اليسار، من (#1aa6de)، إلى (#022147))؛

مظاهرة تأثير التدرج

وضع الألوان RGBA

إن تعريف اللون الفعلي لـ RGBA ليس معقدًا كما يبدو، فهو يقبل أربع قيم للمعلمات: القيمة الحمراء، والقيمة الخضراء، والقيمة الزرقاء، والشفافية. نحن لا نستخدم القيمة السداسية العشرية (#) للون. نحن نضبط اللون في وضع RGB، حيث يمكن للشفافية ضبط التأثير الشفاف للون. تتراوح الشفافية من 0 إلى 1، حيث يكون 0 معتمًا تمامًا و1 شفافًا تمامًا. تبلغ شفافية الأمثلة التوضيحية التالية كلها 0.5، وشفافية العنصر 50%، ولا يتطلب rgba أي إعلان محدد لبادئة المتصفح.

لون الخلفية: rgba(0, 54, 105, .5);

وضع الألوان HSL (Hue H، Saturation S، Lightness L)

بالإضافة إلى RGBA، يدعم CSS3 أيضًا وضع الألوان HSL. وهذا يمنحنا حرية كبيرة في اختيار الألوان والنغمات. في نموذج الألوان HSL، يشير H إلى درجة اللون، وS إلى chroma، وL إلى السطوع. Hue هي قيمة الزاوية على عجلة الألوان، في حين أن التشبع والسطوع هما القيمتان النسبيتان للون.

لون الخلفية: HSL (209,41.2%، 20.6%)؛

مثال تجريبي لـ HSL

لون الحدود

لاستخدام نمط CSS هذا، تحتاج إلى تحديد border-top، و border-right، و border-bottom، و border-left على التوالي لتحقيق التأثيرات التالية. لاحظت أنه تم تعريف حد بمقدار 8 بكسل، ثم تم تعريف الحد بـ 8 ألوان مختلفة. وذلك لأن عدد ألوان الحد يجب أن يتوافق مع قيمة عرض البكسل للحد.

الحدود: 8px الصلبة #000؛
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

عرض لون الحدود

إعدادات لون اختيار النص

يجب أن أقول إن تعريف لون اختيار النص يعد ميزة جديدة ومثيرة جدًا. عندما رأيت هذا لأول مرة في CSS Tips، اعتقدت أنه كان مدروسًا للغاية. باستخدام زوج ::selection من العناصر الزائفة، يمكنك تغيير اللون والخلفية عندما يقوم المستخدم بتحديد عنصر نص. إذا كنت تسأل عن الرأي، أعتقد أنه جميل جدا. على الرغم من إزالة ::select من مسودة CSS3 الحالية، إلا أننا نأمل في إضافتها لاحقًا.

::select {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0;

عرض توضيحي لاختيار لون النص

تشوه

باستخدام أنماط التحويل، يمكنك جعل العنصر يظهر بشكل أكبر عند تمرير الماوس عليه. اضبط قيمة المقياس على قيمة أكبر من 1 وسيتم قياس العنصر. وعلى العكس من ذلك، إذا كانت القيمة أقل من 1، فسيتم تقليل حجم العنصر. بالإضافة إلى المقياس، هناك العديد من التشوهات المختلفة المتاحة. يمكنك زيارة صفحة مطور Firefox لمعرفة ما يمكنهم تحقيقه

-تحويل moz: مقياس (1.15)؛-تحويل webkit: مقياس (1.15)؛

مظاهرة تأثير التشوه

تخطيط متعدد الأعمدة

باستخدام نمط التخطيط الجديد متعدد الأعمدة، يمكنك منح النص الخاص بك تأثير تخطيط "الصحيفة". بالمقارنة مع طريقة التنفيذ في CSS2، في CSS3، يكون تحقيق هذا النوع من التأثير أسهل بكثير بالنسبة لنا. وفيما يلي أحدد عدد الأعمدة التي يحتاجها الطائر، وكذلك نوع قواعد الفصل ومدى حجم الفجوات بين الأعمدة. إنه سهل الاستخدام، أليس كذلك؟

-عدد أعمدة moz: 3؛-قاعدة عمود moz: صلبة 1 بكسل أسود؛-فجوة عمود moz: 20 بكسل؛

تلخيص

آمل أن أكون متحمسًا لهذه الميزات في CSS3 مثلي. إنه يمنح مصممي ومطوري الويب المزيد من القوة ويبسط العديد من الجوانب. الآن علينا فقط أن ننتظر حتى تدعمه جميع المتصفحات. وبطبيعة الحال، المعرفة التي أعرضها هنا هي مجرد قمة جبل الجليد من ميزات CSS3 الجديدة. إذا كنت تريد المزيد من المعلومات والنصائح والمساعدة، أنصحك بزيارة المواقع الإلكترونية التالية.