غالبا ما يستخدم مصممو الويب إطارات شفافة لإضفاء مظهر أنيق وعصري على صفحات الويب الخاصة بهم. تسمح لك الإطارات الشفافة بتسليط الضوء على المحتوى وجعله أكثر جاذبية للزوار.
قد يبدو إنشاء إطار عمل شفاف مهمة صعبة للمطورين المبتدئين ، ولكنه في الحقيقة ليس كذلك. في هذا الدليل التفصيلي ، سوف أشارككم عدة طرق لإنشاء إطارات شفافة باستخدام هتمل و كس.
قبل البدء ، من المهم أن تفهم أن شفافية الإطار تتحقق عن طريق تغيير شفافية لون الإطار أو استخدام صورة شفافة كخلفية للإطار. في هذا الدليل ، سننظر في كلا الخيارين.
دعونا نبدأ مع طريقة بسيطة لإنشاء إطار شفاف باستخدام كس. سوف تحتاج إلى معرفة أساسيات كس لمتابعة هذا الدليل.
- اختيار العنصر المناسب
- ضبط لون الخلفية
- ضبط لون الإطار
- إضافة الظل
- سؤال وجواب
- كيف يمكنني إنشاء إطار شفاف في المغلق?
- كيف يمكنني جعل جانب واحد فقط من الإطار شفافة?
- هل من الممكن عمل إطار شفاف فقط للداخل من العنصر?
- كيف يمكنني جعل الشفافية فقط للإطار, ولكن ليس لمحتوى العنصر?
اختيار العنصر المناسب
عند إنشاء إطار موقع ويب شفاف ، من المهم اختيار العنصر المناسب لهذا الغرض. فيما يلي بعض العناصر الأكثر شيوعا التي يمكن استخدامها لإنشاء إطارات شفافة.
- - هذا عنصر كتلة يستخدم لتقسيم المحتوى إلى أقسام منفصلة. غالبا ما يتم استخدامه لإنشاء إطارات حول كتل المحتوى.
- هذا عنصر صغير يستخدم لتمييز أجزاء النص أو العناصر الصغيرة الأخرى. يمكن أن يكون مفيدا لإنشاء إطارات شفافة حول الكلمات أو العبارات الفردية.
- هذا عنصر كتلة يستخدم لوضع فقرات النص. يمكن استخدامه لإنشاء حدود شفافة حول فقرات بأكملها.
- هذا عنصر يستخدم لإنشاء جداول على صفحة ويب. يمكنك استخدام الجداول لإنشاء حدود شفافة حول خلايا معينة أو مجموعات من الخلايا.
اختيار عنصر يعتمد على الاحتياجات المحددة الخاصة بك ومتطلبات التصميم. من المهم أن نتذكر أن العناصر يمكن أن تكون على غرار باستخدام كس لخلق التأثير البصري المطلوب من الحدود شفافة ، لذلك لا تحد نفسك لهذه العناصر.
ضبط لون الخلفية
لتعيين لون الخلفية لعنصر هتمل ، يمكنك استخدام خاصية كس لون الخلفية. تحدد هذه الخاصية لون الخلفية لمحتوى العنصر.
يمكن أن تكون قيمة خاصية لون الخلفية هي اسم اللون باللغة الإنجليزية أو رمز اللون بتنسيق سداسي عشري أو رغب أو هسل أو كلمات رئيسية مثل شفاف أو وراثة.
- فيما يلي بعض الأمثلة:
- background-color: red;
- background-color: #00ff00;
- background-color: rgb(255, 0, 0);
- background-color: hsl(120, 100%, 50%);
- background-color: transparent;
background-color: inherit;
يمكنك أيضا استخدام خاصية الخلفية لتعيين لون الخلفية مع خصائص أخرى مثل صورة الخلفية وتكرار الخلفية وموضع الخلفية.
مثال الاستخدام:
هذا العنصر له خلفية حمراء.
- ضبط لون الإطار
- يتم تعيين لون الحدود باستخدام خاصية لون الحدود. يمكن أن تأخذ القيم التالية:
- الألوان المسماة: مثل" الأحمر " ، "الأخضر" ، إلخ.,
- رموز الألوان السداسية العشرية: على سبيل المثال ، "# فف0000 " للأحمر,
- قيم رغب: على سبيل المثال ، " رغب (255 ، 0 ، 0)" للأحمر,
قيم رغبا: على غرار رغب ، ولكن مع القدرة على تعيين الشفافية,
| قيم هسل: على سبيل المثال ، " هسل(0, 100%, 50%)" للأحمر, | القيم: على غرار هسل ، ولكن مع القدرة على تعيين الشفافية. |
| مثال الاستخدام: | لون الحدود: |
| أحمر; | لون الحدود: |
| # 0000; | لون الحدود: |
| رغب(255 ، 0 ، 0); | لون الحدود: |
| رغبا (255 ، 0 ، 0 ، 0.5); | لون الحدود: |
هسل (0 ، 100٪ ، 50٪);
لون الحدود:
هسلا(0, 100%, 50%, 0.5);
يعد تحديد لون الحدود إحدى الخطوات الرئيسية عند إنشاء حد شفاف على صفحة ويب.
إضافة الظللإنشاء تأثير الظل لإطارك الشفاف ، يمكنك استخدام خاصية مربع الظل في كس.
يبدو بناء جملة خاصية مربع الظل كما يلي:
مربع الظل: أفقي أوفست عمودي أوفست طمس دائرة نصف قطرها انتشار لون الظل;
مربع الظل: أفقي أوفست عمودي أوفست طمس دائرة نصف قطرها لون الظل;
إذا كنت ترغب في إضافة إزاحة أفقية ورأسية فقط ، فيمكنك استخدام بناء الجملة المختصر:
صندوق الظل: إزاحة أفقية إزاحة رأسية;
مثال على استخدام خاصية مربع الظل لإنشاء ظل:
في المثال أعلاه ، نقوم بإنشاء كتلة مستطيلة بأبعاد 200 بكسل في 200 بكسل وخلفية شفافة. نضيف أيضا تأثير الظل باستخدام خاصية مربع الظل.
في هذا المثال ، سيكون للظل إزاحة أفقية 2 بكسل ، وإزاحة رأسية 2 بكسل ، ونصف قطر ضبابي 4 بكسل ، وسيكون لون الظل أسود بشفافية 0.5.
باستخدام خاصية مربع الظل ، يمكنك إنشاء تأثيرات ظل مختلفة لإطارك الشفاف وتحقيق تأثير مرئي مثير للاهتمام.
سؤال وجواب
كيف يمكنني إنشاء إطار شفاف في المغلق?
لإنشاء حدود شفافة في كس ، يمكنك استخدام خاصية الحدود وخاصية التعتيم. على سبيل المثال ، لإنشاء حد أسود شفاف ، يمكنك تعيين القيم التالية إلى خاصية الحدود: 1 بكسل رغبا الصلبة(0, 0, 0, 0.5), حيث 0.5 هو مستوى الشفافية ، و رغبا(0, 0, 0, 0.5) — هذا هو لون الإطار بتنسيق رغبا ، حيث تشير القيمة الأخيرة إلى شفافية اللون.
كيف يمكنني جعل جانب واحد فقط من الإطار شفافة?
من أجل جعل جانب واحد فقط من الإطار شفافا ، تحتاج إلى استخدام خصائص منفصلة لكل جانب. على سبيل المثال ، لجعل الجانب العلوي من الإطار شفافا ، يمكنك استخدام خاصية الحد الأعلى وتعيين شفافيتها باستخدام خاصية التعتيم أو رغبا. على سبيل المثال ، الحدود الأعلى: 1 بكسل رغبا الصلبة(0, 0, 0, 0.5).