CSS3 التدرجات الخطية [نصائح CSS3]

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

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

خلق التدرجات

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

إذا ألقينا نظرة على بناء الجملة الكامل للتدرج اللوني ، فإنه يبدو قليلاً متخم, مما قد يؤدي إلى الارتباك لبعض الناس.

 div background-image: -webkit-linear-gradient (top، # FF5A00 0٪، # FFAE00 100٪)؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛ خلفية الصورة: -ms-linear-gradient (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛ خلفية الصورة: -o-linear-gradient (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛ صورة الخلفية: التدرج الخطي (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛  

لذلك دعونا نحفر في كل جزء من بناء الجملة واحدًا تلو الآخر لجعل الأمور أكثر وضوحًا.

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

 div background-image: linear-gradient (top، # FF5A00، # FFAE00)؛  

المقتطف أعلاه هو الإصدار الرسمي من W3C لإنشاء التدرجات. إنها في الواقع أبسط وتفسر نفسها بنفسها وستؤدي أيضًا إلى إنشاء التدرج التالي.

تستطيع ايضا استخذام الأسفل للقيام بالعكس ، أو غير ذلك حق و اليسار.

يمكننا أيضًا إنشاء تدرج قطري باستخدام درجة زاوية كموقف انطلاق التدرج. هنا مثال:

 div background-image: linear-gradient (45deg، # FF5A00، # FFAE00)؛  

سيقوم المقتطف أعلاه بإنشاء التدرج اللوني التالي:

القيمة الثانية للوظيفة سوف تخبر اللون الأول المعلومات و وقف الموقف وهو مذكور في النسبة المئوية. موقف التوقف هو في الواقع اختياري. يكون المتصفح ذكيًا بما يكفي لتحديد الموضع المناسب ، لذلك عندما لا نحدد نقطة التوقف الأولى التي سيتخذها المتصفح 0٪ كما الافتراضي.

والقيمة التالية هي اللون الثاني مزيج. يعمل مثل القيمة السابقة ، فقط إذا كان آخر لون مطبق ، ولم نحدد وقف الموقف, قيمة 100٪ سوف تؤخذ على النحو الافتراضي. الآن ، دعونا نلقي نظرة على المثال أدناه:

 div background-image: التدرج الخطي (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛  

سيُنشئ المقتطف أعلاه تدرجًا مثل ما رأيناه سابقًا (لا يوجد فرق) ولكن الآن نحدد موضع إيقاف اللون ؛

الآن دعنا نغير توقف اللون, وهذه المرة سوف نحدد 50٪ للون الأول و 51٪ للون الثاني ، ودعونا نرى كيف اتضح ؛

 div background-image: التدرج الخطي (أعلى ، # FF5A00 50٪ ، # FFAE00 51٪) ؛  

شفافية

خلق شفافية في التدرج هو ممكن أيضا. لإنشاء التأثير ، نحتاج إلى ترجمة اللون عرافة إلى رغبا وضع وانخفاض قناة ألفا.

 div background-image: التدرج الخطي (أعلى ، rgba (255،90،0،0.2) ، rgb (255،174،0،0.2)) ؛  

سيؤدي المقتطف أعلاه إلى خفض كثافة اللون بمقدار 20٪, وسوف يتحول التدرج مثل هذا:

ألوان متعددة

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

 div background-image: التدرج الخطي (أعلى ، أحمر ، برتقالي ، أصفر ، أخضر ، أزرق ، نيلي ، بنفسجي) ؛  

سيقوم المقتطف أعلاه بإنشاء قوس قزح التالي.

التوافق المتصفح

لسوء الحظ ، في وقت كتابة هذا التقرير ، لم تدعم جميع المتصفحات الحالية بناء الجملة القياسي. ما زالوا بحاجة إلى بادئة البائع (-بكت-, -MOZ-, -الآنسة- و -س-). لذلك ، يبدو بناء الجملة الكامل هكذا:

 div background-image: -webkit-linear-gradient (top، # FF5A00 0٪، # FFAE00 100٪)؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛ خلفية الصورة: -ms-linear-gradient (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛ خلفية الصورة: -o-linear-gradient (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛ صورة الخلفية: التدرج الخطي (أعلى ، # FF5A00 0٪ ، # FFAE00 100٪) ؛  

من ناحية أخرى ، فإن Internet Explorer ، وتحديداً الإصدار 9 والأقل ، بعيد عن المعيار. التدرج في IE9 وتعلن أدناه مع منقي, لذلك إذا أردنا إضافة التدرج اللوني على تلك المتصفحات ، يتعين علينا كتابة شيء مثل هذا ؛

 div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00، endColorstr = # FFAE00)؛  

ال منقي له حدوده: أولاً ، لا يسمح بإضافة أكثر من ثلاثة ألوان ، وإنشاء تأثير الشفافية أيضًا أمر صعب بعض الشيء - إنه لا يسمح رغبا, لكن IE منقي الاستخدامات #ARGB.

 div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00، endColorstr = # 33FFAE00)؛  

إليك أداة لمساعدتك في التحويل رغبا إلى #ARGB.

• عرض
• تحميل المصدر

كتابة بناء الجملة أسرع

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

هناك العديد من الطرق التي يمكننا القيام بها لتبسيط المهمة ؛ مثل استخدام Prefix-free أو Prefixr أو LESS أو Sass للمساعدة في ترجمة الرموز ، ولكن قبل كل شيء ، نوصي باستخدام هذه الأداة ، ColorZilla Gradient. ستنشئ هذه الأداة ببساطة جميع الرموز اللازمة ليعمل التدرجات في جميع المتصفحات.

الكلمات الأخيرة

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

لا تزال هناك أشياء كثيرة نخطط لاستكشافها التدرجات CSS3 في مشاركاتنا المستقبلية ، لذلك لا تنزعج من موقع Hongkiat.com. أخيرًا ، شكرًا لك على قراءة هذا المنشور ، نأمل أن تستمتع به.

قراءة متعمقة

• رصاصة برهان عبر متصفح خلفيات RGBA - ليا Verou
• CSS3 Image - W3.org
• متى يمكنني استخدام التدرجات CSS3 - CanIUse.com