كيفية تقريب زر في كس: طرق وتعليمات بسيطة

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

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

1. }
4. هناك طريقة أخرى لتقريب الزر وهي استخدام العناصر الزائفة ::قبل و ::بعد. يمكنك إنشاء هذه العناصر الزائفة وتعيين زوايا دائرية لها باستخدام خاصية نصف قطر الحدود. ثم يمكنك استخدام العناصر الزائفة لإنشاء تأثير تقريب زوايا الزر.
5. لماذا أحتاج إلى تقريب الزر في كس: المزايا والتطبيقات
6. طريقة سهلة لجولة قبالة زر يستخدم الخاصية الحدود دائرة نصف قطرها
7. كيفية تقريب زاوية واحدة فقط من الزر باستخدام خاصية نصف قطر الحدود
8. باستخدام عنصر زائف:: قبل إنشاء زوايا مدورة من الزر
9. كيفية تقريب زر باستخدام التدرج والتدرج الشعاعي
10. تعليمات لاستخدام مكتبات كس لإنشاء أزرار مدورة
11. تنفيذ أزرار مدورة تكيفية باستخدام استعلامات الوسائط

سؤال وجواب

كيف يمكنني تقريب قبالة زر في المغلق?

هل من الممكن تعيين أنصاف أقطار تقريب مختلفة لزوايا الزر?

كيف يمكنني جعل زر مع زوايا مدورة على جانب واحد فقط?

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

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

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

سهولة الاستخدام على الأجهزة التي تعمل باللمس: تجعل الزوايا الدائرية الزر أكثر ملاءمة للضغط على الأجهزة التي تعمل باللمس مثل الهواتف الذكية والأجهزة اللوحية.

تسلسل هرمي مرئي أفضل: تعمل الأزرار المستديرة على تنعيم الحواف الحادة وتجعل واجهتك أكثر سهولة في الاستخدام.

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

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

طريقة سهلة لجولة قبالة زر يستخدم الخاصية الحدود دائرة نصف قطرها

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

من أجل تقريب الزر ، يكفي تطبيق النمط على المحدد المقابل. على سبيل المثال ، لتعيين التقريب لزر مع فئة " زر " ، يمكنك استخدام رمز كس التالي:

.زر {

نصف قطر الحدود: 10 بكسل;

}

في هذا المثال ، تحدد القيمة 10 بكسل نصف قطر الزوايا الدائرية بالبكسل. يمكنك تغيير هذه القيمة وفقا لتفضيلاتك.

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

Также вы можете задавать разное значение для вертикальных и горизонтальных углов, используя свойства border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius соответственно. Например:

.button {

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-left-radius: 5px;

border-bottom-right-radius: 15px;

}

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

كيفية تقريب زاوية واحدة فقط من الزر باستخدام خاصية نصف قطر الحدود

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

أولا ، لنلق نظرة على البنية العامة لخاصية نصف قطر الحدود:

دائرة نصف قطرها الحدود: [تقريب الزاوية اليسرى العليا] [تقريب الزاوية اليمنى العليا] [تقريب الزاوية اليمنى السفلى] [تقريب الزاوية اليسرى السفلى];

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

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

نصف قطر الحدود: 25 بكسل 0 0 0;

هنا ، تشير القيمة 25 بكسل إلى نصف قطر التقريب للزاوية العلوية اليسرى من الزر ، ويتم تعيين القيم المتبقية على 0.

وبالمثل ، يمكنك تقريب الزاوية العلوية اليمنى أو السفلية اليمنى أو السفلية اليسرى من الزر فقط عن طريق تعيين القيمة المناسبة للمعلمة الثانية أو الثالثة أو الرابعة لخاصية نصف قطر الحدود.

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

باستخدام عنصر زائف:: قبل إنشاء زوايا مدورة من الزر

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

أولا ، قم بتعيين أنماط الزر الخاص بك عن طريق تحديد فئته أو معرفه:

.زر {

موضع: نسبي;

الحشو: 10 بكسل 20 بكسل;

لون الخلفية: # 007;

اللون: # فف;

نصف قطر الحدود: 5 بكسل;

}

هنا قمنا بتعيين الأنماط الأساسية للزر ، بما في ذلك الخلفية ولون النص ونصف قطر الزاوية.

لإضافة زوايا دائرية باستخدام عنصر زائف:: من قبل ، أضف الكود التالي إلى أسلوبك للزر:

.زر:: قبل {

المحتوى: "";

موضع: مطلق;

أعلى: 0;

اليسار: 0;

العرض: 100%;

الارتفاع: 100%;

نصف قطر الحدود: 5 بكسل;

لون الخلفية: # 007;

التعتيم: 0.5;

ض-الفهرس: -1;

}

إذا كنت تريد أن تعطي الزر الخاص بك شكل أكثر تعقيدا باستخدام التدرج والتدرج شعاعي ، يمكنك استخدام خصائص كس

معلومات أساسية

و

شعاعي التدرج

.

ادفعني

```

أضف الأنماط التالية للفئة

.التدرج-زر

في المغلق الخاص بك:

"'المغلق

.التدرج-زر {

معلومات أساسية: التدرج الشعاعي (دائرة في أعلى اليسار ، # وما يليها 800، وما يليها 0000);

اللون: # فف;

الحشو: 10 بكسل 20 بكسل;

الحدود: لا شيء;

في هذا المثال ، نستخدم الخاصية

، اضبط نصف قطر الزوايا الدائرية للزر

نصف قطر الحدود: 50 بكسل

وأضاف مؤشر قياسي عند التمرير فوق الزر

المؤشر: المؤشر

.

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

، وكذلك الفصل

.بتن-العائمة

لإضافة تأثير زر عائم.

نموذج التعليمات البرمجية لإنشاء زر مستدير باستخدام التمهيد:

زر مستدير

وبالمثل ، يمكنك استخدام فئات من مكتبات كس الأخرى عن طريق تحديدها في السمة

الفصل

من العنصر.

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

تنفيذ أزرار مدورة تكيفية باستخدام استعلامات الوسائط

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

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

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

@الوسائط (أقصى عرض: 767 بكسل) {

.زر {

نصف قطر الحدود: 10 بكسل;

}

}

@الوسائط (الحد الأدنى للعرض: 768 بكسل) {

.زر {

نصف قطر الحدود: 20 بكسل;

}

}

@وسائل الإعلام (دقيقة العرض: 1024 بكسل) {

.زر {

1. نصف قطر الحدود: 30 بكسل;
2. }
3. }

في هذا المثال ، يتم استخدام ثلاثة استعلامات وسائط:

طلب بحد أقصى لعرض الشاشة يبلغ 767 بكسل: يحتوي الزر على نصف قطر تقريب يبلغ 10 بكسل.

طلب بعرض شاشة لا يقل عن 768 بكسل: يحتوي الزر على نصف قطر تقريب يبلغ 20 بكسل.

طلب بعرض شاشة لا يقل عن 1024 بكسل: يحتوي الزر على نصف قطر تقريب يبلغ 30 بكسل.

وبالتالي ، عند تغيير عرض الشاشة على أجهزة مختلفة ، سيتغير تقريب الزر تلقائيا ، مما يضمن قدرة الواجهة على التكيف.

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

سؤال وجواب

كيف يمكنني تقريب قبالة زر في المغلق?

هناك عدة طرق لجولة قبالة زر في كس. واحدة من أسهل الطرق هي استخدام خاصية نصف قطر الحدود. مثال الكود: زر {نصف قطر الحدود: 10 بكسل؛}