تأثير الزوايا المنحنية باستخدام CSS فقط. إنشاء تعليقات إطار التعليقات CSS مع CSS Corner

فلاد ميرزييه

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

الخطوط العريضة للملكية

أبسط خاصية لإنشاء إطار. لديها نفس المعلمات كحدود، ولكن يختلف بشكل كبير عن بعض التفاصيل:

• يتم عرض الخطوط العريضة حول العنصر (الحدود داخل)؛
• الخطوط العريضة لا يؤثر على حجم العنصر (يتم إضافة الحدود إلى عرض وارتفاع العنصر)؛
• لا يمكن تثبيت الخطوط العريضة إلا حول العنصر بالكامل، ولكن ليس على جوانب منفصلة (يمكن استخدام الحدود لأي جانب أو كل مرة)؛
• على المخطط التفصيلي لا يطبق دائرة نصف قطر المدخل المحدد بواسطة خاصية Radius Border-Radius (على الحدود).

السؤال ينشأ - في الحالات التي يحتاجها الخطوط العريضة، عندما يتم اتخاذ دوره، على الرغم من الاختلافات المدرجة، بشكل كامل من الحدود؟ الحالات ليست كثيرا، لكنهم يجتمعون:

• إنشاء إطارات ملونة معقدة؛
• إضافة إطار إلى عنصر عند تحريك مؤشر الماوس؛
• إخفاء الإطار المضافة من قبل المتصفح تلقائيا لبعض العناصر عند تلقي التركيز؛
• للحصول على مخطط تفصيلي، يمكنك ضبط المسافة من حافة العنصر إلى الإطار باستخدام خاصية Offset المخطط التفصيلي، لإنشاء.

إطارات متعددة الألوان

يجب أن يكون مفهوما أن المخطط التفصيلي لا يستبدل الحدود وقد يكون ذلك موجودا مع ذلك، كما هو موضح في المثال 1.

مثال 1. إنشاء إطار

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

تين. 1. الإطار حول العنصر

الإطار عند استخدام: تحوم

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

مثال 2. الإطار عند تحوم

الخطوط العريضة ليست مناسبة دائما، إذا لم تعمل فقط على تقريب الزوايا. هنا الطريقة الثانية مناسبة - إضافة إطار غير مرئي أو إطار يتزامن مع لون الخلفية، ثم قم بتغيير معلماته عند تحوم (مثال 3). ثم لن تحدث عدم تعويض العنصر، لأن الإطار هو في البداية هناك بالفعل. ولكن تذكر دائما أنه يتم استهلاك عرض العنصر من قيم العرض والحدود على اليسار والحدود على اليمين. وبالمثل، مع ارتفاع.

مثال 3. الإطار عند تحوم

الإطار حول الحقول الميدانية

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

تين. 2. الإطار حول الحقول

مثال 4. إزالة الإطار

إطارات من خلال مربع الظل

على الرغم من أن خاصية Shadow Box-Shadow مصممة لإضافة ظل حول العنصر، يمكنك أيضا إنشاء إطار به، ولا يمكن تصنيعها عبر الحدود أو المخطط التفصيلي. كل ذلك بسبب حقيقة أن عدد الظلال يمكن أن يكون غير محدود، يتم سرد المعلمات من خلال الفاصلة.

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

على سبيل المثال 4، يتم عرض إضافة إطارات وحدود واحدة إلى اليمين باستخدام خاصية ظلال مربع واحد.

مثال 4. استخدام مربع الظل

وتظهر نتيجة هذا المثال في الشكل. 3.

تين. 3. الإطارات التي تم إنشاؤها بواسطة خاصية Shadow Box

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

تم استخدام هذا التأثير للإثبات على الدرس "خلفيات متعددة والسكتة الدماغية باستخدام CSS2". بالإضافة إلى ذلك، يمكن النظر إلى استخدام الزوايا المنحنية في تصميم موقع الويب الحقيقي من قبل مثال ييويبو. لكن موقع Yiibu يستخدم الصور، ونحن نستخدم العناصر الزائفة والكرمنة.

بداية

لا شيء صعب. أي عنصر مناسب ولا يلزم أي تمييز إضافي. كل شيء يبدأ بمستطيل رسمي رسمي. سوف تسحب المستعرضات الذين لا يدعمون العناصر الزائفة (IE6 و IE7) أيضا.

إضافة موقف: الخاصية النسبية تجعل من الممكن لتحديد المواقع المطلقة للعناصر الزائفة.

ملاحظة (الموقف: قريب؛ العرض: 30٪؛ الحشو: 1EM 1.5em؛ الهامش: 2EM السيارات؛ اللون: #FFF؛ الخلفية: # 97C02F؛)

يتم إنشاء Coil Corner باستخدام عنصر زائف، يتم وضعه في الركن العلوي من المستطيل. عنصر الزائفة ليس لديه عرض وطول، ولكن يتم إعطاء السكتة الدماغية سميكة. عن طريق تغيير سمك السكتة الدماغية، سنقوم بتغيير حجم الزاوية المنحنية.

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

ملاحظة: قبل: مطلق؛ أعلى: 0؛ الحق: 0؛ حد الحدود: 0 16PX 16PX 0؛ نمط الحدود: الصلبة؛ الحدود اللون: # 658E15 #FFF؛)

هذا هو كل ما تحتاجه لإنشاء تأثير بسيط لقانون منحني مماثل لموقع Yiibu.

Firefox 3.0 لا يسمح بتحديد المواقع العناصر الزائفة. يمكنك استخدام عدد من الخصائص لتصحيح الموضع في هذا المتصفح.

ملاحظة: قبل (... عرض: كتلة؛ العرض: 0؛)

إضافة ظل ضوء

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

ملاحظة: قبل (... -Webkit-Box-Shadow: 0 1PX 1PX RGBA (0،0،0،0.3)، -1px 1PX 1PX RGBA (0،0،0،0،0)؛ -MOZ-Box- الظل: 0 1PX 1PX RGBA (0،0،0،0،3.3)، -1px 1PX 1PX RGBA (0،0،0،0،0،2)؛ مربع الظل: 0 1PX 1PX RGBA (0،0، 0،0،3.3)، -1px 1PX 1PX RGBA (0،0،0،0.2)؛)

زوايا مدورة

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

يمكن فقط متصفحات WebKIT جعل الزوايا الدائرية للعناصر الزائفة، إذا كان لديهم جزأين فقط من السكتة الدماغية. Opera 11 و Firefox 3.6 إنشاء حفنة غير سارة. علاوة على ذلك، لدى Opera 11 خطأ أقصى في هذه العملية.

يستخدم استخدام جميع الأطراف الأربعة المشكلات في Opera 11 و Firefox 3.6. لكن هذه الطريقة يؤدي الحلول إلى خطأ في Safari 5، والتي يتم التعبير عنها في سحب الخط القانوني مع الأسنان. تجاوز هذه المشكلة يمكنك ضبط اللون على جزء واحد على الأقل من السكتة الدماغية شفافة.

سيكون لون الخلفية مرئيا من خلال السكتة الدماغية الشفافة. في الحالة المثالية، سيشكل هذا النهج تأثير وتحتوي على الحد الأدنى من التعليمات البرمجية. لكن Opera 11 يظهر لون الخلفية من خلال السكتة الدماغية الشفافة فقط تحت الشرط الذي تم تعيين خاصية الحد الأدنى لرادواد نصف قطرها.

مذكرة مدورة: قبل: مطلق؛ أعلى: 0؛ صحيح: 0؛ حد الحدود: 8px؛ الحدود اللون: #FFFFFFFFR شفافة شفافة؛ الخلفية: # 658E15؛ -Webkit الحدود أسفل نصف قطرها: 5 بكسل؛ -moz -Border-RADIUS: 0 0 0 5 بكسل؛ الحدود نصف قطرها: 0 0 0 5 بكسل؛ عرض: كتلة؛ العرض: 0؛)

يحتوي ملف CSS لصفحة العرض التوضيحية على تعليقات مفيدة للعمل. يحتوي كل متصفح على خصائصه الخاصة عند استخدام خاصية الحد الأدنى أو السكتة الدماغية من العناصر دون عرض وارتفاع.

المنظر النهائي للرمز

يرد أدناه رمز CSS التالي، وهو أمر ضروري لإنشاء تأثير الزوايا المنحنية بظلال خفيفة واستخدام عنصر HTML واحد فقط.

الموقف: قريب؛ العرض: 30٪؛ الحشو: 1EM 1.5em؛ الهامش: 2EM السيارات؛ اللون: #FFF؛ الخلفية: # 97C02F؛ إخفاء الفائض؛ ). ملاحظة: قبل: المطلق؛ أعلى: 0؛ الحق: 0؛ حد الحدود: 0 16 بكسل 16PX 0؛ نمط الحدود: الصلبة؛ لون الحدود اللون: #FFFFFFF # 658E15 # 658E15؛ خلفية: -Shadow: 0 1PX 1PX RGBA (0،0،0،0،3.3)، -1px 1PX 1PX RGBA (0،0،0،0،2)؛ -MOZ- صندوق الظل: 0 1PX 1PX RGBA (0، 0،0،0،3.3)، -1px 1PX 1PX RGBA (0،0،0،0،0،2)؛ مربع - الظل: 0 1PX 1PX RGBA (0،0،0،0.3.3)، -1px 1PX 1PX RGBA (0،0،0،0،0،2)؛ عرض: كتلة؛ العرض: 0؛ / * التغلب على القيود فايرفوكس 3.0 * /). Note.Unded. -BORDER-RADIUS: 5PX؛ الحدود نصف قطرها: 5 بكسل؛). Note.Runded: قبل (عرض الحدود: 8PX؛ لون الحدود: #FFF #FFF شفافة شفافة؛ -Webkit-Border-bland-left-Radius: -Moz-border دائرة نصف قطرها: 0 0 0 5 بكسل؛ الحدود نصف قطرها: 0 0 0 5 بكسل؛)

استنتاج

تحتوي الصفحة التجريبية على أمثلة باستخدام ألوان مختلفة للتأكد من وجود سهولة كافية لاستخدام التأثير.

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

فلاد ميرزييه

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

تين. 1. مثلثات في تصميم المواقع

لا يمكنك مباشرة إنشاء مثلث مع أدوات CSS، لذلك تسمح لك طريقتان بإضافتها إلى الحدود وتحويلها.

باستخدام الحدود.

على الرغم من أن الحدود التي تم إنشاؤها من خلال خاصية الحدود لا تتعلق مباشرة بالمثلثات، إلا أنها تكون حدود لاستخدامها في معظم الأحيان. إذا قمت بتعيين عرض الصفر وارتفاع العنصر، وكذلك تثبيت حدود سميكة بما فيه الكفاية، فسنرى مجموعة من أربعة مثلثات (الشكل 2). من أجل الوضوح، تحدد الحدود على جميع الجوانب ألوان مختلفة.

تين. 2. إضافة الحدود إلى البند

ترك الحدود المرغوبة فقط، والباقي من خلال القيام شفافة، نحصل على مثلث اللون المطلوب (الشكل 3).

تين. 3. عنصر مع حدود شفافة

يوضح المثال 1 إضافة مثلث إلى الكتلة من خلال عنصر زائف :: After.

مثال 1. كتلة مع مثلث

للعناصر المحددة تماما، فإن العرض الصفر والارتفاع ليس ضروريا.

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

الطاولة. 1. أنواع ممكن من المثلثات

منظر	أسلوب
	الحدود: 20px الصلبة شفافة؛ أعلى الحدود: 20px الصلبة الأخضر.
	الحدود: 20px الصلبة شفافة؛ الحدود الحق: 20px الأخضر الصلبة؛
	الحدود: 20px الصلبة شفافة؛ أسفل الحدود: 20PX الأخضر الصلبة؛
	الحدود: 20px الصلبة شفافة؛ الحدود اليسار: 20px الأخضر الصلبة؛
	الحدود: 20px الصلبة شفافة. أعلى الحدود: 20px الصلبة الأخضر. الحدود الحق: 20px الأخضر الصلبة؛
	الحدود: 20px الصلبة شفافة؛ الحدود الحق: 20px الأخضر الصلبة؛ أسفل الحدود: 20PX الأخضر الصلبة؛
	الحدود: 20px الصلبة شفافة. أسفل الحدود: 20PX الأخضر الصلبة؛ الحدود اليسار: 20px الأخضر الصلبة؛
	الحدود: 20px الصلبة شفافة؛ الحدود اليسار: 20px الأخضر الصلبة؛ أعلى الحدود: 20px الصلبة الأخضر.

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

يمكن إجراء مثلث من قبل نموذج آخر، إذا قمت بتعيين سمك مختلف للحدود. لذلك، رمز إنشاء كتلة موضحة في الشكل. 4 يعطى في المثال 2.

تين. 4. مثلث حاد

مثال 2. مثلث حاد

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

تين. 5. الإطار مع الزاوية

مثال 3. المثلثات تراكب

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

استخدام التحول

بمساعدة التحول، يمكننا تدوير العنصر المربع بنسبة 45 درجة والحصول على المعين منه. هذا ليس مثلث على هذا النحو، لذلك نحتاج إلى مغادرة الجزء البارز إلينا، وبقية الاختباء بعد عنصر آخر (مثال 4).

مثال 3. التحول

وتظهر نتيجة هذا المثال في الشكل. 6.

تين. 6. مثلث مع الظل

1. , , - خصائص CSS.
2. (شفافة) - الممتلكات CSS. مسؤولة عن إنشاء إطار قطري
3. "PX" - القيمة في بكسل

في هذه المقالة، سنتحدث إليكم عن إنشاء إطار، ولكن ليس مربعا عاديا، لكنه مدور. لديهم المزيد منظر جميل من الإطارات المربعة العادية دون التقريب.

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

في هذه المقالة، سنفكر في إنشاء إطارات مستديرة بالتفصيل وليس فقط. في CSS هناك شيء مثل إطار الثلاثي، ولكن أدناه.

إطارات التقريب مع

أتش تي أم أل (الهامش: 0؛ الحشو: 15VH 0 0 0؛) # acondent (الحدود: 5px الصلبة الأحمر؛ الارتفاع: 70 نقطة؛ العرض: 80٪؛ الحدود نصف قطرها: 15 بكسل؛ الهامش: 0 السيارات)

تسمح لك خاصية CSS هذه تقريب حدود العنصر. يستخدمه بعض المطورين دون إنشاء إطار مرئي، لإنشاء تخطيطات على حاوية الجسم مدورة.

بمساعدة Radii القياسية، يمكنك إنشاء أرقام مدورة، مثل دائرة أو بيضاوية.

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

الممتلكات نفسها إنه سجل مخفض لأربعة خصائص: , , و وبعد كل واحد منهم يحدد دائرة نصف قطرها التقريب لكل من الزوايا الأربع.

خاصية بسيطة يمكن استخدامها كل من قيم واحد و 4. يعمل وكذلك مع الممتلكات أو .

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

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

بالإضافة إلى التقريب المعتاد، يمكن استخدام نصف قطر إضافي، على سبيل المثال، لإنشاء القطع الناقص.

للقيام بذلك، من الضروري تقسيم قيم اللقطة.

ملكية - أمثلة:

الآن سنظهر بضع أمثلة لإنشاء حد مستدير. لدراسةها بمزيد من التفاصيل، قم بتنزيل مصادرنا.

خلق مثلثات مع

لإنشاء مثلثات، من الضروري استخدام العقار وبعد ولكن هنا سيستخدمها تختلف قليلا عن إنشاء إطار تقليدي.

أولا، قم بتعيين عرض الصفر والارتفاع للعنصر مع مثلث.

بعد ذلك، اكتب العديد من الخصائص. الأول هو الشيء الرئيسي، خاصية الإطار. يتم إنشاؤها كالعادة تقريبا. حددنا العرض ونوع السطر وأدخل القيمة "الشفافية". إنها مسؤولة عن إنشاء مثلث.

من أجل إنشاء جانب سلس من المثلث، تحتاج إلى إنشاء سطر منفصل من الإطار لهذا الجانب.

استنتاج

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

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

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

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

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

الخيار الأول:

CSS.

Uguinsa_utomatio_npones (
عرض: كتلة مضمنة؛
العرض: 295 بكسل
الموقف: قريب؛
الحدود: 1.5PX الصلبة # 1B629E؛
الانتقال: كل شيء. 3s سهولة؛
الهامش: 5 بكسل؛
المؤشر: مؤشر؛
}
.ugoinsa_utomatio_npones: قبل،. ugoinsa_utomatio_npones: بعد (
محتوى: ""؛
Z-Index: -1؛
العرض محجوب؛
الموقف: المطلق؛
الخلفية: #FFF؛
أعلى: 50٪؛
اليسار: 50٪؛
تحويل: ترجمة (-50٪، -50٪)؛
التكرار للرسوم المتحركة: 1؛
تحويل الأصل: 50٪ 50٪؛
}
.ugoinsa_utomatio_npones: قبل (
العرض: Calc (100٪ + 4PX)؛
الارتفاع: 75٪
Z- مؤشر: 1؛
الانتقال: ارتفاع 0.6S؛
}
.ugoinsa_utomatio_npones: بعد (
الارتفاع: Calc (100٪ + 4PX)؛
العرض: 85٪؛
Z- مؤشر: 1؛
الانتقال: عرض 0.7s؛
}
.ugoinsa_utomatio_npones: Hover: قبل، .uguinsa_utomatio_npones: التركيز: قبل (
الارتفاع: 50٪؛
}
.ugoinsa_utomatio_npones: تحوم: بعد، .uguinsa_utomatio_npones: التركيز: بعد (
العرض: 74٪؛
}
.Seclepok_egulaned_demob (
الحشو: 29 بكسل
Z-Index: 2؛
الموقف: قريب؛
نص محاذاة: مركز؛
}

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

الخيار الثاني:

CSS.

PVOBAMOCO-MPAGACES (
الموقف: قريب؛
عرض: كتلة مضمنة؛
العرض: 283px؛
الهامش: 7PX 0 37PX 0؛
الحشو: 28 بكسل؛
اللون: # F3eaea؛
نص محاذاة: مركز؛
الخلفية: # 2B22A0؛
خلفية: تدرج خطي (إلى أسفل اليسار، شفافة 50٪، RGBA (16، 16، 16، 0.4) 0) عدم تكرار 100٪ 0 / 30PX 30PX، الخطي التدرج (-135DEG، RGBA (0، 0، 0 ، 0 0) 20px، # 334ab9 0)؛
مرشح: انخفاض الظل (18PX 28PX RGBA (14، 14، 14، 0.1)؛
}
. pvobamoco-mpwagensy :: قبل (
محتوى: ""؛
الموقف: المطلق؛
أعلى: 30px؛
اليمين: 0؛
خلفية: تدرج خطي (إلى أسفل اليسار، RGBA (0، 0، 0، 0) 50٪، RGBA (14، 14، 14، 0.1) 0) 100٪ 0 لا تكرار؛
العرض: 28 بكسل
الارتفاع: 28 بكسل
تحويل: تدوير (180DEG)؛
}

هنا في البداية، لا يتم تسجيل التأثير، ولكن هناك ظل جميل يمكنك زيادة وتغيير نطاق الألوان بشكل مستقل.

الخيار الثالث:

CSS.

keculosubes_aspectiveB (
الموقف: قريب؛
عرض: كتلة مضمنة؛
العرض: 295 بكسل
الحشو: 30px؛
الهامش: 9 بكسل؛
الحد الأدنى الطول: 91px؛
الحدود: 2px الصلبة # bfe2ff؛
نص محاذاة: مركز؛
}
. malugeke_deculos (
العرض: 148px؛
الارتفاع: 148px؛
إخفاء الفائض؛
الموقف: المطلق؛
}
. malugeke_deculos :: من قبل،. malugeke_deculos :: after (
الموقف: المطلق؛
Z-Index: -1؛
محتوى: ""؛
العرض محجوب؛
الحدود: 5px الصلبة # 2980B9؛
}
. malugeke_deculos تمتد (
الموقف: المطلق؛
العرض محجوب؛
العرض: 223 بكسل؛
الحشو: 15px 0؛
لون الخلفية: # 337ab7؛
Box-Shadow: 0 5px 10px RGBA (12، 12، 12، 0.1)؛
اللون: # F3F0F0؛
الخط: 700 18px / 1 "لاتو"، sans-serif؛
نص-الظل: 0 1PX 1PX RGBA (8، 8، 8، 0.1)؛
تحويل النص: الأحرف الكبيرة؛
نص محاذاة: مركز؛
}
malugeke_deculos أعلى اليسار (
أعلى: -10 بكسل؛
اليسار: -10 بكسل؛
}
. malugeke_deculos - أعلى اليسار :: من قبل،. malugeke_deculos - أعلى اليسار :: بعد (
الحدود اليسرى: شفافة؛
}
. malugeke_deculos أعلى اليسار :: قبل (
أعلى: 0؛
اليمين: 0؛
}
. malugeke_deculos أعلى اليسار :: بعد (
اليسار: 0؛
أسفل: 0؛
}
. malugeke_deculos أعلى اليسار (
صحيح: -25PX؛
أعلى: 30px؛
تحويل: تدوير (-45deg)؛
}
malugeke_deculos أعلى اليمين (
أعلى: -10 بكسل؛
صحيح: -10 بكسل؛
}
. malugeke_deculos أعلى اليمين :: من قبل، malugeke_deculos-أعلى اليمين :: بعد (
الحدود ذات اللون الأعلى: شفاف؛
الحدود اليمنى اللون: شفافة؛
}
. malugeke_deculos-أعلى اليمين :: قبل (
أعلى: 0؛
اليسار: 0؛
}
. malugeke_deculos-أعلى اليمين :: بعد (
اليمين: 0؛
أسفل: 0؛
}
. malugeke_deculos-أعلى اليمين (
اليسار: -25PX؛
أعلى: 30px؛
تحويل: تدوير (45deg)؛
}

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

هنا يمكن ترتيب مطور الويب بشكل جميل، لأنه بالنسبة لهذا الإطار بالكامل، يذهب الإطار بالفعل، كل هذا يتوقف على لوحة لون موارد الإنترنت وبشكل عام حيث ستكون ولأي غرض لوضع مثل هذا الإطار الأصلي وبعد